[Web] Cache Busting으로 Cache 문제 해결하기

얼마전에 Cache 문제로 골머리를 썩었었다.

일반 Javascript 코드에서 해결법은 나오는데 React.js에서는 잘 안나오더라..지금은 해결했지만!

일단 뭐가 문제인지 짚어보자.

 

| 무엇이 문제인가

코드를 변경 후 배포하였는데 브라우저에서 적용되지 않는 문제.

개발 중 코드를 변경하고 페이지를 새로고침하였는데 바뀐 코드가 적용되지 않는 문제..등이다.

보통 이를 해결할때 F12로 개발자 모드 띄우고 강력 새로고침을 하는데..이걸 고객이나 개발자가 아닌 사용자에게 매번 안내할 수는 없는 노릇 아닌가ㅜㅜ 그래서 개발자답게 해결해보기로 했다.

 

| Cache로 인한 문제와 Cache Busting

Cache로 인해 발생할 수 있는 문제는 위에 기재한대로 새로운 변경사항이 브라우저에 반영 되지 않는 것이다.

이는 브라우저에서 파일의 변경 사항을 알아채지 못하고 이전 코드로 캐시된 결과를 화면에 띄워주기 때문이다.

따라서 파일의 새로운 변경 사항을 브라우저가 알아채고, 기존의 Cache를 없애고 새로운 코드를 반영하게 만드는 과정이 필요한데 이를 보통 Cache Busting이라 부르더라. F12로 강력새로고침 하는 법 말고, 코드로 해결할 수 있는 방법을 살펴보겠다.

 

1. 파일 이름에 version 혹은 time stamp 등을 붙여준다.

예를 들면, testFile.v1.js 처럼.

 

2. 파일 경로에 version 등을 붙여준다.

ex) /v2/testFile.js

 

3. 쿼리를 사용하여 index.html 태그의 파일 이름 뒤에 version, time stamp 등을 붙여준다.

<link rel="stylesheet" type="text/css" href="theme.css?version=20190416">

 

4. Cache에 expire 기한을 걸어둔다.

 

5. index.html에 다음과 같은 캐시 컨트롤 헤더를 넣어준다.

Cache-Control: no-cache, no-store, must-revalidate

그런데.. 이건 별로 좋은 방법이 아닌 것 같다. 웹 페이지의 모든 코드를 cache 하지 않으면, 페이지를 사용할 때마다 브라우저에서 연산을 해야하고 결국 페이지의 성능이 저하될 것이기 때문이다.

 

| 그런데.. Webpack에서는?

자, 그런데. 이를 React.js, Webpack을 사용한 프로젝트에서는 어떻게 적용해야할까?

Webpack을 사용한 프로젝트의 경우 빌드시 필요한 모듈 등을 하나로 묶는 번들 과정을 거친 후, 번들된 파일을 index.html에 알아서 연결해주고 있다. 그래서 3번의 쿼리를 이용해 태그된 파일 이름 뒤에 "직접" 버전을 타이핑해주는 방식은 힘들다.

 

그래서 찾아본 결과, Webpack의 설정을 바꿔주면 간단하게 끝이난다! 얏후!

 

webpack.config.js 파일을 열어서 다음을 수정해준다.

output: {
	path: path.join(__dirname, '/src/'),
	filename: '[name].[chunkhash:8].js',
    },

output의 filename에 hash를 붙여준다. 이 경우 파일이 변경될때마다 파일 이름 뒤에 붙은 hash 값이 변경되고, 브라우저에서 변경된 파일의 hash값을 캐치한 후 "파일이 변경되었군!" 하고 새로운 파일을 받아 화면에 보여줄 것이다.

생각보다 해결방법이 아주 간단하였다...ㅎㅎ

 

| Create-react-app으로 프로젝트를 생성한 경우(**update: 2020-08-15**)

yarn eject

위 명령어를 이용해 프로젝트를 설정 변경한 상태로 분리해준다.

config 폴더를 확인해보면 webpack.config.js 파일이 있을 것이다.

 

=> react-app-rewired를 사용하면 CRA 프로젝트를 eject하지 않고서도 설정을 변경 할 수 있다!

 

위 방법대로 했는데도 새로변경된 코드가 바로 적용이 안돼요!

하는 경우에는, F5를 눌러 페이지를 한번 새로고침 해보자.(강력 새로고침 말고 그냥 새로고침!)

페이지를 새로고침 했더니 변경된 내용이 적용된다면, (react의 경우) hot-loader를 적용해주자.