[js/css] 수정/배포로 파일 업데이트시 캐시 방지 및 강력 새로고침(캐시 초기화) 방법

운영하고 있는 파일을 업데이트할 때, 기존에 있는 캐시 때문에 수정사항이 반영이 잘 안되는 경우가 있다.

이런 경우 캐시 초기화를 하면 문제없이 잘 반영되어있다.

하지만 사용자의 입장에선 캐시초기화(강력 새로고침)을 하지않는 경우가 많기때문에 오류가 난 경우가 많다.

이런 경우를 대비하는 소스코드가 있다.

 

파일 경로에 임의 쿼리스트링(단순 인자)를 추가하면 된다.

쿼리스트링 추가이기 때문에 실제 파일경로나 파일명을 바꿀 필요도 없다.

쿼리스트링 명만 바꿔도 다른 파일로 인식하기 때문에 서버 관리도 편리하다.

단, 쿼리스트링은 파일경로와 함께 영문,숫자로 적어야한다.

[css]
<link rel="stylesheet" type="text/css" href="파일의 파일 경로?쿼리스트링">
ex)<link rel="stylesheet" type="text/css" href="/common/css/common.css?ver=1">

[js]
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>  --> 선언
....
<script language="javascript" type="text/javascript" src="파일의 파일 경로?쿼리스트링"></script>
ex) <script language="javascript" type="text/javascript" src="/common/js/common.js?ver=1"></script>
    or
    //version.properties설정에 있는 변수를 불러와서 사용(다수를 수정시 좋음)
    <script src="/common/js/common.js?ver=<spring:eval expression="@version['version']"/>" type="text/javascript"></script>
    
    
[import]
@import url('파일의 파일 경로?쿼리스트링')
ex) @import url('/common/css/common.css?ver=1')

쿼리스트링을 추가해놓고 나중에 버전이 달라졌을 때마다 값을 바꾸면 새로운 파일로 인식하여 캐시로 인한 걱정이 없다.