CRA(Create React APP)에서 캐시 안되는 문제 해결하기

 

React App을 배포할때 소스 JS파일이 캐싱이 되면서 갱신이 되지 않는 문제가 발생했습니다. 

이는 CRA는 빌드시에 항상 같은 이름으로 파일이름을 생성하게 되서 발생하는 문제입니다.

 

따라서 WebPack같은 번들러로 배포를 하게되면 해당 JS파일뒤에 타임스탬프를 붙이는 방법으로 강제로 갱신이 되는거죠. 

 

이때 사용할 수 있는게 react-app-rewired입니다.

이걸 설치하고 config-overrides.js 파일 내부에 다음처럼 함수를 정의해줄 수 있습니다.

 

module.exports = {
  webpack: function (config, env) {
    config.output.filename = 'static/js/[name].[hash:8].js';
    config.output.chunkFilename = 'static/js/[name].[hash:8].chunk.js';
    return config;
  },
};

이를 통해 각 빌드마다(코드 변경이 일어난) 다른 정적 파일 해쉬를 만들어 주어 문제를 해결했습니다.

 

끝