[ React ] 빠른 Frontend 개발을 위한 툴, Vite !

 

 

Vite는 프론트엔드 개발을 위한 하나의 툴이다.

Vite는 6가지의 장점을 내세우는데,

 

1. 즉각적인 서버 시작 : 네이티브 ESM을 이용한 번들링 없는 온디맨드 파일 제공.

2. 번개처럼 빠른 HMR : 앱 크기에 상관없는 Hot Module Replacement(HMR) 언제나 빠르게 작동.

3. 풍부한 기능 : 추가적인 모듈 설치 없이 TypeScript, JSX, CSS 등 사용가능.

4. 최적화된 빌드 : 웹앱 및 라이브러리 빌드 최적화를 위한 기본 설정 제공.

5. 범용 플러그인 : 개발 서버 및 빌드 과정 모두 사용 가능한 Rollup 플러그인 인터페이스 제공.

6. 완전한 유형의 API : 유연하게 작성된 API는 TypeScript 역시 완벽하게 지원.

 

내가 느끼기에 가장 좋았던 부분은 모든 부분에서 빠르게 작동하는 점이다.

Vite에 대한 자세한 정보를 얻길 원한다면, 아래 공식 홈페이지를 읽어보는 것을 추천한다.

Vite 공식 홈페이지 --->  https://ko.vitejs.dev/

 

 

⚡설치 방법

 

- VSC 터미널을 열고 프로젝트를 생성하고자 하는 폴더에서 아래 명령어를 입력한다.

yarn create vite

 

- project name 부분에는 내가 원하는 프로젝트 이름을 작성해준다.

 

- 그 다음 화면에서 내가 사용할 프레임 워크를 선택해준다.

 

- 프레임 워크를 선택했다면 화면에서 JavaScript 또는 JavaScript + SWC 등 자신의 프로젝트에 알맞는 언어를 선택한다.

- ( SWC 는 Rust 로 개발되어 더 빠른 컴파일 속도를 제공 )

 

- 그 다음 해당 파일로 이동해준다.

cd [ 프로젝트 명 ] / ex. cd test

 

- 마지막으로 노드 모듈을 설치해주면 끝.

yarn

 

- 실행 방법은 터미널에 아래와 같이 작성하면 된다.

yarn dev