처음 리액트 공부를 시작했을 땐 CRA (Create React App) 으로 리액트 개발 환경을 구성했었다 ! 나름 사용하기도 편리하고 가장 먼저 접하게 된 방법이었기에 줄곳 CRA 로 리액트를 시작하였지만 처음 초기 셋팅 때 생각보다 시간이 좀 많이 걸리기도 하고 배포하는 과정에서 CRA 보다 다른 방법을 사용하는 것이 좋다는 말을 듣게 되어 다른 방법이 없을까 모색하던 중 Vite 로 리액트 환경을 구성할 수 있다는 것을 알게 되었다 !! 그래서 오늘은 Vite로 리액트 환경을 구성하는 방법에 대해 적어보고자한다.
Vite 란 ?
Vue.js 및 React 프로젝트를 위한 빠르고 간단한 빌드 도구.
Vite는 모던 브라우저에서 웹 애플리케이션을 더 빠르게 실행하기 위해 개발됨.
Vite의 특징
빠른 개발 서버: Vite는 기본적으로 빠른 개발 서버를 제공하여 개발자가 프로젝트를 실시간으로 수정하고 테스트할 수 있음.
ES 모듈 기반 번들링: Vite는 ES 모듈 기반의 빌드 시스템을 사용하여 빌드 속도를 향상시킵니다. 이는 빌드 시간이 매우 빠르고 증분 빌드(incremental build)가 가능하다는 것을 의미함.
별도의 번들링 필요 없음: Vite는 개발 중에는 ES 모듈을 직접 실행하므로 번들링이 필요하지 않음. 이는 더 작고 더 빠른 개발 경험을 제공함.
플러그인 생태계: Vite는 다양한 플러그인을 통해 확장이 가능하며, 사용자 지정 빌드 도구 및 기타 기능을 쉽게 통합할 수 있음.
HMR(Hot Module Replacement): Vite는 HMR을 통해 코드 수정을 실시간으로 반영하여 빠른 개발 주기를 제공함.
왜 CRA 보다 Vite 가 더 빠를까 ?
CRA는 Javascript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린 편이다. 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. 위의 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 vite를 사용한다.
출처 : https://bo5mi.tistory.com/196
vite 로 react 프로젝트 생성하기
1. npm init vite 입력
2. 프로젝트 이름 생성
3. 프레임워크 선택 - React 선택
4. variant 설정 - JavaScript + SWC 선택 ( TypeScript 를 사용하시는 분은 TypeScript 선택 )
( SWC는 Vite 프로젝트에서 JavaScript 및 TypeScript 코드를 변환하는 데 사용되는 빠르고 효율적인 도구임. Vite에서 SWC를 사용하면 코드 변환 과정이 최적화되어 빌드 및 개발 서버 실행 속도가 향상됨 )
5. 실행을 위해 생성된 프로젝트 폴더로 이동
6. npm install
7. npm run dev
8.실행 끝
(포트번호는 5173 이다 )
리액트 개발환경 준비 끝
'기초 셋팅' 카테고리의 다른 글
| 타입스크립트로 프로젝트 환경을 구성해보자 ! (0) | 2023.06.11 |
|---|---|
| VsCode에서 TS 디버깅 환경 구성하기 (0) | 2023.05.30 |
| Github-vscode 연동하기 (0) | 2023.02.15 |
