쿼리스트링 추가로 js, css, img 파일 캐싱 방지

 

js나 css 파일, 이미지 파일을 변경해서 서버에 업로드를 하였는데 바로 반영이 안되는 경우가 종종 있다.

바로 캐싱 때문에 이전에 불러왔던 파일을 불러 오기 때문이다.

 

크롬의 경우에는 ctrl+shift+r을 눌러 확인이 가능하기도하지만,

해당 작업을 공유하는 다른 사람들에게 매번 '쿠키와 캐시를 지우고 들어가보세요!' 할수도 없고, 참으로 불편하다.

더군다나 캐시 지우는 방법을 모르시는 분들도 많고..

 

 

파일이 업데이트 될 때마다 캐싱이 되지 않도록 하는 방법은 아래와 같다.

 

---

캐싱 방지하는 방법

 

1. 파일명 변경하기(URL변경) (비추천)

파일명을 style.css -> style2.css 으로 변경

파일명을 아예 변경해서 업로드하면 캐싱 없이 새로운 파일을 불러온다.

하지만 수정 할 때마다 파일명을 변경해주고, 파일을 불러오는 부분에서 파일명을 매번 변경해주어야해서 불편한 방법이다.

 

 

2. 쿼리 스트링 추가해주기 (추천방법)

 

쿼리스트링이란?

http://xxx.xxx/style.css?ver=20201215 이런식으로 파일명 뒤에 붙는 파라미터들을 말한다.
이런 파라미터들을 통해 파일에 변수를 전달해 줄 수도 있지만 관련 없이 쓰는 경우에는 아무런 영향을 주지 않는다.

 

 

쿼리스트링 추가해주기

css나 js파일을 로드해줄때 파일명 뒤에 ?ver=1.2 이런식으로 붙여주면서 

수정될 때마다 숫자를 변경해주면 캐싱 없이 바로 반영이 된다.
ver=나 1.2 부분은 한글만 제외하고 아무거나 사용해도 상관이 없다. (관리가 편한 방식으로 하면된다.)

<link rel="stylesheet" type="text/css" href="style.css?ver=1.2" />
<link rel="stylesheet" type="text/css" href="style.css?date=20201215" />
<link rel="stylesheet" type="text/css" href="style.css?ver1.0" />
<link rel="stylesheet" type="text/css" href="style.css?updated" />

 

php 파일의 경우에는 더 편리하게 사용할 수 있는 방법이 있는데

<?php echo date('Y h:i:s A'); ?>를 넣어주면 파일이 업데이트될 때마다 파라미터 값을 따로 변경해주지 않아도 된다.

페이지가 로드될 때 해당 날짜와 시간, 초까지 불러와서 항상 캐싱없이 새롭게 로드 되게 할 수 있다.

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('Y h:i:s'); ?>" />

 

 

이미지나 js 파일 적용 방식 모두 동일하다.