[React] react + vite + typescript + yarn 프로젝트 환경구성

 

프로젝트를 생성하기 전에, vite에 대해 간단히 설명드릴게요 :)

 

vite란?

대규모 프로젝트에서 javascript 모듈이 증가될 수록 javascript 기반의 도구는 병목현상이 발생됨에 따라 개발의 생산성을 낮추고 변경 파일에 대한 피드백에 영향을 주었으나 vite에서 지원하는 ES Modules(ESM)을 통해 이러한 현상을 해결할 수 있습니다.

자세한 설명은 아래 공식 홈페이지를 참고해주세요.

https://ko.vitejs.dev/guide/why.html

 

버전

• node : 20.11.1 (버전 변경 방법 : https://withwltn.tistory.com/31)
• yarn : yarn berry (4.1.1)
• react : 18.2.0
• typescript : 5.2.2

 

프로젝트 생성

프로젝트를 생성할 workspace 경로에 들어가서 아래 명령어를 입력해줍니다.

# yarn berry
yarn set version berry

# yarn
yarn create vite Frontend --template react-ts

# install
yarn

# run
yarn dev

 

vite는 기본적으로 5173포트로 열립니다.

초기 화면은 아래와 같이 뜹니다.