[React] CRA, CRACO, 캐시 무효화(Cache Busting)

CRACO를 이용하여 배포 시 캐싱 무효화

실무 작업 중 업데이트 이후 관리자 분들에게 캐시 삭제 후 새로 고침을 요청하는 일이 잦아져서 따로 개발할 필요가 있어 기록
HOTFIX시에는 오류를 낸 상황이여서 굉장히 말씀드리기가 껄그러운 상황이 있다. (캐시 새로고침 설명 드리고.. 이미지로 설명 드리고..)

CRACO로 빌드까지 성공한 것은 별도로 작성 예정

 

1. CRA(Create React App)란?

CRA(Create React App)는 리액트 애플리케이션을 빠르게 설정할 수 있도록 돕는 공식 도구다. 웹팩(Webpack), Babel, ESLint 등의 복잡한 설정 없이 바로 프로젝트를 시작할 수 있도록 해준다.

특징

• 빠른 프로젝트 초기화: 별도의 설정 없이 리액트 프로젝트를 생성할 수 있다.
• 내장된 웹팩 설정: 기본적으로 웹팩을 사용해 번들링과 최적화를 수행한다.
• Eject 없이 설정 변경 불가: react-scripts eject 명령어를 사용하지 않으면 내부 설정을 직접 수정할 수 없다.

 

2. CRACO(Create React App Configuration Override)란?

CRACO는 CRA의 설정을 Eject 없이 오버라이드(Override)할 수 있도록 도와주는 도구다.

장점

• CRA의 eject 없이 웹팩(Webpack), Babel 등의 설정을 변경 가능
• 설정 변경이 간편하여 유지보수성이 높음
• 플러그인 및 추가 기능을 쉽게 적용 가능

CRACO 설치 및 설정 방법

npm install @craco/craco --save-dev

설치 후 package.json을 수정해 기존 react-scripts를 craco로 변경

"scripts": {
  "start": "env-cmd -f .env craco start --env NODE_ENV=development",
  "start:local": "env-cmd -f .env.local craco start --env NODE_ENV=development",
  "build": "env-cmd -f .env craco build --env NODE_ENV=development",
  "build:prod": "env-cmd -f .env.production craco build --env NODE_ENV=production",
}

프로젝트 루트에 craco.config.js 파일을 생성하여 설정을 추가 (나는 환경 변수도 같이 사용하기 때문에 craco 부분만 참고)

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 예제: output 경로 변경
      webpackConfig.output.publicPath = "/";
      return webpackConfig;
    },
  },
};

 

 

3. 리액트 JS 배포 시 캐싱 무효화 방법

서론과 같이 리액트 애플리케이션을 배포할 때, 브라우저는 정적 파일(HTML, CSS, JS 등)을 캐싱하여 성능을 최적화한다. 하지만 새로 배포한 코드가 캐싱 때문에 적용되지 않는 문제가 발생할 수 있다.

(1) 빌드 파일에 해시(Hash) 값 추가

CRA는 기본적으로 번들 파일(JS, CSS)에 해시값을 추가하여 캐싱을 방지한다.
빌드(npm run build)를 실행하면 build/static/js/main.[해시].js처럼 파일명에 해시가 포함된다.
이 방식 덕분에 파일이 변경되면 브라우저가 새로운 파일로 인식하고 다시 다운로드한다.

하지만 index.js landingpage.js 등등 사용자가 만든 기본 js,tsx파일들은 이름을 그대로 사용해서 내용이 변경되더라도 빌드시 이름이 변경되지 않기 때문에 Webpack 설정 변경을 이용하여 캐싱 무효화를 해줘야 한다.

 webpack: {
    configure: (webpackConfig) => {
      // 캐시 버스팅을 위한 output 파일명 설정
      webpackConfig.output = {
        ...webpackConfig.output,
        filename: "static/js/[name].[contenthash:8].js",
        chunkFilename: "static/js/[name].[contenthash:8].chunk.js",
      };
      ...
}

빌드 파일에서 이미지와 같은 형식으로 나오면 성공

(2) HTML 파일 캐싱 방지

HTML 파일은 기본적으로 브라우저가 캐싱할 수 있으므로, 이를 방지하려면 public/index.html <meta> 태그를 추가하는 방법이 있다.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

이 태그를 추가하면 HTML 파일이 항상 새로고침될 때마다 서버에서 최신 버전을 가져오도록 설정된다.

• no-cache: 캐시를 사용하기 전에 서버에 검증을 요청
• no-store: 캐시를 아예 저장하지 않음
• must-revalidate: 캐시된 콘텐츠를 사용하기 전에 반드시 서버에 확인

 

 

 

참조

[React] 캐시 무효화(Cache Busting) 이해하고 적용하기

리액트 JS 배포시 캐싱 무효