[React] 여전히 create-react-app을 사용 해야 할까? (CRA vs VITE)

올해 초부터 제가 구독 또는 관심있게 보는 해외 개발자들이 비슷한 주제로 영상, 글들을 올렸습니다.

이들이 공통적으로 말하는 것은 React에 대한 전망과 create-react-app에 대한 이야기 였습니다.

 

두 주제 모두 관심있게 보았지만,

이번글에서는 좀 더 체감되는 주제인 create-react-app에 대해서 글을 작성 해보려 합니다.

 

1. 왜 create-react-app에 대한 우려(불만)의 소리가 나오는가

아마 react를 공부하고 사용할 때, 대부분 CRA를 통하여 프로젝트를 생성할 것입니다.

저또한 그래왔고 공식문서에도 그렇게 하라고 써져있습니다.

 

근데 왜 많은 개발자들이 CRA에 대해서 의문을 던지고 심하게는 사용하지 말라는 소리가 나왔을까요?

개발자들 마다 여러 이유들을 제시하고, 그것들에 약간의 차이는 존재하였지만 모두가 공통적으로 언급하는 문제점이 2개 존재하였습니다.

 

1. 느린 업데이트
   • CRA 공식 github를 가보시면 아시겠지만 가장 최근 커밋은 2022.09 입니다 (https://github.com/facebook/create-react-app/commits/main), 물론 큰 문제가 없다면 지속적인 업데이트를 안할수는 있다고 생각합니다.
   • 하지만 프론트엔드 시장은 정말 빠르게 변화하고 있습니다. 이러한 생태계속에서 최신 트렌드를 반영하지 못한다는 것은 매우 큰 단점이 될 수 있습니다.
2. 느린 속도
   • CRA를 지적하는 많은 사람이 공통되게 지적하는 부분은 속도부분입니다.
   • CRA는 webpack을 이용합니다. 이는 매우 일반적이지만 다음과 같은 부분에서 속도 문제를 발생시킬수있습니다.
     
     1. 프로젝트 크기
        • 프로젝트에 모듈과 종속성이 많은 경우, 이것을 제공하는데 많은 시간이 소요되어 결과적으로 느려집니다. 
     2. 느린 빌드
        • 빌드에 상당한 시간이 소요될 수 있습니다.
   • 이외에도 다른 이유가 있을 수 있겠지만, 제가 찾아본 내용으로는 이 2개가 주된 이유로 꼽힙니다.

 

2. 그렇다면 CRA를 대체제는? (VITE)

CRA가 문제가 있다는 것은 대충 알았습니다.그래서 이것을 대체할 수 있는 것은 무엇이 있을지 찾아보았고,

다들 공통적으로 "VITE"를 언급하였습니다.

 

• VITE란?
  • Vite는 빠르고 단순하며 효율적으로 설계된 최신 프론트엔드 빌드 도구입니다. 
  • Vite는 기존 자바스크립트 기반 번들러보다 훨씬 빠른 새로운 GO 기반 번들러인 esbuild를 사용합니다.
  • Vite는 Hot Module Replacement (HMR)을 지원합니다
• VITE의 장점
  • 속도
    • Vite는 속도가 매우 빠릅니다. 애초에 빠른 개발환경을 위해 ESBuild를 활용하므로, create-react-app보다 훨씬 빠릅니다.
  • Hot Module Replacement(HMR)
    • Vite는 HMR을 제공하여 대규모 프로젝트에서 작업할 때 유용합니다.
    • 반면에, create-react-app은 HMR을 제공하지만, 그렇게 빠르지 않습니다.
  • 번들러
    • Vite는 빌드에 ESBuild를 사용합니다. ESBuild는 Webpack보다 빠릅니다

위처럼 여러 이유로 VITE를 선택할 수 있겠지만,제가 가장 크게 체감한 것은 속도였습니다.

 

3. 그래서 저는 VITE를 사용합니다

물론 vite에도 단점이 존재합니다. 가장 크게 나타나는 단점은 커뮤니티 지원부분입니다.

많은 react 종속성 패키지들이 CRA를 기반으로 작성되었고, 그거에 맞춰 문서가 작성되어있기때문에 vite 사용시 어려움이 있을 수 있습니다.

하지만 최근에는 유명 패키지들에서 vite에 대한 가이드라인을 제시하고 있어, 위의 문제는 금방 해소될거라 믿습니다

(ex, Tailwind 공식문서: https://tailwindcss.com/docs/guides/vite)

 

4. 참고자료

create-react-app 공식문서: https://create-react-app.dev/docs/getting-started

Getting Started | Create React App

vite 공식문서: https://vitejs.dev/guide/

Vite

//// 참고한 블로그

https://hackernoon.com/why-vite-is-better-than-create-react-app-cra

Why Vite is Better Than Create-React-App (CRA) | HackerNoon

/// 참고한 유튜브

 

영상도 재밌지만, 각 영상의 댓글들을 하나하나 보시면 더 재미있을거같습니다

 

https://youtu.be/1LkOa7Ky2ak

 

https://www.youtube.com/watch?v=kvkAoCbTM3Q&t=67s 

https://www.youtube.com/watch?v=ADKvP8Xn4g8 

https://www.youtube.com/watch?v=o9TJWEPc0Lk