ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • (번역) Create React App vs Vite
    Developer 2024. 11. 21. 11:16
    728x90

    핵심 요약

    - 설치 및 빌드 속도: 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

    728x90
Designed by Tistory.