감자머리와말랑공주

html 본문을 수정했음에도 js 및 css 파일이 갱신되지않아 브라우저에서 변경되어진 정보가 제대로 표현되지 않을때가 있다.

브라우저의 캐싱은 url 기준으로 동일한 url 이 요청되어졌는지를 확인합니다.

캐시를 사용하는 목적은 빠른 화면 처리속도를 높일 수 있다.
하지만 수정된 내용이 반영되지 않은 화면이라면 이야기가 달라진다.

캐시를 사용하지 않기위해 다음과 같이 처리한다.

1. 메타테그
cache-control
no-cache : 캐시를 사용하기전에 재검증을 위한 요청을 강제한다.
no-store : 클라이언트의 요청, 서버의 응답등을 일제 저장하지 않는다.
must-revalidate : 캐시를 사용하기전에 반드시 만료된 것인지를 검증한다.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" >

2. expires
리소스가 validate 하지 않다고 판단할 시간을 설정함
유효하지 않은 날짜 포맷과 같은경우 리소스가 만료되었음을 의미한다.

<meta http-equiv="expires" content="0">

3. HTTP 1.0버전에서 HTTP 1.1의 cache-control 헤더와 같은 기능을 함

<meta http-equiv="pragma" content="no-cache">

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

temp.js 를 수정했다면 temp2.js 이렇게 수정한다.
(html 해당 js 의 link 정보도 수정)

이 방법은 파일명을 수정시마다 바꿔야하므로 귀찮고도 번거롭다.

수정한 파일의 링크정보에 쿼리스트링을 붙인다.

as-is
<script type="text/javascript" src="temp.js">
<link rel="stylesheet" type="text/css" href="temp.css">

to-be
<script type="text/javascript" src="temp.js?ver=1.0">
<link rel="stylesheet" type="text/css" href="temp.css?ver=1.0">

만약 jstl을 사용한다면
<%@ 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="now" class="java.util.Date" />
<fmt:formateDate value="${now}" pattern="yyyyMMddHHmmss" var="nowss"/>

<script type="text/javascript" src="temp.js?ver=${nowss}">
<link rel="stylesheet" type="text/css" href="temp.css?ver=${nowss}">