웹 페이지 캐시 문제 해결하기

웹 개발 및 배포 과정에서, 변경된 내용이 모든 사용자에게

즉시 반영되지 않는 문제는 흔히 발생합니다.

 

특히, 프론트엔드 작업 후 내 PC에서는 정상적으로 작동하나,

고객의 PC에서는 이전 버전이 보이는 상황이 발생할 수 있습니다.

그럴 때마다 고객에게 강력 새로고침(CTRL + SHIFT + R)을

요청하는 것은 사실상 불가능합니다.

 

이 문제의 원인은 바로 브라우저 캐시 때문입니다.

브라우저는 페이지 로딩 속도를 높이기 위해 캐시를 사용하여 자주 호출되는 데이터를 저장합니다.

 

하지만, 이는 새로운 업데이트가 반영되지 않는 문제를 야기할 수 있습니다.

 

해결책: 캐시 무효화(Cache Busting) 기법

캐시 문제를 해결하기 위한 가장 효과적인 방법 중 하나는

캐시 무효화(Cache Busting) 기법을 사용하는 것입니다.

 

이는 자바스크립트 파일이나 스타일시트와 같은 리소스 파일의 URL에

버전 정보를 추가하는 방식입니다.

 

이를 통해 브라우저가 항상 최신 파일을 가져오도록 유도할 수 있습니다.

반응형

방법:

리소스 파일의 URL에 쿼리 파라미터를 추가하여 버전을 명시합니다. 예를 들어:

• script.js?v=0.1.1
• style.css?cc=20250306

이렇게 하면 캐시된 이전 버전이 아닌,

최신 버전의 파일이 로드됩니다.

이는 변경 사항이 있을 때마다 쿼리 파라미터의 값을 변경하여 적용할 수 있습니다.

 

예시

import { downloadCSV, formatNumber } from "../function.js?v=0.2.0";

 

위 방법을 통해, 트래픽 과다 발생을 피하면서도

변경된 스크립트가 모든 사용자에게 적시에 반영되도록 할 수 있습니다.

웹 서비스의 안정성과 사용자 경험 개선을 위해 캐시 무효화 기법을 적극 활용하시기 바랍니다.