웹사이트를 운영하다보면 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">
- 수정 후
<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>"/>
|
위와 같이 설정하면 브라우져에서는 다음과 같은 파일을 가져온다
