(React) vite를 이용한 리액트 세팅 방법

 

 

이번 포스팅에서는 리액트로 프로젝트를 세팅하는 방법을 정리하고자 한다. 

 

이번 포스팅에서는 Vite로 리액트 프로젝트를 시작하는 방법을 설명한다.

 

Vite는 설정이 간단하고 확장이 쉽다는 장점이 있다. 

 

 

 

1. node js 설치하기

npm을 사용하기 위해 먼저 node js를 설치해야 한다. 

 

npm은 노드 패키지를 관리하는 툴로 node js를 설치하면 자동으로 설치된다. 

 

 

 

2. 프로젝트 폴더 생성 & 터미널 오픈

프로젝트를 생성하고 싶은 폴더를 새로 생성하고,

 

visual studio code를 열어 해당 폴더를 오픈한다.

 

 

 

 

3. 리액트 프로젝트 생성

제일 먼저 Vite를 이용해 리액트 프로젝트를 생성해야 한다. 

 

아래 명령어에서 .은 현재 디렉토리를 의미하며, --template react는 리액트 템플릿을 사용한다는 의미이다. 

npm create vite@latest . --template react

 

 

 

 

4. 의존성 설치 

이후 프로젝트에 필요한 각종 의존성 패키지를 설치해야 한다. 

npm install

 

 

 

 

5. 개발 서버 시작

이후 개발 서버를 시작하는 명령어를 입력한다.

 

해당 명령어가 입력되면 주소가 뜨는데 해당 주소로 들어가면 애플리케이션을 확인할 수 있다. 

 

만약 서버를 종료시키고 싶다면 Ctrl + C를 누르면 된다. 

 

다시 서버를 시작하려면 다시 아래 명령어를 입력하면 된다. 

npm run dev