`create-react-app` 지원 종료

프로그래밍 언어
1

React 팀은 Create React App (CRA) 을 공식적으로 지원 종료(Sunset)한다고 발표함.

:small_blue_diamond: 주요 이유

  • CRA는 빠른 개발 환경을 제공했지만, 번들 크기 문제 및 낮은 유지보수성으로 인해 최신 트렌드를 따라가기 어려움.
  • 최신 React 프로젝트들은 Vite, Next.js, Remix 같은 더 빠르고 최적화된 빌드 도구를 선호하는 추세.

:small_blue_diamond: 대체 방법

  1. Vite – 가벼운 개발 환경 & 빠른 HMR(핫 모듈 리플레이스먼트).
  2. Next.js / Remix – 서버 렌더링 및 풀스택 기능을 갖춘 대체 옵션.
  3. Parcel / ESBuild – 빠른 번들링이 필요한 프로젝트에 적합.

:small_blue_diamond: 기존 CRA 프로젝트는?

  • 기존 프로젝트는 계속 실행 가능하지만, React 공식 팀에서는 더 이상 업데이트하지 않음.
  • 가능한 한 Vite 등으로 마이그레이션하는 것이 권장됨.

CRA의 시대는 끝났지만, 더 나은 도구들이 많으니 앞으로의 React 개발이 더욱 효율적일 듯! :rocket:

1개의 좋아요
2

:fire: Vite의 주요 장점

:one: 빠른 개발 서버 구동 (Cold Start 개선)

  • 기존 번들러(Webpack, Rollup, Parcel 등)는 모든 파일을 크롤링 & 번들링 후 서버를 실행했기 때문에 초기 구동 시간이 길었음.
  • Vite는 ES Modules(ESM) 기반으로 필요한 파일만 로드해서 서버 시작이 빠름.
  • esbuild(Go로 작성됨)로 디펜던시를 사전 번들링하여 Webpack보다 10~100배 빠름.

:two: 빠른 코드 변경 반영 (HMR 성능 향상)

  • 기존 번들러는 코드 변경 시 전체 프로젝트를 다시 번들링해야 했음.
  • Vite는 변경된 모듈만 브라우저에 다시 전달하므로 앱 규모가 커져도 HMR(Hot Module Replacement) 속도가 저하되지 않음.

:three: 네이티브 ESM 기반의 최적화된 로드 방식

  • 번들러 없이도 브라우저가 직접 ESM을 처리하여 성능을 향상.
  • 브라우저가 동적 import를 요청하는 순간 필요한 코드만 변환 후 제공.
  • 개발 시 불필요한 파일을 미리 번들링할 필요 없이 필요한 파일만 로드하여 속도가 빠름.

:four: HTTP 캐싱 활용 (성능 최적화)

  • Cache-Control: max-age=31536000, immutable을 적용하여 디펜던시를 브라우저 캐시에 저장.
  • 소스 코드 변경 시 304 Not Modified 헤더를 활용하여 불필요한 요청을 최소화.
  • 덕분에 페이지 로딩 속도가 빨라짐.

:five: 배포 최적화 (Rollup 기반 번들링)

  • 개발 환경에서는 ESM을 활용하지만, 프로덕션에서는 Rollup을 사용하여 최적의 번들링 수행.
  • 트리 셰이킹, 청크 분할, 지연 로딩 등을 활용하여 최적의 빌드 성능 제공.
  • 향후 Rust 기반 Rolldown 도입으로 더 빠른 빌드 속도 기대 가능.

패키지 매니저별 설치 방법

1. npm

# Vite 패키지 설치방법
npm install vite

# Vite 프로젝트 생성
npm create vite@latest my-project

# 프로젝트 디렉터리 이동
cd my-project

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

2. yarn

# Vite 패키지 설치방법
yarn add vite

# Vite 프로젝트 생성
yarn create vite my-project

# 프로젝트 디렉터리 이동
cd my-project

# 패키지 설치
yarn install

# 개발 서버 실행
yarn dev

3. pnpm

# Vite 패키지 설치방법
pnpm add vite

# Vite 프로젝트 생성
pnpm create vite my-project

# 프로젝트 디렉터리 이동
cd my-project

# 패키지 설치
pnpm install

# 개발 서버 실행
pnpm dev

4. bun

# Vite 패키지 설치방법
bun add vite

# Vite 프로젝트 생성
bun create vite my-project

# 프로젝트 디렉터리 이동
cd my-project

# 패키지 설치
bun install

# 개발 서버 실행
bun run dev