[CSS/JS] css, js 브라우저 캐싱 방지 방법 -버전 관리

🤷‍♀️ 버전관리를 해야하는 이유

 

수정한 css, js 파일을 재배포할 경우 브라우저에 바로 적용되지 않는 경우가 있다.

새로 배포를 했음에도 이전에 배포된 파일이 계속 사용되기 때문인데

이러한 경우를 방지하려면 css와 js 파일의 버전관리를 해주어야 한다.

 

 

 

 

 

🤷‍♀️ 버전관리 방법

 

재배포할 css나 js파일의 파일명을 바꿔주는 것도 하나의 방법이지만 상당히 번거롭다.

파일명을 변경하지 않는 방법으로는 수정한 파일을 참조하는 소스에 쿼리스트링을 붙이는 것이다.

 

방법은 간단하다. 파일명 뒤에 ?ver=0.1 또는 ?ver=20240313 등을 붙여주면 된다.

자주 수정되는 소스의 경우 날짜를 기입하고, 그렇지 않은 경우 버전을 매겨서 기입해주면 된다.

 

 

소스를 보면 아래와 같다.

 

// css version 추가
<link rel="stylesheet" href="../css/test.css?v=0.1">

// js version 추가
<script type="text/javascript" src="../js/test.js?v=20240313"></script>