🍹 [5분 내로] 강의실/✏️ 웹 개발자 5분 면접
웹 캐시 방지하기 (html, js, css 캐싱 방지)
728x90
🤔 Question
👉 실무를 하다보면, 사용자의 웹 브라우저 캐시로 인해 HTML 파일이 갱신되지 않는 문제에 직면할 때가 있습니다. 이것을 해결하는 방법을 공유합니다.
🎯 HTML 페이지 자체에 캐시 방지 적용
👉 HTML에 캐시 방지를 적용하려는 경우, meta 태그를 이용하시면 됩니다. 어차피 meta 태그말고 딱히 쓸 수 있는 것도 없어용. 참고로 아래의 meta 태그는 구글이나 네이버 등 메이저급 사이트도 사용하는 옵션입니다.
✅ HTML 문서의 <head>에 추가
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">no-store : 아무아무 것도 저장하지 말라
no-cache : 캐시 사용하기 전에, 항상 서버에 검증을 받고 써라
must-revalidate : 캐시 만료 후 최초 조회 시, 서버 검증 받고 와라
※ 3개의 옵션을 다 쓰는 이유 : 모호해서 + 버그 때문에
🎯 파일 이름에 버전 정보 추가하기 (Cache Busting)
👉 HTML, CSS, JS 등의 정적 파일 요청 시 파일명에 버전이나 타임스탬프를 추가하면 브라우저가 새로운 파일로 인식합니다. 이 방법은 업계의 정설입니다.
<link rel="stylesheet" href="styles.css?v=2.0">
<script src="app.js?v=20240203"></script>위와 같이 ?v=버전번호를 붙이면 파일이 변경될 때마다 다른 URL로 요청되어 캐시 문제가 해결됩니다.
🎯 HTTP 응답 헤더 설정 (Cache-Control, ETag)
👉 웹 서버에서 Cache-Control, ETag 등의 응답 헤더를 적절히 설정하면 브라우저 캐싱을 제어할 수 있습니다. 아파치나 엔진엑스를 사용한다고 가정하겠습니다.
✅ Apache (.htaccess 설정)
<FilesMatch "\.(html|css|js)$">
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</FilesMatch>
✅ Nginx 설정 (nginx.conf)
location / {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires 0;
}이렇게 설정하면 브라우저가 항상 최신 파일을 요청하도록 강제할 수 있습니다.
🎯 CDN을 사용한다면 캐시 무효화 적용
👉 CDN을 사용 중이라면, 캐시 무효화를 위한 기능을 활용해야 합니다.
✅ 예제 (Cloudflare)
Cloudflare의 개발자 모드(Development Mode) 를 활성화하면 캐시 없이 파일이 로드됩니다.
특정 파일만 캐시를 초기화하려면 Purge Cache 기능을 사용하세요.
☔ 정리
👉 개발 중에는 Cache-Control 설정 + 버전 정보 추가 (?v=timestamp) 를 함께 사용하세요.
배포 시에는 CDN 캐시 무효화 또는 파일명 변경 방식을 활용하세요. 필요하면 JavaScript로 window.location.reload(true); 를 실행해 강제 리프레시할 수도 있습니다. 이 방법들을 조합하면 캐시 문제 없이 최신 HTML이 사용자에게 반영될 수 있습니다! 🚀
If I was of any help to you, please buy me coffee 😿😢😥
If you have any questions, please leave them in the comments
🧭 References
[1] reference : https://doctorson0309.tistory.com/
[2] Ads : https://play.google.com/store/apps/details?id=io.cordova.seoulfilter
반응형
'🍹 [5분 내로] 강의실 > ✏️ 웹 개발자 5분 면접' 카테고리의 다른 글
| 대학생들은 목적없이 넥사크로를 공부하면 안되는 이유 (0) | 2025.03.08 |
|---|---|
| [DBeaver] database navigator와 browser의 차이점? (0) | 2025.02.06 |
| [DBMS] int(4)와 int(12)의 차이 점은? (0) | 2025.01.22 |
| [DBMS] char 칼럼 사이즈를 크게 잡으면 안되는 이유? (0) | 2025.01.22 |
| [DBMS] varchar 칼럼 사이즈를 크게 잡으면 안되는 이유? (0) | 2025.01.22 |
소중한 공감 감사합니다