vite로 react 프로젝트 생성 (vite 세팅방법)

프로젝트에서 vite로 선택한 이유?

 

번들링이 빠르기 때문이다. 

 

빠른 이유는 이유는? (코딩애플 참고)

1. 빠른 esbuid 쓰기 때문에

2. 라이브러리 설치하자마자 bundle 만들어놓음

3. 소스코드는 필요한것만 건드림

    파일 하나가 수정되면 다시 재번들링 하는데 vite는 hmr 변경사항만 반영.

 

vite 셋팅방법

 

npm init vite 를 실행하면 

프로젝트 이름,

프레임워크 설정(react 선택), 

typescript 여부

 

이렇게 3가지만 선택하면 기본셋팅이 완료된다!

해당 프로젝트 폴더로가서 npm i 입력 후, npm run dev 만 실행시켜주면 

http://localhost:3000 으로 확인이 가능하다.

 

 

설치 및 확인사항

 

(설치) Vite - typescript(vite에서는 설치 시 타입스크립트 선택할 수 있음) - hmr(Hot Module Reloading) - react router 설치 - sass(명령어 : npm add -D sass) - material UI (명령어: npm install @mui/material @emotion/react @emotion/styled)

(설정) optimization (파일 용량 최적화) ... 기타 필요한 설정 추가 https://github.com/vbenjs/vite-plugin-imagemin

(테스트) 빌드 테스트 (vite는 자동으로 index에서 합쳐줌)