[HTML+CSS] javascript 수정 시 새롭게 캐시 적용법

 

javascript 수정 시 새롭게 캐시 적용법 이라고 제목을 적었지만 이게 뭔소리인가? 라고 생각이 듭니다.

 

웹 개발 시 .js 나 .css 파일 수정을 자주 하는데 브라우저(클라이언트) 에서는 js나 css를 디폴트로 자동으로 캐싱하여 사용합니다. 

 

하지만 사용자의 요구사항에 따라 js css 파일을 수정하여 적용 하였는데, 수정이 안되고 변경하기 전 상태를 계속 보여주게 됩니다. 전 이게 너무 답답했습니다. 수정했는데 반영이 안되니 제가 기능을 잘못 한것인 줄 알고 다시 변경하고 삽질을 많이 했던 경험이 있습니다.

 

이유는 브라우저가(클라이언트)가 캐시에 저장된 값을 불러 들였기 때문입니다.

 

웹 브라우저가 새롭게 수정된 파일을 캐시에 저장시켜야 바로 변경 확인이 가능합니다.

 

방법으로는 js파일이나 css 파일에 버전을 부여하는 방법입니다.

 

전

<link href="~~~/custom.css" rel="stylesheet" type="text/css"/>

 

후

<link href="~~~/custom.css?ver=1.1" rel="stylesheet" type="text/css"/>

 

 

전

<script type="text/javascript" src="/js/scripts.js"></script>

 

후

<script type="text/javascript" src="/js/scripts.js?ver=20180810"></script>

 

 

다음과 같이 버전을 표기한다면 기존 캐시를 이용하지 않고 새롭게 캐시를 생성해 줍니다.

 

js와 css파일 반영을 바로 확인 가능하게 해줍니다.