script 소스 변경 반영 (version 바꾸기) - 캐시 삭제
[ JS 파일 전역변수가 인식되지 않는 오류와 캐시 문제 해결 ]
문제 상황
REQ.js에 전역 변수를 선언하고 이 전역변수를 다른 스크립트(REV.js) 혹은 JSP파일에서 사용해야 헀는데
로컬에서는 문제가 없었으나 배포 후 운영 환경에서는 아래와 같은 오류가 발생 !
-> name이 정의되지 않았습니다. 분명히 전역 변수 정의를 했는데도 파일이 최신으로 반영되지 않아 변수 자체를 못 찾는 상황 !
var name = "";
원인
운영 서버에서 JS 파일이 갱신되지 않는 이유는 브라우저 캐시 때문 !
크롬이나 IE(익스플로러)에서는 Ctrl + F5로 강력 새로고침을 해도 특정 상황에서는 스크립트 파일을 계속 이전 버전으로 로딩하는 문제가 발생.
특히 script 태그로 파일을 import해서 사용 중인 경우 소스 코드가 변경되더라도 브라우저가 같은 URL을 동일한 파일로 인식.
즉, 새 코드를 배포했는데도 사용자 브라우저는 “이미 이 파일 갖고 있어”라고 생각해 캐시된 파일을 그대로 사용.
해결 방법
스크립트 파일의 URL에 버전(query string)을 붙여주기 ! 예를 들어 version 값을 변경하면 브라우저는 다른 파일로 인식
<script src="/resources/js/REQ.js?version=1.1.0"></script>
만약 코드가 바뀌면 반드시 version 값을 갱신
<script src="/resources/js/REQ.js?version=1.1.1"></script>
결론
- 스크립트를 import해서 사용하는 경우 코드 수정 시 반드시 버전을 변경해야 한다.
- 버전 쿼리를 붙이면 브라우저가 새 파일로 인식해 캐시를 무시한다.
- 그렇지 않으면 아무리 캐시를 수동으로 지워도 같은 파일로 처리되어 최신 코드가 적용되지 않는다.
이런 캐시 문제는 개발 환경에서는 잘 안 보이는데 운영 환경에서는 사용자 브라우저에 오래된 파일이 남아 있어 종종 발생.
만약, 자동 배포 파이프라인을 구축할 수 있다면 배포 시마다 빌드 해시나 버전 번호를 자동으로 업데이트하는 방식도 있음 !
혹은 매번 수동으로 버전을 바꾸는 게 번거롭다면, <%=System.currentTimeMillis() %> 이런식으로 사용가능
이럴 때 JSP나 서버사이드 렌더링을 사용한다면 아래처럼 현재 시간을 쿼리로 붙여 항상 새로운 파일로 인식시키는 방법
System.currentTimeMillis()는 페이지가 렌더링될 때마다 밀리초 단위의 현재 시간을 쿼리로 생성
<script src="/resources/js/REQ.js?<%=System.currentTimeMillis()%>"></script>장점:
- 코드가 바뀌든 안 바뀌든 항상 최신 파일로 로딩
- 수동으로 버전 번호를 관리할 필요 없음
단점:
- 매 요청마다 JS를 새로 받아오게 되므로, 캐싱 효과를 완전히 잃게 됨
- JS 용량이 큰 경우 사용자 브라우저에 부담을 줄 수 있음
운영환경에서는 코드가 실제로 변경될 때만 버전 번호를 올리고, 개발환경에서만 System.currentTimeMillis()를 쓰는 방식으로 혼용하는 것이 좋음 !