아무 생각 없이 CRA만 하셨나요?

A_Teals·2023년 7월 10일

react

목록 보기

2/2

네 맞습니다... React할때 무지성으로 CRA만 하던 사람 바로 접니다...

CRA는 개발자 본인이 React를 위한 환경을 만들어 주지 않아도 자동으로 React 프로젝트를 시작할 수 있게 환경을 만들어 주는 개발도구 입니다.

npm create-react-app "" 만 입력하면 자동으로 의존성들을 설치해주고 기본적인 보일러 프로젝트를 생성해 개발자는 작업만 할 수 있도록 만들어줍니다!

그치만 문제가 있죠..

사실 CRA만 이용해도 큰 문제는 없습니다. 저도 지금까지 CRA로 모든 react프로젝트를 진행했구요... 하지만, 이번에 새로운 React 프로젝트를 진행하기 위해서 tailwind를 설치하는 과정에서 이런 걸 봐버렸습니다.

(엥? 아무튼 Vite를 쓰는게 좋다는데?)

Next.js를 사용하는 방법도 있었지만, 저는 이미 Next.js로 기능 구현을 해 보았으며 이번에는 React로 진행 해보고 싶던 와중에 Vite는 좋은 대안이 될 것 같았습니다.

Vite는 현대적인 웹 개발을 위한 빠르고 경량화된 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발한 Vite는 Vue.js를 위해 만들어진 것이지만, 최근에는 React와 TypeScript를 지원하기도 합니다.

(땡큐 Chat Gpt)

vite는 CRA와 같은 개발도구입니다. 처음에는 Vue를 위해 만들어 졌지만, React와 Typescript를 이용한 React 프로젝트를 지원합니다.

그리고 "현대적인 웹 개발" 이거 못참습니다.

GPT가 알려준 vite의 장점은 다음과 같습니다.

빠른 개발 서버:HMR (Hot Module Replacement)을 지원하고 있어 코드 변경 시 실시간으로 변경 사항이 반영됩니다.
빠른 빌드: Vite는 ES 모듈을 사용하여 개별 파일을 로드하기 때문에 초기 빌드 속도가 매우 빠릅니다. 파일 단위로 캐싱하여 변경된 파일만 다시 빌드하므로 전체 애플리케이션을 다시 빌드할 필요가 없습니다.
더 작은 번들 크기: Vite는 개발 중에 ES 모듈을 그대로 유지하고, 프로덕션 빌드 시에만 번들링합니다. 이로 인해 번들 크기가 작아지고 초기 로딩 속도가 향상됩니다.
확장성: Vite는 TypeScript, CSS 전처리기 (Sass, Less), 테스트 프레임워크 (Jest 등) 등과 쉽게 통합됩니다. 다양한 플러그인과 기능을 제공하여 개발자가 프로젝트에 필요한 도구와 환경을 유연하게 구성할 수 있습니다.

사실 CRA에서도 지원해주는 부분들이지만, 전체적으로 Vite가 React보다 더작은 번들의 크기와 더 빠른 속도라는 점에서 충분히 매력을 느낄 수 있는 것 같습니다.

(심지어 이름부터 프랑스어로 빠르다임)