CRA(Create-React-App)은 죽었다

RIP CRA(Create-React-App)

CRA(Create-React-App)이 죽었다…
아 죽었다는 표현보단는 deprecated가 맞는 표현 같다

React에서는 새로운 문서 https://react.dev/ 를 공개하고 이전 문서의 지원을 중단했는데
충격적이게도… 새프로젝트 생성부분에 CRA(Create-React-App)부분이 존재하지 않았다

충격 실화!

근데 사실 전부터 이런 이슈는 존재해왔는데 어떤점이 문제였고, 그러면 어떤부분이 바뀌었는지 확인해보자

이후 Create-React-App는 CRA로 표현

💡 들어가기 앞서 이영상을 참고하면 좋을거 같다 https://www.youtube.com/watch?v=M4CLvtCS2YU

성능 이슈

사실 이문제는 전부터 존재하였지만, 새로운 모듈러들이 나오면서 더 크게 와닿게 되는데

CRA의경우 node_modules 종속성만해도 200mb가 넘어갔다

vite는 30mb밖에 되지 않는거에 비하면 상당히 대조적인 부분

CRA

• create-react-app (typescript) 설치 총 26초(앞 8초 제외)

 

• yarn create vite my-app --template react-ts (vite react typescript template)

OMG…..

거의 30초 걸리던 설치를 vite는 단 3초만에 해냈다 심지어 설치는 1초만에 마무리

여기서 성능이슈를 느낄수있듯이 상당히 성능이슈가 있다 만약 여기서 build까지 오래걸린다면, 상당한 리소스를 차지하는 것이다.

커스텀의 어려움

바로 CRA는 커스텀에 어려움이 존재합니다 eject을 통해서 webpack 수정이 가능하지만 권장하지 않은 방법이였구, 무엇보다 지속적인 업데이트가 되고 있는 CRA의 장점을 포기하는 방법이였다. (

현재는 아니지만

)

Craco(Create-React-App Configuration Override)나 react-rewired 등의 라이브러리를 통해서 커스텀이 가능하였지만, 여전히 무겁고 CRA안에서 재정의 하는 방식이라 복잡성만 증가하였다.

대안

vite

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

앞선 영상에서 보듯이 엄청빠르다 빠른이유는 여기선 자세히 다루진 않겠지만 esbuild를 사용하기 때문이다.

심지어 CRA처럼 간단한 명령어로 바로 프로젝트 구성이 가능하다 심지어 다양한 템플릿까지 지원

오yarn create vite [프로젝트명] --template [template]

# template 구성요소 
# vanilla, vanilla-ts, vue, vue-ts, react, react-ts, 
# react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts

Nextjs

• 웹 어플리케이션을 구축하기 위한 프레임워크

Nextjs는 누구나 잘 알고있어서 자세한 설명을 하지 않지만 react 프레임워크이다

기존에 SSR처리가 어렵던 부분을 Nextjs에서는 손쉽게 할수있고, 무엇보다 React와 호환성도 좋기때문에 마이그레이션 하기 너무 좋다(

당연한건가?..

)

**왜 nextjs인가** 에 대한 물음표가 있다면 링크 참조 바란다.

기타

Remix, Gatsby 등이 존재

• Remix
  • Nextjs와 같은 React 프레임워크
• Gatsby
  • React로 손쉽게 정적 웹사이트 제작하게 도와준다 SSG
  • 많은분들이 개발블로그 제작할때 사용

마무리

본인의 React개발의 시작과 끝은 언제나 CRA로 하였는데 사실 느린 성능때문에 회사에서는 직접 커스텀한 webpack으로 굴렸고, 사이드프로젝트외에는 사용하지 않았다.

최근 시작한 challenge_timer또한 CRA로 제작하였는데, 다시 vite로 마이그레이션을 진행할려구한다.

뭔가 시원 섭섭한 느낌이지만 매번 변화를 거듭해온 프론트엔드 시장의 새로운 바람이 아닐까 생각된다.

Good Bye CRA

Welcome Vite