[캐시방지] 웹 개발 시 CSS, JS, Image 캐시 방지하는 법

웹 사이트를 개발하는 중에 이미지나 css 또는 javascript 파일의 내용을 수정해도 반영이 안되어 있을 경우를 가끔 보실 수 있습니다. 심지어 수정본을 배포하고 나서도 어떤 사용자가 이전에 사이트에 접속하고 나서 인터넷 사용 기록 및 캐시 지우기를 하지 않은 이상 배포 이전의 css, js, image 파일들이 그대로 사용되고 있어서 오류가 나거나 버그가 생기는 케이스가 생기곤 합니다.

 

이런 문제가 발생할 때마다 사용자보고 오래된 캐시(stale cache) 좀 지워주세요 라고 한다거나 새로고침 좀 해주세요 라고 한다거나 시크릿 브라우저로 한번 해보시겠어요 라고 하는 건 정말 어려운 일이겠죠.

 

기본적으로 캐쉬의 동작은 URL을 기준으로 기존에 동일한URL에 요청한 적이 있었는 지를 판단합니다. 그렇기 때문에 당연히 URL이 변경되면 기존의 캐시의 영향을 받지 않게 됩니다.

 

그래서 이런 문제가 생기는 것을 방지하기 위해서 개발자가 수정한 파일의 URL 뒤에 ?version=1.7 와 같은 파일의 버전 정보가 담긴 query string을 붙여서 적어주는 것입니다. 그러면 브라우저가 해당 파일을 새로운 파일로 인식하고 캐시에서 가져오는 것이 아니라 새로운 파일을 다운 받도록 동작합니다.

 

아래는 html 태그로 표현한 css, js, img 로 표현해본 캐시 방지 표기입니다. 표시하는 방식은 다양합니다. 어떤 사람은 version, modified date, timestamp, random value 등으로 표시합니다.

<link type="text/css" rel="stylesheet" href="./style.css?version=1.7" />

<script type="text/javascript" src="./script.js?v=2.3"></script>

<img src="./image/domdomdi.jpg?t=1324" />

 

일반적으로 위에서 본 version 넘버링 표시라던가 랜덤한 값을 추가시키는 것은 javascript에서 할 수도 있고 서버사이드에서 template engine 같은 곳에서 template tag를 활용해서 값을 추가할 수 있습니다.

 

// javascript
var rand = Math.floor((Math.random() * 10000));
document.write('<img src="./images/domdomi.jpg?"'+rand+'" />');

// flask jinja2 template engine
<img src="./images/domdomi.png?t={{ range(1111, 9999)|random }}" />

 

 

- 끝 -