👀 CSS/JS 버전관리가 필요한 이유
수정된 CSS나 JS파일을 배포하더라도 브라우저에 적용이 안되는 경우가 있다.
새로운 버전이 배포 되더라도 브라우저가 이전 버전의 파일을 계속 사용하기 때문에 발생하는 문제이다.
수정된 파일 배포 후 적용이 안됐다고 문의가 오면 '(ctrl+shift+r) 눌러 보시겠어요?'라고 하는 경험을 해봤을 것이다. 버전관리를 하면 앵무새처럼 이 말 안해도된다! 구웃
👀 브라우저는 왜 이전 버전의 파일을 계속 사용할까?
브라우저는 웹 페이지의 성능을 향상시키기 위해 파일을 캐시하고, 이후에 같은 파일을 필요로 할 때 캐시된 버전을 사용함으로써 네트워크 대역폭을 절약하고 페이지 로드 속도를 높일 수 있기 때문이다.
버전 관리를 통해 파일이 업데이트 되었음을 알림으로써 브라우저가 새로운 파일을 다운로드하고 캐시를 갱신하게 할 수 있다.
👀 동작원리
기본적으로 캐시 동작은 url을 기준으로 기존에 동일한 url에 요청한 적이 있었는지를 판단하게 된다.
즉, 해당 수정된 파일의 url을 바꿔주면 기존 캐시값의 영향을 받지 않지 않을 수 있다.
👀 방법
1. 수정한 파일명 변경
index.css 파일을 index1.css로 파일명을 변경함으로써 캐시 값을 막을 수 있다. 방법인가 싶을 정도로 귀찮아보인다..
파일 이름도 바꿔줘야하고 참조하는 소스도 바꿔줘야 한다. 이런 원리로 캐시 값을 막을 수 있다 정도로 이해하고 넘어가자.
// before
<link href="./index.css" rel="stylesheet" type="text/css" />
// after
<link href="./index1.css" rel="stylesheet" type="text/css" />
2. 수정한 파일 참조소스에 쿼리스트링 붙이기
수정한 파일명을 변경할 필요 없이 참조된 소스에 버전 쿼리스트링을 붙여줌으로써 캐싱을 막을 수 있다.
파일명 뒤에 ?ver=1.1 이나 ?ver=20230202 처럼 쿼리스트링을 붙여주는 것 이다. 말이 어려울 수 있어도 소스를 보면 단순하다.
// before
<link href="./index.css" rel="stylesheet" type="text/css" />
// after
<link href="./index.css?ver=1.1" rel="stylesheet" type="text/css" />
<link href="./index.css?ver=20210517" rel="stylesheet" type="text/css" />파일명을 바꾸는 것보다는 덜 번거로워 보인다. 그렇지만 쿼리스트링을 하드코딩으로 수정해주는 것도 여전히 번거롭다.
3. server side에서 자동으로 수정날짜가 쿼리스트링으로 붙도록 개발
쿼리스트링을 하드코딩으로 수정하는 것도 번거롭다면 sever side 프로그램에서 ver대신 해당 파일의 수정 날짜(modified date)가 자동으로 쿼리스트링으로 붙도록 세팅할 경우 파일이 수정되는 즉시 자동으로 반영되는 편리함을 느낄 수 있다.
php파일에서는 <?php echo date('Y h:i:s'); ?> 를 ? 뒤에 넣어주면 파일이 업데이트 될 때마다 쿼리스트링 값이 자동으로 변경된다.
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('Y h:i:s'); ?>" />
