자바스크립트(js), css 수정 후 바뀐 내용이 브라우저에 바로 적용 되지 않을 때

HTML 파일에서 JS와 CSS를 import해서 페이지를 작성 할 때 자주 만나는 문제가 있다. JS(자바스크립트) 또는 CSS의 내용을 변경하고 웹서버로 업로드 했는데 바뀐 내용이 바로 적용 되지 않을 때가 있다. 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" 이 문장이 하나의 파일 이름이 된다.

( ? 뒤에 매개변수를 사용하고 싶을 때는 자바스크립트를 이용해 ? 뒤의 문자를 잘라 낼 수 있는데 그 Tip은 다음 기회에... )

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

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

이렇게 주소 형태를 변경 해 준다. ? 뒤에는 어떤 문자가 와도 상관 없다. 꼭 변수 형태가 아니라 myjs.js?20150501 이렇게 숫자나 문자만 적어도 무방하다. 이렇게 매번 ? 뒤의 문자를 바꿔 준다면 브라우저는 이전의 캐쉬는 무시하고 새 파일을 다시 읽어온다.

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

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

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