JS / CSS 파일 캐시 방지하기

 

웹 사이트를 운영 및 관리하다보면 JS 및 CSS 파일을 수정하는 일이 많은데,

이 때 파일 수정한 상태로 적용되지 않고 브라우저에서 캐시로 남겨진 JS 나 CSS 가 보여지는 경우가 있습니다.

 

수정한대로 수정되어지지 않아 깨지거나 화면에서 안보이는 경우도 종종 생기는데 이를 방지하기 위해서 JS / CSS 파일을 캐시 방지하는 것이 좋습니다.

 

Ctrl + F5키를 눌러서 해당 페이지의 캐시를 삭제하며 수정한 JS / CSS 파일을 새로 가져올 수 있지만 사이트를 이용하는 모든 유저들이 모두 이와 같은 방법을 알고 있지 않으며 수정한 파일이 있으니 해당 키를 눌러 새로고침 해달라는 안내를 매번 할 수 없으므로 수정한 파일에 쿼리스트링을 붙여 관리합니다. 

 

 

물론, 파일명을 매번 수정하여 올리는 방법도 있지만 매번 변경하기 번거로운 단점이 있어 쿼리스트링의 값을 자동으로 변경하도록 설정해두면 브라우저에서는 다른 URL로 인식하기 하여 새 파일로 읽어지기 때문에 브라우저에 캐싱된 파일 사용을 방지할 수 있게 됩니다. 

 

 

<!-- 캐시 방지 처리 전 -->
<link rel="stylesheet" type="text/css" href="common.css">

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



<!-- 캐시 방지 처리 후 -->
<link rel="stylesheet" type="text/css" href="common.css?version=YYYYMMDD">

<script type="text/javascript" src="common.js?version=YYYYMMDD"></script>

 

 

캐시 방지 처리를 하고 나면 JS나 CSS 파일을 웹 브라우저에서 사용하지 않고 서버에서 다시 받아서 사용하게 됩니다.

 

날짜를 자동으로 받기 위해서는 개발 언어에 맞게 date 값을 불러오면 됩니다.