웹사이트를 운영하다 보면 JavaScript 파일을 수정했는데도 클라이언트(브라우저)가 캐시된 이전 버전을 계속 사용하는 문제가 발생합니다. 브라우저는 성능 향상을 위해 정적 리소스를 캐싱하기 때문인데, 이럴 때 클라이언트가 최신 버전의 JS 파일을 불러오도록 강제하는 방법이 필요합니다.
방법 1. 스크립트 src 속성에 버전 쿼리 문자열 추가
가장 간단하고 널리 사용되는 방법은 <script> 태그의 src 속성 링크에 버전 정보를 추가하는 것입니다. URL에 쿼리 문자열이 변경되면 브라우저는 이를 다른 리소스로 인식하여 캐시된 파일 대신 새로운 파일을 요청합니다.
스크립트의 src 링크 뒤에 다음과 같이 버전 번호를 붙여줍니다.
?<version>
예를 들어, 실제로 작성된 JavaScript <script> 태그는 아래와 같습니다.
<script src="myfile.js?1500"></script>
?1500처럼 숫자를 직접 입력해도 되고, 파일을 업데이트할 때마다 이 숫자를 변경해주면 됩니다. 실무에서는 빌드 타임스탬프나 Git 커밋 해시를 자동으로 삽입하는 방식도 많이 활용됩니다.
방법 2. .htaccess 파일을 활용한 자동 캐시 무효화
Apache 웹 서버를 사용한다면 .htaccess 파일을 수정하여 모든 이미지 및 CSS·JS 파일 요청에 자동으로 버전 파라미터를 추가하고 301 리다이렉트하는 방식으로 캐시를 무효화할 수 있습니다.
아래 코드를 .htaccess 파일에 추가합니다.
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(bmp|png|gif|css|js)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v50|)v=50[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=50 [R=301,L]
이 설정의 동작 방식은 다음과 같습니다.
- RewriteEngine On: Apache의 URL 재작성 엔진을 활성화합니다.
- RewriteBase /: 재작성 규칙의 기준 경로를 사이트 루트로 지정합니다.
- RewriteCond: bmp, png, gif, css, js 확장자를 가진 요청만 대상으로 하며, 아직 v=50 파라미터가 없는 경우에만 적용됩니다.
- RewriteRule: 해당 요청에
?v=50쿼리 문자열을 붙여 301 영구 리다이렉트 처리합니다.
버전을 올리고 싶을 때는 코드 내의 v=50 값을 원하는 숫자로 변경하기만 하면, 클라이언트들이 자동으로 새 버전의 파일을 받아가게 됩니다.
정리
JavaScript 파일의 캐시 문제를 해결하려면 개별 스크립트 태그에 버전 쿼리 문자열을 추가하는 간단한 방법을 우선 고려하고, 여러 정적 리소스를 일괄 관리해야 하는 경우에는 .htaccess의 RewriteRule을 활용하는 것이 효율적입니다. 두 방법 모두 파일명은 그대로 유지하면서 브라우저 캐시만 무효화할 수 있다는 장점이 있습니다.