1. 사용한 기술 개념

• Vite

2. 적용한 근거 및 목적

목적

• React **CRA(Create React App)**는 JavaScript로 구성된 Webpack을 사용하기 때문에 속도가 느린편이고 처리해야 하는 코드의 양이 많아질 수록 느린 속도를 체감할 수 있다.

장단점 (근거)

장점

• Vite의 경우 Esbuild를 기반으로 만들어진 빌드툴을 사용하기 때문에 빌드 속도가 빠르다
  • 이때 Esbuild란  Go 언어로 작성된 JavaScript 빌드툴을 말함
• 개발 과정에서 핫 모듈 교체(HMR, Hot Module Replacement) 기능을 통해 코드 수정 시 전체 페이지를 새로 고치지 않고 변경된 부분만 즉시 업데이트할 수 있게하여 개발 효율성을 높일 수 있다.

적용 과정

• 아래 코드로 vite 프로젝트 생성

  npm create vite@latest react-app -- --template react
  

• 아래 코드로 vite+react 프로젝트 실행

  npm run dev 또는 npm run preview
  

3. 참고 자료

https://vitejs.dev/guide/

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

https://rudaks.tistory.com/entry/react-vite-사용하기

https://velog.io/@homile/react-vite

https://despiteallthat.tistory.com/256