본문 바로가기

~하는 법

CSS 변경사항이 재깍재깍 반영되지 않을 때 해결방법

웹브라우저의 캐시 때문에 .CSS나 .JS 파일 변경사항이 바로 반영되지 않는 경우가 있소.

특히 크롬은 요즘 들어 캐시를 꽤나 소중히 여기는지 어지간해서는 리프레시가 아니 되는구료.


그런 전차로 이를 해결키 위하야 많은 햏자들이 다음과 같은 방법을 제시하였소.


<link rel="stylesheet" type="text/css" href="style.css?v=2>">


style.css 뒤에다 ?v=2 이런 식으로 무의미한 쿼리를 붙여, 웹브라우저로 하여금 파일 이름이 바뀐 것으로 인식하게 함으로써, 변경사항이 바로 반영되도록 함이오.

그런데, 이 방법 또한 매번 .css 파일을 수정할 때마다 저 숫자를 바꾸어 주려니 너무 번거로웠소.


그리하야, 소햏은 다음과 같은 방법을 쓰기로 작정하였소.


<link rel="stylesheet" type="text/css" href="style.css?v=<?=time()?>">


타임스탬프를 씀으로써, ?v= 뒤의 숫자가 매 초마다 자동으로 바뀌니 .css 파일을 고칠 때마다 링크 태그까지 고쳐야 하는 귀차니즘으로부터 해방이오.

(물론 .php 한정이오.)


다만, 이는 웹브라우저의 캐시 기능을 쓰지 않겠다는 작정이니, 이로 인한 데이터 전송량이나 웹브라우저의 고생이 늘어난다는 단점이 있소만, 요즘 같은 고속 시대에 소규모 웹에서 그 정도 손해는 손해도 아니라는 생각이오.

그래도 가급적이면 소햏처럼 .css 파일의 수정이 잦은 경우에만 이용하는 것이 바람직하겠소.