-
(번역) Create React App vs ViteDeveloper 2024. 11. 21. 11:16728x90
핵심 요약
- 설치 및 빌드 속도: 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';
728x90'Developer' 카테고리의 다른 글
‘Docker’은(는) 사용자의 컴퓨터를 손상시킵니다. 해당 항목을 휴지통으로 이동해야 합니다. (0) 2025.01.23 (번역) append()와 appendChild()의 차이점 (0) 2024.11.22 (번역) Redux vs Context API: 언제 사용해야 할까 (0) 2024.11.21 (번역) JavaScript에서 then()과 async/await의 사용 비교 (2) 2024.11.20 Mac M2 도커 설치 (2) 2024.08.30