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

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

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

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

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

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

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

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

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

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

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

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

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

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