리액트 | Vite를 이용한 React 프로젝트 생성 (설치부터 프로젝트 생성까지)

이 글에서는 creat-react-app와 다른 방법으로 리액트 프로젝트를 생성하는 Vite(비트)를 설치하고 리액트 프로젝트를 생성하는 방법에 대해 정리할 예정이다.

---

Vite 설치하기

Vite는 Node.js 버전 18+ 혹은 20+를 기본 요구사항으로 하고 있다. 먼저 Node.js가 설치되어 있지 않다면 설치를 진행하고, 설치가 되어있다면 버전을 확인하자.

node -v

버전이 낮거나 설치가 되어있지 않다면 아래 사이트로 이동해서 설치를 진행하면 된다.

https://nodejs.org/en

Node.js

---

Vite 프로젝트 생성하기

프로젝트 생성은 아래 명령어를 이용해서 생성할 수 있다.

npm creat vite@latest

만약 위 명령어를 입력했는데, 새로운 버전의 create-vite를 설치한다는 메세지가 뜨면 y를 입력해 설치를 진행한다.

이후 프로젝트 이름을 입력하라 하면 프로젝트 이름을 입력한다.

framework를 선택하라고 하면 본인이 사용할 framework를 선택하면 된다. (이번 글에서는 리액트 프로젝트를 생성하는 것이 목적이기 때문에 리액트를 선택한다.)

이후 리액트를 TypeScript로 할지 JavaScript로 할지 선택하는 메세지가 출력된다. 어떤 언어로 작성할 것인지 선택하면 된다.

여기서 SWC는 Speedy Web Compiler의 약자로 Rust로 제작된 자바스크립트 컴파일러로, 기존의 Babel의 역할을 대신한다고 한다. SWC 여부는 본인의 선택이므로 원하는 걸 선택하면 된다.

 

이후엔 자동으로 프로젝트 폴더가 자동으로 생성이 완료되며, 이후로는 아래 명령어를 입력하면 된다.

먼저 프로젝트 폴더로 이동한다.

cd {project_name}

아래 명령어를 이용하여 리액트 개발에 필요한 react, react-dom 등 필요한 라이브러리를 설치한다.

npm install

이후 개발 서버를 실행한다.

npm run dev

npm run dev 명렁어가 정상적으로 실행되어 개발 서버가 열리면 모두 정상적으로 설치된 것이다.

---