CRA 지원 종료. Vite로 마이그레이션 하기

https://react.dev/blog/2025/02/14/sunsetting-create-react-app

Sunsetting Create React App – React

CRA는 이미 오래전부터 비공식적으로 지원 종료되었다는 소문이 나있었다. 그러다가 드디어 2025년 2월 공식적으로 지원 종료한다는 글이 올라왔다. CRA의 마지막 릴리즈는 무려 3년 전이다. 3년 동안 단 한 번도 릴리즈 업데이트를 하지 않았는데, 그럼에도 불구하고 우리 팀에서 2024년 여름에 CRA로 개발을 시작했더랬다... 열심히 검색해봤더니 다들 CRA로 시작하래서 시작한 거라는데... 그땐 이미 Next.js로 시작하는 게 거의 기본으로 자리 잡히고 Vite가 핫 했을 때다. 대체 검색을 어떻게 하면 이런 결과가 나올 수 있지 싶다...  아무튼 시간이 있을 때 CRA에서 빨리 갈아타야 했다.

 

왜 마이그레이션 해야 하는가?

---

CRA 지원 종료 이유는 아래와 같다

(번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변

(번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변

1. 상대적으로 느린 개발 환경 (CRA 내부적으로 Webpack을 사용한다)
2. 유지보수 부족 (더 이상 React 팀에서 유지보수를 적극적으로 안 하려나보다)
3. 더 나은 대안의 등장
4. 기본 설정으로 포함되지 않는 고급 기능들의 부재
5. 낮은 대역폭에서 초기 렌더링 속도가 느림 (이래서 우리 프로젝트가…?)

그럼 우리는 왜 마이그레이션을 해야 하는가?

1. 장기적인 유지보수 불가능
2. React 19 출시 이후 CRA가 제대로 동작하지 않음 → 점차 라이브러리 지원도 줄어들 수 있음
3. ESM 관련 문제
   1. ESM이란? ⇒ JS 파일을 여러 개 나눠서 구조화하고 각 파일 간에 기능을 공유할 수 있는 표준 (import, export)
   2. CRA는 webpack 기반 commonJS를 주로 사용해 왔고, ESM에 대한 대응이 부분적이다
   3. 이 과정에서 일부 최신 라이브러리를 트랜스파일하거나 번들링 하지 못하고 빌드 에러가 발생한다
   4. 최신 패키지 사용 시 불편함이 증폭 ⇒ 그래서 최신 라이브러리를 사용할 때 런타임에서 import가 안돼서 수동으로 경로 써줘야 하는 불편함이 있었음
4. 개발자 경험(DX)은 꾸준히 저하될 것으로 판단
   1. 이미 불편함을 느끼고 있었음. 특히 라우팅 쪽.

 

현재 프로젝트의 구조

---

항목	설명
라우팅 방식	react-router-dom 사용중
API 연동 방식	axios 사용중
웹팩 커스텀 여부	craco 적용된 상태
렌더링	현재 CSR이며, CSR기반의 ag-grid를 페이지 전체에서 메인 라이브러리로 사용중

큰 규모의 프로젝트는 아니고 소~중규모의 프로젝트이기에 고려할 사항이 크게 많지는 않다.

React 팀에서도 가장 먼저 고려하라는 게 프레임워크이다. 즉, Next.js, Expo 등등… 이런 프레임워크로 갈아타라는 것인데, 사실 망설여진다. 우리는 CSR 기반의 ag-grid를 사용하고 있기에 Next.js(SSR 상태가 기본)를 사용했다가 어떤 사이드 이펙트를 만나게 될지 모르기 때문이다.

물론 ag-grid에 가이드 문서가 다~ 있다
Using AG Grid with Next.js to Build a React Table

Using AG Grid with Next.js to Build a React Table

그러나 지금 CSR 상태에 사용할 때도 ag-grid의 삐걱거림(?)이 좀 보이는데… SSR로 갈아탔다가 그리드 상태 수정, 삭제 등등의 기능이 들어갈 때 어디서 에러가 터지고 있을지 모르기에 우려스럽다. 현재 우리 서비스에서는 생각보다 ag-grid를 다양하게 지지고 볶아서 보여주고 있기 때문이다.

아무튼 프레임워크 다음으로는 빌드 도구로 마이그레이션 하라고 제시해 준다. 여기서 가장 눈에 띄고 제일 활발하게 업데이트가 되고 있는 게 Vite이다.

 

Vite vs Next.js

---

항목	Vite로 마이그레이션	Next.js로 마이그레이션
폴더구조 변경	기존 구조 유지 가능	전체 변경 필요
라우터 호환성	현재 react-router 그대로 사용 가능	교체 필요 (next/navigation 등)
ag-grid 호환성	CSR 기반이기에 큰 문제가 없을거라 예상	hydration 문제 가능성 있음

SSR은 현시점에서 크게 사용할 일이 없고, 검색엔진이 필요하지도 않고, 그럼 바꾼다고 했을 때 달라질 점만 비교했을 때 위 표와 같다.
이제 다국어 서비스 리뉴얼에 들어가야 하는 시점에서 이 부분에 큰 공수를 들이고 싶지 않고, 기존 개발 방식에서 크게 안 바뀌었으면 하는 바람이다.

고로 Vite로 마이그레이션 하는 게 훨씬 적은 공수이며, 현재 버전 5까지 나왔고, 가장 핫한 빌더이며, 다른 빌더에 비해 자료가 많으니 Vite로 땅땅하겠다.

 

Vite 마이그레이션 가이드

---

Migrate to Vite from Create React App (CRA)

Migrate to Vite from Create React App (CRA)

1. 프로젝트 백업 (혹시 모르니까)
2. npm install vite @vitejs/plugin-react --save-dev
3. 참고로 chatGPT는 이걸 권장하지 않음 ⇒ 덮어씌우는 방식이라 아예 새롭게 프로젝트를 생성해서 파일을 옮기는 걸 권장하더라
4. npm uninstall react-scripts 패키지 삭제
5. package.json 수정

// 전
"scripts": {
  "dev": "cross-env NODE_ENV=development HTTPS=true BROWSER=none craco start",
  "build": "cross-env NODE_ENV=production craco build",
  "build:dev": "dotenv -e .env.development craco build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

// 후
"scripts": {
  "dev": "HTTPS=true vite",
  "build": "vite build",
  "build:dev": "vite build --mode development"
},

6. vite 설정 파일 생성 touch vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

7. index.html 파일 root로 이동 mv public/index.html .
8. index.html 파일에 body 하단에 script 추가

<script type="module" src="/src/index.jsx"></script>

9. 참고로 env를 쓰고 있다면 바꿔줘야 한다
    - process.env.REACT_APP_API_URL와 같은 형태로 써져 있던걸 ⇒ import.meta.env.VITE_API_URL 이렇게 변경해줘야 함
    - 그러면 type 에러가 뜰 건데 tsconsig.json 수정 필요

{
  "compilerOptions": {
	  /* ... */
    "types": ["vite/client"]
  },
}

10. (참고) vite에서는 알아서 env 폴더명으로 분기를 타주기에 스크립트 명령어에 명시적으로 표시할 필요는 없음
11. (참고) 우리처럼 craco 같은 라이브러리를 쓰고 있다면 해당 설정 파일 삭제
12. (참고) tailwind css를 쓰고 있다면 적용이 안되어있는 상태를 마주칠 거다
    - 아래와 같이 root에 postcss.config.js 파일을 생성해서 작성해 준다

module.exports = {
  plugins: {
    tailwindcss: {},
  },
};

    - index.html에도 링크 추가

  <head>
		/* ... */
    <link rel="stylesheet" href="/src/styles/index.css" />
  </head>

    - tailwind.config.js content 수정

/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
		/* ... */
  },
  plugins: [],
}

 

마이그레이션 효과

---

[빌드 시간 단축]

AS-IS

큰 규모의 프로젝트가 아니라서 빌드가 오래 걸리진 않지만 github actions 가상머신에서 실행될 땐 평균 2분 30초 정도 걸리다가

TO-BE

vite로 갈아타니 1분대로 확 줄었다. 역시 빠르다..

[최초 렌더링 속도 향상]

이건 아쉽게도 내가 기록해 둔 게 없어서 평소에 얼마나 걸렸는지는 모르겠다. (이전에도 빠르긴 빨랐음) 근데 눈에 확 띌 정도로 더 빨라졌다. 이전에는 1초 걸렸더라면 지금은 1초도 안 걸리는 느낌? 진짜 눈 깜빡 정도…?

[핫 리로드]

이 부분도 확실히 빨라졌다 이전에는 조금 버벅거림도 있고, 리로드 된 건지 안된 건지… 바로 반영이 안 될 때가 있기도 했고 화면 자체가 날아가거나 상태가 남아있어서 수동 새로고침을 자주 했었는데 지금은 즉각 반응이라 확실히 편하다

 

---

아무튼 입사 때부터 꼭 진행해야지 했던 건데 프로덕트 자체가 문제다 보니 바로 실행하지 못하닥 드디어 안정화 단계에 들어와서 마이그레이션 했는데 생각보다 엄청 간단했다. 분명 규모가 큰 프로젝트면 힘들었을 수도 있겠지... 그래도 방법 자체는 매우 간단하다. 내가 CRA를 시작했던 게 4년 전인데 정말 너무 빨리 변화하는 것 같다. 이러다가 또 Vite도 시들시들해지면 다른 걸로 마이그레이션 해야겠지... 이러니 왜 고인물 어르신들이 순정이 좋다며(?) 한땀한땀 장인처럼 짜고 있는지 알 것 같기도 한데 그러면 생산성이 너무 안 나오니까^^ 아무튼 개운하다~