JS나 CSS 수정 후 서버에 반영했지만 읽지 못할 때

웹사이트 운영을 하다보면 js파일이나 css파일을 수정하는 경우가 종종 발생하는데,

가끔씩 운영서버에 새로 올린 js, css 파일을 못 읽는 경우가 있다.

특히나 PC 같은 경우 아는 사람은 알겠지만 히스토리 삭제로 다운 받은 클라이언트용 파일들을 지우면 그만이지만,

일반 고객들은 지우기 힘들 뿐더러 모바일 같은 경우 더욱 심각하다.

설정에 어플리케이션 관리 - 데이터삭제 과정을 거쳐야 하는데 이걸 누가 일일히 해 보겠는가!

아이폰은 웹뷰용 앱인 경우 대응 조차 못한다. 사파리는 데이터 지우기라도 되지만. 앱은 그게 없다.

JS와 CSS는 브라우저에서 캐쉬를 저장하는데 같은 페이지를 다시 접속 할 때 속도를 빠르게 하는 효과도 있고 트래픽도 절약 할 수 있다.

캐쉬 파일은 로컬(PC 또는 모바일)에 저장 되는 임시 파일이기 때문에 웹서버에 변경 된 새 파일을 업로드 해도 캐쉬 타임이 지나지 않으면 브라우저는 계속 로컬에 저장 된 캐쉬 파일을 읽어 온다.

이럴 때는 import 하는 태그 명령줄에 버전 형태의 변화를 주면 된다.

 

<script src="myjs.js"></script>

가장 간단하게 JS 파일을 import 하는 태그 형태다.

myjs.js의 내용을 변경하고 변경 된 내용을 바로 적용하고 싶을 때는 파일명 뒤에 ?를 붙이고 시리얼 번호를 붙여준다. 보통 버전 형태로 번호를 붙여준다.

<script src="myjs.js"></script>

와

<script src="myjs.js?v=1"></script>

이거는 같은 파일이지만 이 파일을 import 하는 HTML 문서에서는 다른 파일명으로 취급한다.

JS 파일 본문에서는 ? 뒤에 매개변수를 인정하지 않는다. "myjs.js?v=1" 이 문장이 하나의 파일 이름이 된다.

 

내용이 다시 변경 돼 새 파일을 업로드 했다면 다음 파일은

<script src="myjs.js?v=2"></script>

이렇게 주소 형태를 변경 해 준다. ? 뒤에는 어떤 문자가 와도 상관 없다. 꼭 변수 형태가 아니라 myjs.js?20150501 이렇게 숫자나 문자만 적어도 무방하다.

이렇게 매번 ? 뒤의 문자를 바꿔 준다면 브라우저는 이전의 캐쉬는 무시하고 새 파일을 다시 읽어온다.

css를 불러올 때도 마찬가지다.

<link rel="stylesheet" type="text/css" href="mycss.css?v=1">

 

이 방법은 파일의 버전관리에 용의하기도 하지만 웹 페이지를 작업하는 과정에서 새로고침이 불편한 모바일 작업을 할 때 매우 편하다.

출처: http://ziumb.tistory.com/88 [지음빌더]