[ReactJS] CRA(Create React App)와 Vite를 알아보자

엘리스 SW 트랙 7기를 마치고, 지난 4개월 동안 배우고 느꼈던 것들을 조금씩 정리하고 있다. 

내가 알고 있었던 것들을 다시 정리하게 되거나, 새로 알게 된 것들이 꽤 있었는데 그 중 하나가 바로 Vite(비트)다. 

새로 알게 된 것들은 차차 추가로 정리하기로 하고!

이 글에서는 새로 알게된 Vite를 정리해보고 CRA(Create-React-App)와 비교하는 내용을 적어보려고 한다.👀

 

📌 Vite 를 처음 알게 된 작은 썰

리액트의 "ㄹ"만 알았을 때는 CRA가 무적이라고 생각했다. 알아서 자동으로 환경을 착착 만들어 주는데, 얼마나 좋은가!

CRA를 몰랐을 땐 package.json을 하나씩 일일히 찾아보면서 넣었는데, 알아서 다 해주니까 너무 신세계였다. 

그래서 엘리스 1차 프로젝트에서 CRA를 선택했고, 스무스하게 환경 세팅을 마치고 프로젝트를 진행했었다. (사실 CRA만 알았어서 그걸 쓴 것도 선택한 큰 이유 중 하나다 🤭)

 

1차 프로젝트가 마무리 되고, 리액트 심화를 배우고 2차 프로젝트 기간이 다가왔다. 2차 프로젝트에서 프론트엔드는 React+Typescript로 진행하기로 했고, 나는 자연스럽게 팀원들에게 "CRA로 세팅하면 될까요?"라고 의견을 물어봤었다. 

 

왜냐? 나는 CRA밖에 모르니까!

 

팀원 분 중 한분이 "엇 혹시.. Vite는 어떨까요..? 제 노트북이 조금 오래돼서 CRA로 빌드하면 시간이 꽤 걸려서요ㅠㅠ" 라고 다른 의견을 내주셨었다. 처음 들어보는 이름이기도 했고, CRA만 주구장창 썼던 나로써는 생소해서 되게 신기했다.

팀원 분들 중 CRA가 좀 더 익숙하신 분들도 있었지만, Vite 를 제안하신 분이 간략하게 Vite가 무엇인지, 장점이 어떤건지 열심히 설명하신 덕(?)에 설득되어 2차 프로젝트에서는 Vite를 선택하기로 했다. 

 

당시에 간략하게 들었던 Vite가 꽤 매력적이라고 생각했고, 큰 규모의 프로젝트를 해보지 않아 느끼지 못했던 CRA의 단점을 알게 되어서 꽤 기억에 남았었다. 프로젝트가 끝나면 꼭 정리해놔야지 하고 메모해두었는데 드디어 정리를 하게 되었다🏃‍♀️

 

🌟 CRA(Create-React-App) 란?

출처 : https://velog.io/@binllionaire/React-CRA-vs-Vite

 

• Facebooke에서 제공하며, React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 "보일러 플레이트(Bolier plate)"
• webpack, Babel, ESLint 등이 자동으로 설치되어있음
• CRA는 webpack을 이용해 빌드를 함.
  • webpack은 자바스크립트로 구성된 도구
  • 자바스크립트는 interpreter 언어이기 때문에 다른 언어들에 비해 상대적으로 느림
  • 그렇기 때문에 처리해야할 코드가 많아질 수록 속도가 점점 느려지는 걸 체감할 수 있음
  • 브라우저의 요청 이전에 모든 자바스크립트 모듈을 번들링함

출처 : https://vitejs.dev/guide/why.html#slow-server-start

⚡️Vite 란?

• ESbulid를 기반으로 하는 "보일러 플레이트(Bolier plate)"
  • ESbuild 란?
    • webpack의 단점을 보완하기 위해 Go 언어(compile-to-native)로 작성된 자바스트립트 빌드 도구
    • webpack보다 속도가 빠름
• 브라우저에서의 Native ES 모듈 활용하여 자바스크립트 코드를 모두 번들링할 필요없이, 브라우저에서 자바스크립트 애플리케이션을 작동 시킬 수 있음
• ES 모듈을 사용하여 브라우저가 필요한 애플리케이션 코드의 일부분만 변환하여 제공하는 것이 Vite의 핵심
• Rollup을 사용하여 빌드하며 개발 모드로 빌드할 때, 자바스크립트의 모듈을 "의존성 모듈", "소스코드" 두 가지 카테고리로 나눔
  • 의존성 모듈
    • "node_modules" 폴더로부터 import 되는 자바스크립트 모듈
    • 개발하는 동안엔 자주 바뀌지 않으며, ES build를 사용하여 처리됨
    • 브라우저 요청 전에 의존 성 모듈만 미리 번들링함
  • 소스코드
    • ".jsx", ".tsx", ".vue", ".scss" 와 같은 라이브러리 관련 확장자를 포함할 수 있으며 자주 수정되는 파일
    • 소스코드 전체는 동시에 로드 될 필요가 없음
    • native ESM을 통해 소스코드를 제공하여, 브라우저의 요청이 있을 때만 소스코드를 변환하고 제공함

출처 : https://vitejs.dev/guide/why.html#slow-server-start

• HMR(Hot Module Replacement)를 기본적으로 지원함
  • HMR: 브라우저를 새로 고치지 않아도 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정
  • 나머지 페이지에 영향을 끼지치 않고 특정 모듈만 "즉시 반영" 될 수 있도록 해줌
• 모듈이 수정될 경우, Vite는 수정된 모듈과 관련된 부분만 교체하고 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달함

 

📝 CRA(Create-React-App) vs Vite 

	CRA(Create-React-App)	Vite
빌드 도구	webpack, babel	Rollup
빌드 속도	상대적으로 느림	상대적으로 빠름
HMR	지원 o, 느림	지원 o, 빠름
번들링	단일 번들링	분할 번들링

 

 

 

 

🔖참고 링크

• CRA vs Vite
  • https://vitejs.dev/guide/why.html#slow-server-start
  • https://velog.io/@jaewoneee/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%B3%B4%EC%9D%BC%EB%9F%AC%ED%94%8C%EB%A0%88%EC%9D%B4%ED%8A%B8-Create-React-App-vs-Vite
  • https://velog.io/@haeinah/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%B4%88%EA%B8%B0-%EC%84%A4%EC%A0%95-vite-vs-cracreate-react-app
  • https://strap.tistory.com/53
  • https://myhappyman.tistory.com/316
  • https://joseph0926.tistory.com/70
• HMR
  • https://gseok.github.io/tech-talk-2022/2022-01-24-what-is-HMR/
  • https://joshua1988.github.io/webpack-guide/devtools/hot-module-replacement.html