(번역) Create React App vs Vite

핵심 요약

- 설치 및 빌드 속도: Vite는 CRA보다 빠른 설치와 빌드 속도를 제공합니다.

- 경량성: Vite는 더 가벼운 번들 크기를 제공하여 성능 향상에 기여합니다.

- 유연한 설정: Vite는 설정 파일을 통해 다양한 옵션을 쉽게 조정할 수 있습니다.

- 절대 경로 지원: vite.config.js에서 별칭을 설정하여 절대 경로 임포트를 지원할 수 있습니다.

Vite는 빠른 개발 환경과 유연한 설정을 원하는 개발자들에게 CRA의 대안으로 고려해볼 만한 도구입니다.

 

---

 

 

React.js 프로젝트를 시작할 때, 많은 개발자들은 create-react-app(CRA)을 사용하여 기본 템플릿을 생성하고 로컬 개발 서버를 설정합니다.

그러나 최근에는 Vite라는 도구가 주목받고 있습니다. Vite는 빠른 설치와 빌드 속도를 제공하며, CRA와 유사한 기능을 갖추고 있습니다.

 

Vite로 React 앱 생성하기

Vite는 원래 Vue.js를 위해 개발되었지만, 현재는 React를 포함한 다양한 프레임워크를 지원합니다. 다음은 Vite를 사용하여 React 앱을 생성하는 방법입니다:

 

    1. 프로젝트 생성:

npm init vite@latest my-react-app -- --template react

 

위 명령어는 my-react-app이라는 이름의 새로운 React 프로젝트를 생성합니다.

 

    2. 디렉토리 이동 및 종속성 설치:

cd my-react-app
npm install

 

    3. 개발 서버 실행:

npm run dev

 

브라우저에서 http://localhost:3000을 열면 React 로고와 카운터 버튼이 있는 기본 페이지를 확인할 수 있습니다.

 

디렉토리 구조

Vite로 생성된 프로젝트의 주요 파일 구조는 다음과 같습니다:

my-react-app/
├── index.html
├── package.json
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── ...
└── vite.config.js

 

• main.jsx: 애플리케이션의 진입점으로, App.jsx를 불러옵니다.
• vite.config.js: Vite의 설정 파일로, 빌드 프로세스와 관련된 옵션을 정의합니다.

 

절대 경로 설정

기본적으로 Vite는 절대 경로 임포트를 지원하지 않습니다. 이를 해결하려면 vite.config.js 파일을 수정하여 경로 별칭을 설정해야 합니다:

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

export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

 

이렇게 설정하면 @를 사용하여 src 디렉토리를 참조할 수 있습니다:

import Component from '@/components/Component';

 

 

출처: https://dev.to/keefdrive/create-react-app-vs-vite-2amn