웹 페이지를 개발하다 보면 브라우저가 이전 버전의 파일을 캐시에 저장해 두어 최신 내용이 반영되지 않는 문제를 겪게 됩니다. 이럴 때 HTML 메타 태그를 활용하면 브라우저에게 페이지를 캐시하지 않도록 지시할 수 있습니다.
1. 메타 태그로 캐시 방지하기
다음과 같은 세 가지 메타 태그를 <head> 영역에 추가하면 브라우저가 해당 페이지를 캐시하지 않도록 설정할 수 있습니다.
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "expires" content = "0">
<meta http-equiv = "pragma" content = "no-cache">
- cache-control: 브라우저와 중간 서버(프록시)에게 캐시 동작을 지시합니다. 'no-cache'는 저장은 하되 재사용 전에 항상 서버에 확인하라는 의미입니다.
- expires: 콘텐츠의 만료 시점을 지정합니다. '0'으로 설정하면 즉시 만료되어 항상 최신 데이터를 요청하게 됩니다.
- pragma: 주로 HTTP/1.0 호환성을 위한 것으로, 구형 브라우저에서도 캐시를 사용하지 않도록 합니다.
2. 파일명에 버전 파라미터 추가하기
메타 태그만으로는 완벽하게 캐시를 제어하기 어려울 수 있습니다. 이 경우 스크립트나 CSS 파일의 경로 끝에 버전 문자열을 붙이는 방법을 함께 사용해 보세요.
<script src = "newfile.js?version = 1.0.0"></script>
브라우저는 URL이 다르면 다른 리소스로 인식하기 때문에, 파일이 변경될 때마다 버전 번호만 올려주면 됩니다.
<script src = "newfile.js?version = 1.0.1"></script>
정리
캐시 문제를 해결하는 가장 효과적인 방법은 메타 태그 설정과 버전 파라미터(캐시 버스팅) 기법을 함께 사용하는 것입니다. 특히 자바스크립트나 CSS 파일처럼 자주 변경되는 정적 리소스에는 버전 관리 방식이 실무에서 널리 활용되고 있습니다.