Vite를 사용해야 하는 이유

• 고대의 웹 개발 방법 - HTML, CSS, JS를 각각 짜고 서버에 올림
• 현대의 웹 개발 방법 - 사람들이 JS 라이브러리를 쉽게 설치해주는 npm을 사용

< npm >

• JS 라이브러리를 모아놓은 플랫폼
• npm 사용할 거면 bundle tools도 이용해야 함 ⇒ npm + bundle tools

문제1. node_modules 폴더 용량 매우 큼

문제2. import/require 문법은 브라우저 친화적이지 않음

 

< 번들링(bundling) >

• 의존하고 있는 라이브러리 파일( EX. JS )을 하나로 합쳐주는 작업
• 다 합치는 게 아닌 필요로 하는 것만 가져와서 용량 절약
• ex ) Webpack, Rollup, Parcel

1세대 번들팩 : webpacks

• 콜드 - 스타트* 방식으로 개발 서버를 구동할 때, 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만 실제 페이지를 제공
  ( *콜드-스타트 : 최초로 실행되어 이전에 캐싱한 데이터가 없는 경우 )

문제 : 라이브러리 많아지면 번들링 개오래걸림

 

2세대 번들팩 : vite, snowpack

vite 빠른 이유

1. 빠른 esbuild 사용
2. 라이브러리 설치하자마자 미리 bundle 만들어놓음
3. 소스코드는 필요한 것만 건드림 -> 실시간 미리보기 가능

< Vite 시작하기 >

• Vite를 시작하기에 앞서 Vite는 Node.js가 설치되어 있어야 한다.
• 사용하려는 패키지 매니저에 따라 해당 명령어를 입력해주면 된다.
• 참고로, Node.js에는 npm이 기본적으로 포함되어 있다고 한다. 

 

>> pnpm을 사용해보기 위해 세 번째를 선택했다. pnpm install이 되어있지 않다고 친절하게 문구로 설치하는 방법을 알려준다.

 

pnpm 설치

react-router-dom 설치

>> npm을 사용할 때에는 npm install로 설치를 했다면, pnpm을 사용할 때는 pnpm install로 설치를 하면 된다.

>> npm을 사용할 때에는 npm start로 시작을 했다면, pnpm을 사용할 때는 pnpm run dev를 사용하면 된다.