Create React App에서 Vite로 마이그레이션: 개발자 가이드

Create React App에서 Vite로 마이그레이션: 개발자 가이드

안녕하세요, 동료 개발자 여러분! ?

최근에 저는 프로덕션 React 애플리케이션을 CRA(Create React App)에서 Vite로 마이그레이션하는 도전에 나섰습니다. 결과는? 빌드 시간이 3분에서 단 20초로 단축되었습니다! ?

이 가이드에서는 디버깅 시간을 절약할 수 있는 JavaScript 파일에서 JSX를 처리하는 방법에 대한 중요한 팁을 포함하여 전체 마이그레이션 프로세스를 안내합니다.

? Vite로 전환하는 이유는 무엇입니까?

기술적인 세부정보를 자세히 알아보기 전에 이 전환을 원하는 이유를 살펴보겠습니다. 우리 팀은 몇 가지 인상적인 개선을 보였습니다.

Metric	Before (CRA)	After (Vite)
Dev Server Startup	30s	2s
Hot Module Replacement	2-3s
Production Build	3 min	20s
Bundle Size	100%	85%

또한 다음과 같은 멋진 기능도 제공됩니다.

• ⚡️ 빛처럼 빠른 HMR
• ? 개발 중 번들링 없음
• ? 더욱 간편해진 구성
• ? 더 나은 오류 메시지
• ? 기본 TypeScript 지원

? 마이그레이션 단계

1. 프로젝트 준비

먼저 새 브랜치를 만듭니다.

git checkout -b feature/migrate-to-vite

2. 종속성 업데이트

CRA 제거 및 Vite 추가:

# Remove CRA dependencies
npm uninstall react-scripts @craco/craco

# Install Vite and related dependencies
npm install -D vite @vitejs/plugin-react

3. VITE 구성

프로젝트 루트에 vite.config.js를 생성하세요.

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

export default defineConfig({
  plugins: [
    react({
      // ? Key configuration for .js files with JSX
      include: "**/*.{jsx,js}",
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'build',
    sourcemap: true,
  },
});

중요: include: "**/*.{jsx,js}" 구성이 중요합니다! 이것이 없으면 Vite는 .jsx 파일의 JSX만 처리합니다.

4. 환경변수

Vite는 환경 변수를 다르게 처리합니다.

1. .env 파일 유지
2. 변수 이름을 REACT_APP_에서 VITE_로 바꿉니다.
3. 참조 업데이트:

// Before (CRA)
process.env.REACT_APP_API_URL

// After (Vite)
import.meta.env.VITE_API_URL

5. 패키지 스크립트 업데이트

package.json의 스크립트 교체:

{
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest",
    "lint": "eslint src --ext .js,.jsx"
  }
}

6. index.html 이동

1. public/index.html을 루트로 이동
2. 업데이트:

  
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your App Name</title>
  
  
    <div>



<h2>
  
  
  ? Common Challenges and Solutions
</h2>

<h3>
  
  
  1. JSX in .js Files
</h3>

<p>This is usually the first hurdle. You have two options:</p>

<h4>
  
  
  Option 1: Configure Vite (Recommended)
</h4>

<p>Add the include option as shown in the config above.</p>

<h4>
  
  
  Option 2: Rename Files
</h4>



<pre class="brush:php;toolbar:false"># Unix/Linux command to rename files
find src -name "*.js" -exec sh -c 'mv "" "${1%.js}.jsx"' _ {} \;

2. 절대수입

vite.config.js 업데이트:

resolve: {
  alias: {
    '@components': '/src/components',
    '@assets': '/src/assets',
    '@utils': '/src/utils'
  }
}

3. SVG 지원

vite-plugin-svgr 설치 및 구성:

npm install -D vite-plugin-svgr

import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [react(), svgr()],
  // ...
});

✅ 마이그레이션 체크리스트

실행 전:

• [ ] 개발서버 시작
• [ ] 핫 모듈 교체 작업
• [ ] 환경 변수에 접근 가능
• [ ] 빌드 프로세스 성공
• [ ] 가져오기 경로가 올바르게 확인됩니다
• [ ] SVG 및 자산 로드
• [ ] CSS 모듈 작동

? 결론

CRA에서 Vite로 마이그레이션하는 것이 어려워 보일 수도 있지만 성능 향상으로 인해 그만한 가치가 있습니다. 기억하세요:

1. .js 파일에 대한 JSX 처리를 조기에 구성
2. 환경 변수 업데이트
3. 가져오기 경로 확인
4. 철저히 테스트

React 앱을 Vite로 마이그레이션하셨나요? 어떤 어려움에 직면했습니까? 댓글로 여러분의 경험을 공유해주세요!

---

이 정보가 도움이 되었나요? 더 많은 React 및 JavaScript 팁을 보려면 저를 팔로우하세요!

댓글과 질문에 적극적으로 답변해드리겠습니다. 마이그레이션 과정에 대한 설명이 필요하면 알려주세요!