웹 브라우저 캐시 문제 피하기

이미지, 자바스크립트, CSS 파일

가끔 어떤 사이트를 사용하다가 문제가 생기면 해결 방법으로 1임시 파일을 지우라는 답변을 듣습니다.

IE 11에서 임시 파일 삭제하기

꽤 오래 전에는 웹 브라우저 플러그인이 사용자 모르게 2임시 인터넷 파일 옵션을 바꾸기도 했습니다.

IE 11의 임시 인터넷 파일 설정

웹 사이트(웹 애플리케이션)를 구성하는 이미지, 자바스크립트, CSS 등을 수정한 후 바뀐 내용을 서버에 반영해도 사용자의 웹 브라우저에는 반영되지 않을 수 있습니다. 웹 브라우저가 성능 개선을 위해 과거의 이미지, 자바스크립트, CSS 파일 등을 유지하기 때문입니다.

그렇다고 사용자가 웹 브라우저 옵션 창에서 임시 파일을 매번 지우게 하거나 옵션을 바꾸게 할 수는 없습니다. 그래서 서버에서 HTTP 헤더로 매번 파일을 갱신하도록 하기도 합니다. 이 방법은 눈에 보이는 성능 상의 문제가 있습니다.

내용이 바뀌면 파일 이름(경로)을 바꾸는 것이 좋은 방법입니다.

쓰리래빗츠 북을 한달 마다 릴리스를 합니다. 제품을 빌드 할 때마다 이미지, 자바스크립트, CSS 파일 등에 쿼리 문자열로 빌드 번호를 붙이는 방법을 사용합니다.

여러 파일로 구성되어 있는 외부 라이브러리(모나코 에디터)는 경로에 1버전을 넣어 처리하고 있습니다.

외부 라이브러리에도 쿼리 문자열을 붙였지만 이 외부 라이브러리는 동적으로 다른 파일을 로드합니다. 이 때 웹 브라우저 캐싱 문제가 발생합니다. 그래서 경로 자체를 바꾸는 방법을 선택했습니다.