[Front] js/css 파일 캐시 방지

웹사이트를 운영하다보면 jsp단에서 css또는 js파일을 수정하는 일이 종종 있는데, 파일을 수정 후 새로 배포를 해도 브라우저에서 js/css파일을 캐시로 저장하기 때문에 수정한 파일이 아닌 브라우저에 먼저 저장되어있는 js/css파일을 사용하기 때문에 수정한 부분이 작동하지 않거나 화면이 깨져 보일 수 있다.

 

브라우저 캐쉬의 동작은 URL을 기준으로 기존에 동일한 URL에 요청한 적이 있었는지를 판단하게 된다.

 

Ctrl + F5키를 눌러서 해당 페이지의 캐시를 삭제하면서 새로고침해서 수정한 js/css파일을 새로 가져올 수 있으나 사이트를 이용하는 모든 유저들에게

 

"저희 이번에 js/css파일을 수정했으니 Ctrl + F5키를 눌러서 캐시삭제 후 사이트를 이용해주세요"

 

라고 할 순 없으니 아래의 방법들을 사용하도록 하자

 

 

1. 수정한 파일의 이름을 변경

예를 들어 test.css파일을 수정했다고 하면 수정 후 파일의 이름을 바꿔서 브라우저에서 새로 받아오게 하는 방법이 있다.

 

test.css -> 수정 후 파일 이름 변경 -> test2.css

 

- 수정 전

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

<span style="font-family: &quot;맑은 고딕&quot;, sans-serif;"> p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px D2Coding; color: #3933ff} </span>

 

- 수정 후

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

 

하지만 이 방법은 파일의 이름도 바꿔줘야하고 해당 파일을 불러오는 부분까지 수정해 줘야 하기 때문에 좋은 방법은 아니다.

 

 

2. 수정한 파일에 쿼리스트링 붙이기

js/css파일의 이름을 유지하는 대신 뷰페이지인 jsp파일에서 불러올 때 버전 쿼리 스트링을 붙여주는 방법이 있다.

 

- 수정 전

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

 

- 수정 후(쿼리스트링 추가)

<link rel="stylesheet" type="text/css" href="test.css?version=1.2">

 

위 코드의 경우 '?version=1.2'이라고 파일명 뒤에 쿼리스트링을 붙여주었다. 파일을 수정한 후, 번거롭게 파일명을 바꾸는 대신 version값만 바꿔주면 브라우저에서는 다른 URL로 인식하기 때문에 브라우저에 캐싱된 파일을 사용하는 것을 방지할 수 있게 된다.

 

자주 변경하는 js/css파일의 경우 쿼리스트링 값을 자동으로 변경하도록 jstl등을 활용하여 날짜를 붙여줘 자동으로 날짜가 바뀔 때 마다 반영 되도록 응용할 수 있다.

 

아래는 jstl을 활용하여 날짜가 변경될 때 마다 쿼리스트링 값이 바뀌도록 하는 예시이다.

 

1) 먼저 사용할 jstl을 선언해 준다.

2) jsp:useBean 활용하여 오늘 날짜 데이터를 가져온다.

3) fmt를 사용하여 오늘 날짜를 지정

4) c:url과 c:param을 활용하여 css 또는 js파일 뒤에 날짜 쿼리스트링을 입력

 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <jsp:useBean id="today" class="java.util.Date" /> <fmt:formatDate value="${today}" pattern="yyyyMMdd" var="nowDate"/> <link rel="stylesheet" type="text/css" href="<c:url value="/css/ik_intro.css"> <c:param name="dt" value="${nowDate}"/>c:url>"/>