[React] Vite + React로 프로젝트 시작하기

Vite + React로 프로젝트 시작하기

1) npm vs yarn

먼저, npm과 yarn 중에 어떤 패키지 매니저를 사용할지 고민했는데,
속도가 더 빠르고 보안성이 더 높은 yarn을 사용하기로 결정했다.

yarn 채택

yarn은 npm의 개선된 버전이라고 보면 된다.

• 채택 이유
  • 동시에 여러 패키지를 설치할 수 있기 때문에 속도가 더 빠르다.
  • npm은 의존 관계를 가지는 다른 패키지들을 즉시 포함시키는 반면, yarn은 yarn.lock이나 package.json 파일에 있는 것들만 설치하기 때문에 보안성이 더 높다.

 

2) React 프로젝트 생성

Vite를 이용하여 리액트 프로젝트를 생성한다.

 

✨ Vite란?

Vite는 빠른 웹 개발 환경을 제공하는 프론트엔드 빌드 도구이다. 프랑스어로 "빠른"이라는 뜻을 가지고 있으며, 기존의 빌드 도구인 Webpack이나 Parcel보다 더 빠르고 간편하게 설정하고 사용할 수 있도록 설계되었다.

Vite는 ES 모듈을 기반으로 동작하며, 개발 중에는 번들링 없이 파일을 제공하고, 배포를 위해 최적화된 번들링을 수행한다.

→ 결론: 빠르고 간편한 최신 빌드 도구

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

Vite

 

Vite + React 프로젝트 생성 명령어

언어: JavaScript

yarn create vite my-react-app --template react
cd my-react-app
yarn
yarn dev

웹에서 http://localhost:5173 으로 접속한다.