웹 프로그램 개발시 당연히 수많은 css, js 파일을 로드하게 된다.
이 파일들은 유지보수를 하면서 계속 수정되는데 문제는 브라우저에서 한번 불러온 css, js 파일을 캐시 해두는 탓에 사용자들에게 바로 적용이 되지 않는다.
특히 제품의 동일한 파일명의 js를 수정하였더라도 캐시된 수정전 버전이 적용되는 경우 브라우저 캐시를 날려도 적용이 안되는 경우가 있다.
따라서 캐싱되지 않도록 방법을 찾아야한다.
1. 캐시 사용금지
웹페이지의 헤더에 내용을 추가해서 캐시를 사용하지 않도록 설정할 수 있다.
html 문서의 <head>와 </head> 사이에 다음 내용을 추가한다.
<meta http-equiv="Pragma" content="no-cache"> <!-- ← HTTP 1.0에서 사용하던 방법 -->
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0"/>위의 방법은 모든 캐시를 사용하지 않기 때문에 페이지를 로드할 때마다 새로 파일을 불러오기 때문에 사용자에게 바로 적용이 된다는 장점은 있지만, 반대로 파일의 변경이 없을 때에도 무조건 계속 새로 불러오기 때문에 속도에서도 손해를 볼 뿐만 아니라 트래픽을 쓸데없이 낭비하게 된다는 단점이 있다.
2. 파일 로드 방법의 변경
이 방법은 파일이 변경될 때마다 파일 이름을 바꾸어서 브라우저가 새로 파일을 불러오게 하는 방식이다.
이렇게 하면 파일이 변경되었을 때에만 다시 불러오게 되므로 훨씬 효율적이다.
다만 실제로 파일의 이름을 바꾸는 것은 아니고, 파일의 url 뒤에 사용하지 않는 파라미터를 덧붙여 브라우저가 다른 파일명으로 인식하게 하는 것이다.
가장 깔끔하고 효율적인 방법이다.
<!--이전 적용 파일-->
<script src="license.js"></script>
<!--캐싱되지 않도록 버전관리하는 파일-->
<script src="license.js?ver=20221213"></script>뒤에 쿼리스트링으로 버전 정보 등을 붙여 스크립트 주소를 바꾸게 되면 매번 바뀐 URL 주소로 파일을 찾으므로 캐싱이 되지 않는다.
서버 캐시는 웹서버나 WAS 등을 껐다 켜야 하는 번거로움이 있지만 SHUTDOWN 후에는 캐시가 잘 날라간다.
브라우저 캐시는 F12로 개발자도구를 띄워놓은 뒤 새로고침 버튼 위에서 우클릭 > 강력 새로고침 방법으로 캐시를 비우기 해주는 편이 가장 좋다.
'[ 오류 해결 ]' 카테고리의 다른 글
| 이클립스 Quick Search 설정(Ctrl + Shift + L) (2) | 2024.03.19 |
|---|---|
| [React] You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1). (3) | 2022.12.19 |
| placeholder 에서 줄바꿈하기 (2) | 2022.11.01 |
| [JAVA] if 조건문에서 ==가 안될 때, 문자열 비교 시 ==와 equals()의 차이점 (2) | 2022.10.05 |
| The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path (2) | 2022.10.04 |
댓글