🤖 CRA

⚒️ CRA란?

npx create-react-app {프로젝트 이름}

React는 라이브러리이다, 따라서 리액트 앱을 만들기 위해서는 환경을 구축해야 한다

create-react-app 은 번거로운 React 초기 셋팅 작업을 미리 하고 그 환경을 다시 패키징한 것

즉, 초기 환경을 일일히 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 하는 Boiler Plate이다

👎🏻 CRA의 단점

CRA는 JavaScript로 구성된 Webpack을 사용하는데 속도가 느리다

🚀 Webpack

웹에서 사용되는 모든 자원을 번들링 해주는 도구

📦 번들링 : 여러 개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징 시키는 과정

⚡️ Vite

💡 Vite란?

yarn create vite

Vite는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구

프랑스어로 빠르다를 의미하며, veet와 비슷한 /vit/ 로 발음한다!!

👍🏻 Vite의 장점

Vite는 Go 언어로 작성된 esbuild를 사용하여 속도가 빠르다

🚀 esbuild

Webpack보다 100배 빠른 번들러

🏃🏻 esbuild가 빠른 이유 :

• Go 언어로 작성됨
• 코드 파싱, 출력과 소스맵 생성을 모두 병렬로 처리함
• 불필요한 데이터 변환과 할당 없음

🥊 CRA vs Vite

번들러의 개념에 대해서 처음 알게 되었는데, 사실 CRA말고 다른 것이 있는지도 몰랐었다

이번에 Vite를 처음 사용해보면서 속도가 체감이 될 만큼 너무 좋아서 더 찾아보게 되었다

결론 : 아무튼 Vite 는 빠름. 굿.