React - Vite 세팅하기

터미널에서 프로젝트 생성하기

• https://ko.vitejs.dev/guide/
• vite 프로젝트 생성 명령어

# npm 
npm create vite@latest

# yarn 
yarn create vite

# pnpm 
pnpm create vite

• react 프로젝트 생성하기

# create-vite에서 제공하는 템플릿들을 사용하면 쉽게 프로젝트를 생성할 수 있습니다.
# react의 경우 react, react-ts, react-swc, react-swc-ts 등이 있습니다.
# (vue의 경우에는 vue, vue-ts로 생성합니다.)

# npm 6.x
# npm create vite@latest [프로젝트명] --template [사용할 템플릿]
npm create vite@latest my-react-app --template react

# npm 7버전 이상은 반드시 -- 를 붙여주세요
npm create vite@latest my-react-app -- --template react

# yarn
yarn create vite my-react-app --template react

#pnpm
pnpm create vite my-react-app --template react

• 위의 명령어로 간단하게 프로젝트를 생성할 수 있습니다.

 

IntelliJ에서 프로젝트 생성하기

• 상단탭에서 ‘File → new → Project…’ 을 눌러서 vite 플러그인을 선택하고 아래와 같이 프로젝트명과 Template를 선택해줍니다.

• 만약 플러그인이 보이지 않는다면 상단탭에서 ‘IntelliJ IDEA → Settings…’에 들어가서 플러그인을 추가해줍니다.

• 이렇게 하면 프로젝트가 잘 생성됩니다.

• 여기서 한가지 알 수 있는점은 공식문서와 다르게 IntelliJ에서는 npx로 생성하는 명령어를 기본으로 제공하고 있다는 사실입니다.(왜 그럴까요? 좀 알아봐야겠군요)