[Web] 캐싱된 유저 CSS 파일 강제 재 로딩(캐시 방지 처리) -2
앞서 우리는 쿼리 스트링을 이용해 URL을 변경시키고 이를 클라이언트 브라우 저단에서 새로 다운로드할 수 있도록 설정해야 한다는 것을 알 수 있었다.
근데 개발자라면 이를 자동화 하고 싶은 욕구가 마구 샘솟을 텐데 다음과 같은 방법으로 해결할 수 있다.
첫 번째로 C태그를 이용해 오늘 날짜를 자동으로 붙이는 것이다.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<jsp:useBean id="today" class="java.util.Date" />
<fmt:formatDate value="${today}" pattern="yyyyMMdd" var="today"/>
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/common.css"><c:param name="dt" value="${today}"/></c:url>"/>html최상단에 jstl을 선언해준다.
그리고 오늘 날짜 today를 가져와 yyyymmdd형태의 포매팅을 해준다.
그럼 로드했을때 다음과 같이 나온다.
매일 최신날짜로 받을 수 있는 것이다.
단, 하루에도 몇 번씩 수정이 빈번하게 일어날 수 있는 파일이라면?
단순히 오늘 날짜가 들어가는 것보다 마지막으로 수정한 날짜와 시간인 timestamp가 들어간다면 더 확실할 것이다.
이를 자동으로 가져오기 위한 함수를 javascript로 다음과 같이 사용할 수 있다.
<script type="text/javascript"
/* 소스 업데이트 */
function getFetchVersion(file) {
try {
fetch(file).then(r => {
let lastModGmt = new Date(r.headers.get('Last-Modified'));
let lastModUtc = new Date(lastModGmt.getTime() + (lastModGmt.getTimezoneOffset() * 60000));
return fetchCallback(file + '?' + lastModUtc.toLocaleString());
});
} catch (er) {
return er.message;
}
}
function fetchCallback(path) {
let link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = path;
document.getElementsByTagName("head")[0].appendChild(link);
}
getFetchVersion('/resources/css/common.css');
</script>fetch() 함수는 기본적으로 get 방식으로 http통신을 하기 때문에 자바의 람다식과 비슷한 화살표 함수를 통해 request의 header에 존재하는 Last-Modifed 항목을 가져와 GMT를 UTC로 변경 후 추가해준다.
또한 fetch()는 비동기로 이루어지기 때문에 callback 함수를 선언해 html <head>에 link 태그를 추가시켜 주는 것으로 만들었다.
참조.
https://chanhuiseok.github.io/posts/js-6/
JavaScript - 자바스크립트 fetch와 async/await
컴퓨터/IT/알고리즘 정리 블로그
chanhuiseok.github.io
https://yongdev91.tistory.com/1
[Front] js/css 파일 캐시 방지 처리
웹사이트를 운영하다보면 jsp단에서 css또는 js파일을 수정하는 일이 종종 있는데, 파일을 수정 후 새로 배포를 해도 브라우저에서 js/css파일을 캐시로 저장하기 때문에 수정한 파일이 아닌 브라
yongdev91.tistory.com
'Front-end' 카테고리의 다른 글
| [Javascript] 함수 내에 return, break, continue (0) | 2022.02.07 |
|---|---|
| [Javascript / jQuery] Set 객체를 활용한 동일 Class 값 중복 체크 (0) | 2022.01.13 |
| [Web] 캐싱된 유저 CSS 파일 강제 재로딩(캐시방지처리) -1 (0) | 2022.01.07 |
| [Javascript] Input 필드에 공백 제거하기 (0) | 2021.10.01 |
| [Javascript] Naver 로그인 버튼 커스텀하기 (7) | 2021.06.01 |