[React] Vite-App 생성하는 방법

 

---

 

 

vite 란

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구입니다.

프랑스어로 Vite(빠르다)라는 단어입니다. '바이트'가 아닌 '비트'라고 불러야 합니다.

Vite

 

---

 

 

React 설치

우선 설치가 필요한 것

Node.js

- 웹브라우저 환경이 아닌 곳에서도 Javascript를 실행할 수 있게 해주는 자바스크립트 런타임입니다.

- React 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 

프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요합니다.

(Babel, Webpack 등)

- npm 은 node.js가 설치될 때 같이 설치됩니다.

 

IDE

- 통합 개발 환경(Integrated Development Environment, IDE)의 뜻으로 개발 시 사용되는 툴을 말합니다.

저는 Visual Studio Code를 사용했습니다.

---

Vite를 이용해서 React 설치하기

1. React앱을 만들 폴더를 생성합니다. 

2. 해당 폴더 경로로 터미널을 실행합니다.

cd {폴더명}

3. 터미널에 아래의 명령어를 실행

npm create vite@latest

 

4. Project name: 프로젝트 이름 설정

 

5. 사용하려는 framework를 선택합니다. > 이 문서에서는 React 프로젝트니깐 React를 선택합니다.

 

6. 사용하는 언어를 선택합니다. 저는 Javascript를 선택했습니다.

* SWC 란?

ES6 이상의 최신 문법으로 작성된 자바스크립트 코드를 ES5 이하의 문법으로 변환하는 과정이고,

{내용추가하기}

 

7. Vite 프로젝트 설치가 완료되었습니다. 현재 폴더 위치를 확인 후 "npm run dev"로 실행시킬 수 있습니다.

 

* 아래처럼 Vite를 실행시켰을 때 아래의 오류가 나오는 경우

npm install

로 npm 설치하기 그래도 같은 오류가 발생한다면 Vite 수동으로 설치해 보기

npm install vite

 

정상적으로 실행됨

 

 

Vite app 실행화면