[React][Vite] Visual Studio Code에 Vite 세팅하기

React + Vite 세팅 ✨

Visual Studio Code 환경에서 Vite 프로젝트 환경 세팅을 해보자!
폴더 만들기부터 천천히 :)

Vite 다운받기 🔥

만들고 싶은 프로젝트 폴더의 상위 폴더에서 터미널을 열어야 한다.
(vite를 다운 받으면서 프로젝트 폴더명을 정하기 때문)

상위 폴더에서 터미널을 열었다면, 다음 명령어를 입력한다.

npm create vite@latest
# 현재 경로에 가장 최신의 vite 프로젝트 생성

그럼 아래와 같은 선택지들이 나오는데,

• Ok to proceed? (y) : y를 입력하고 엔터
• Project name: 백스페이스로 지울 필요 없이 바로 폴더명을 입력한다
• Select a framework: React 선택한다.
• Select a variant: JS/TS 원하는 거 선택하면 된다.

그러면 Done 이라며 아래와 같은 명령어를 입력하라고 안내가 나온다.

cd "폴더명"
# 방금 만든 폴더명에 들어가기 (cd "폴더명" 하라고 나왔을 것. 그대로 친다)

npm install
# npm 다운받기

npm run dev
# npm 실행하기 (앞으로 실행할 때마다 이 명령어를 입력한다)

마지막으로 의존성 패키지를 설치해준다.

npm i
# 의존성 패키지 설치

Vite 프로젝트를 키고 끄는 법 🤔

npm run dev로 열었다면 이런 화면이 뜰 것이다.

h + enter를 누르면 도움말이 나오는 것을 볼 수 있다.

Local: http:// ~ 라고 써있는 페이지를 열거나 o+Enter로 웹페이지를 열 수 있다.
q + Enter로 웹사이트와의 연결을 끊을 수 있다.

끝!

Vite 프로젝트 생성부터 열고 닫기까지 해보았다 😊
도움이 됐다면 좋아요 💗

[ 참고 사항 ]

• React 프로젝트 시작하기 w. Vite
• React + vite 프로젝트 세팅하기 (w. eslint, prettier)