[배포] 정적 소스 쿼리스트링_캐쉬문제 해결

 

 

웹사이트 운영시 정적파일(js, css, html )을 수정해야 하는 경우가 종종 발생하는데, 

일반적으로 브라우저에서는 js, css 파일을 캐시로 저장하기 때문에 수정된 파일 반영이 안되는 경우가 자주 발생한다. 이럴때 단축키 CTRL + F5을 통해 캐시를 갱신하여 최신 소스(css, js)로 웹 사이트를 표출할 수 있게 된다. 

 

그러나, 모든 사용자들에게 CTRL+F5로 새로고침 하세요. 동네방네 외치고 다닐 수는 없는 노릇이다.

 

이런 불편 사항을 개선하기 위해서 해결방법으로 크게 두가지를 제시해 보았으며, 그에 대한 내용을 아래와 같이 구분해보았다.

1. 파일명 변경

2. 쿼리스트링 활용
  1) 기본(수동)
  2) 응용(자동)

 

 

---

 

 

1. 파일명 변경

캐쉬의 유효기간 동안 동일한 이름의 파일이 다시 열리게 되면, 브라우저는 캐쉬의 갱신기간 이례에 최초 open source를 계속해서 사용하는 것이 문제이기 때문에, 배포시마다 계속해서 파일명을 변경해주는 방법이 있다. 

<!-- 아래와 같은 두 종류의 정적소스를 참조해야하는 경우 -->
<link rel="stylesheet" type="text/css" href="css/newFile.css">
<script src="js/newFile.js"></script>

<!-- 다음과 같이 매번 파일명을 변경하는 방식으로 관리할 수 있다 -->
<!-- ver.1 -->
<link rel="stylesheet" type="text/css" href="css/newFile1.css">
<script src="js/newFile1.js"></script>
<!-- ver.2 -->
<link rel="stylesheet" type="text/css" href="css/newFile2.css">
<script src="js/newFile2.js"></script>

 

이 경우에는 배포할때마다 파일명은 물론, html에 참조할 파일명까지 일일이 수정해주어야하니 그닥 효율적인 방법은 아니라고 볼 수 있다.

 

 

 

---

 

 

2. 쿼리스트링 활용

 

1) 기본(수동)

<!-- 쿼리스트링이란? -->
<link rel="stylesheet" type="text/css" href="css/newFile?파라미터=값.css">
<script src="js/newFile.js?ver=20221020"></script>

위의  예시와 같이 파일명 뒤에 붇는 파라미터를 의미한다.

 

물론 파라미터를 통해 파일에 변수를 전달해 줄 수도 있지만, 캐싱 관리를 목적으로 사용하는 지금과 같은 경우는 아무런 영향을 주지 않게 된다.

 

즉, 파라미터와 그 값을 매번 다르게 주는 방식을 통해 파일명을 직접 변경하지 않고도 캐싱 없이 바로 소스가 반영되도록 작업할 수 있다는 것이다. 캐싱을 없애는 것만이 목적이므로 이외에 다른 어떤 작업도 필요하지 않게 된다.

 

 

 

---

 

 

 

2) 응용(자동)

위의 목차를 통해 파일명을 직접 변경해야하는 수고를 덜었으나, 어찌됐던 html문서에서도 매번 필요할때마다 참조 정적소스에 파라미터를 다르게 작성해야한다는 것 또한 번거로울 수 있다.

 

이 부분을 개선하기 위해 html문서가 로딩될 때 마다 파라미터와 그 값을 자동으로 다르게 부여하여, 한 번의 작업만으로 캐싱된 소스들을 강제로 재로딩 시킬 수 있는 방법이 있다.

 

그에 대한 설명은 아래와 같다.

<!-- 1. 필요한 핵심관심을 페이지 지시어를 통해 선언 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!-- 2. jsp에는 마땅한 date표시 방법이 없으니, java에서 class끌어다가 Bean으로 사용 -->
<jsp:useBean id="today" class="java.util.Date" /><!-- java에서, 시간을 다루는 아무 class나 갖다써도 됨 -->
<fmt:formatDate value="${today}" pattern="yyyyMMddHH24MMss" var="nowDate"/><!-- 날짜표시패턴과 변수명 지정 -->
<c:set var="contextPath" value="${pageContext.request.contextPath}" /><!-- 이건 그냥 프로젝트 경로 -->

<!-- 3. 사용 -->
<link rel="stylesheet" type="text/css" href="${contextPath}/css/newFile.css?update=${nowDate}">
<script src="${contextPath}/js/newFile.js?update=${nowDate}"></script>

 

여러 방식을 적절히 응용하여 랜덤수를 부여하는 방법도 있겠지만, 본인은 그냥 날짜를 통해 버전이 관리될 수 있도록 설정하였다. 또한 프로젝트마다 하루에 몇 번씩이나 재실행 시키는 경우가 많아 매번 html로딩마다 모든 정적소스를 재로딩 할 수 있도록 날짜 패턴을 초까지 등록하였다.

 

적용이 완료된 경우의 예시 이미지를 첨부하였다. 

 

 

로딩된 html문서에서 참조된 정적소스 목록

위 목록을 통해 정상적으로 참조되었다면, source에 이와 같이 표시되는 모습을 볼 수 있다.

 

 

 

 

java의 버전에 따라 시간과 관련하여 사용할 수 있는 제공 Class가 다르며, 그에 대해 자세한 내용이 정리된 게시글의 링크를 아래에 참조하였다.

https://hianna.tistory.com/607

[Java] 현재 날짜, 현재 시간 구하기

 

 

 

 

 

 

 

 

---

 

아래로는 해당 게시글 작성을 위해 참고한 게시물의 링크를 첨부하였다.

 

https://minggu92.tistory.com/59?category=1032726 

[Web] 캐싱된 유저 CSS 파일 강제 재로딩(캐시방지처리) -1

https://minggu92.tistory.com/60?category=1032726 

[Web] 캐싱된 유저 CSS 파일 강제 재로딩(캐시방지처리) -2

---

https://swealth.tistory.com/175

[css/js]쿼리스트링 version으로 수정시 반영되도록

 

 

 

 

---