반응형
배포 이후에 기존 페이지의 파일이 그대로 캐시에 남아 있어서 배포된 파일이 적용이 되지 않는 경우가 있습니다.
캐시로 인해서 업데이트 이전 파일이 그대로 있어서 입니다.
캐시와 캐시 버스팅이 무엇인지 알아보고, 위와 같은 문제를 해결하기 위해서는 어떻게 해야 하는지 알아보겠습니다.
캐시란?
데이터 값을 임시로 복사해놓은 장소를 말합니다.
웹 캐시는 웹 페이지를 띄우기 위해서 js, css 파일과 같은 파일을 로드합니다.
해당 파일들을 다음에 페이지를 띄울 때, 새로 요청하지 않고 기존에 저장해 놓은 파일을 가져옵니다.
웹 캐시를 이용해서 화면을 여는 경우에 다시 파일을 받아오지 않아서 빠르게 화면을 열 수 있는 장점이 있습니다.
캐시 버스팅이란?
캐시 버스팅은 이러한 캐시에 저장된 파일을 가져오는 것이 아니라 새로 업데이트된 파일을 가져오는 것을 말합니다.
저장된 캐시 파일을 무효화하는 것입니다.
무효화 하는 방법은 3가지 있습니다.
- 파일 이름 버전 관리(예: app.v2.js)
- 파일 경로 버전 관리(예: /v2/app.js)
쿼리 문자열(예: app.js?ver=2)
위와 같이 파일 경로나 이름을 변경하거나 기존 파일은 무시하게 되고 새롭게 업데이트된 파일을 가져오게 됩니다.
쿼리 문자열의 경우에 프록시 서버나 CDN 서버에서 파일을 캐시 할 수 없는 문제가 있어서 사용하지 않는 것을 권장합니다.
캐시 버스팅 사용 예시
- app.js 파일을 배포하였습니다. 하지만 문제 사항을 발견하여 다시 배포를 진행하여야 합니다.
- app.js 파일을 다시 배포하게 되면, 브라우저는 해당 파일의 차이를 몰라서 기존의 캐시에 저장된 파일을 불러옵니다.
- 하지만. app.v2.js로 파일 이름으로 변경해서 배포하게 되면 브라우저는 차이를 감지하고 새로 변경된 파일을 다운로드합니다.
리액트 캐시버스팅 해결방법
리액트의 경우 webpack.config.js 파일의 설정을 수정해야 합니다.
아래와 같이 수정하여 배포된 파일의 이름을 변경해서 배포가 진행되어야 합니다.
output: {
path: path.join(__dirname, '/src/'),
filename: '[name].[chunkhash:8].js',
},728x90
반응형