Good bye Create React App!
*2023년 3월 22일 React팀의 공식 게시글 : "Goodbye create-react-app"
2023년 3월, React 공식문서에서 Create-React-App(이후 CRA로 표기)에 대한 내용이 삭제되었고 실제로 2022년 4월 이후 CRA는 정상적인 업데이트가 이루어지지 않았으며 사실상 폐기 수순을 밟고 있다.
그리고 2023년 3월 22일, React팀은 Github를 통해 CRA 사용을 지양하길 권고하고 성능이 더 우수하고 현대적인 기능을 제공하며 유지보수가 활발한 Vite나 Next.js와 같은 대안을 사용할 것을 공식적으로 추천하는 내용을 게시했다.
현재 React 공식문서의 React 설치 가이드에서도 Next.js, Remix, Gatsby, ...등등 과 같은 프레임워크 사용을 권고하고 있고, 이는 기존 CRA로 React 프로젝트를 생성하던 나같은 프론트엔드 개발자들에게 새로운 도구와 방식으로 전환해야 하는 중요한 변화의 시점이 되었다고 생각한다.
본 포스트는 내가 Create React App(CRA)으로 신규 React 프로젝트를 생성하다가 발생했던 문제, 이를 해결하는 과정, CRA를 대체할 기술 스택 선정에 대한 고민 과정, 신규 프로젝트에서 선택한 기술 스택에 대해 총 2부 분량으로 작성될 예정이다.
내가 당면했던 문제, NPM 7: peerDependencies..
위 내용을 모르고 React로 새 프로젝트를 CRA로 생성하던 중 다음 오류가 발생했다.
npm error ERESOLVE unable to resolve dependency tree
원인은 npm v7.0.0 (DEPENDENCIES 참고) 에서 peerDependencies를 자동으로 설치해주게 업데이트 됐는데, 그 과정에서 모듈에서 요구하는 React 버전과 현재 내 프로젝트의 React 버전이 달라서 충돌이 일어나 발생하는 오류였다.
단순 버전 충돌 문제로만 인식했던 나는 에러해결을 위해 여러가지 시도를 해보았다.
CRA로 React를 최신버전으로 신규 설치하고 있는 상황에 버전 충돌이 일어난다는게 의아했지만 React v19 배포, TypeScript v5.6 배포로 인한 문제 등 여러 가능성을 열어두고 차근차근 대응했다.
- node_modules와 package-lock.json 파일 삭제 후
npm install- Node.js 최신버전으로 재설치
npm cache clean --force: npm 캐시 삭제npm install react@18.2.0: React v18.2.0로 다운그레이드npm install typescript@4.9.5: TypeScript v4.9.5로 다운그레이드- 최후의 수단
--legacy-peer-deps: npm v4~6 처럼 peerDependencies 무시- ...등등
결론적으로 이런 방법으론 에러를 해결할 수 없었다.
그리고 문제를 해결하려고 시도하다보니 이상한 점이 눈에 띄었다.
package.json을 열어보니 뭔가 이상하다.
npx create-react-app my-app --template typescript
분명 명령어는 문제가 없는데 "dependencies"에 @types, testing-library가 누락된 것 같다.
React버전과 TypeScript버전을 낮춰줘도 문제는 해결되지 않았다.
대략 이 쯤에서 CRA문제인건가 의심하기 시작했다.
React 공식문서부터 확인해본 결과 문서상 CRA가 사라져있고 React 설치 가이드에는 프레임워크 사용을 권고하고 있는 것을 확인했다.
그리고 Good bye Create React App! 게시글을 접하게 됐다.
React로 개발하는 사람중 90%가 의존했던 CRA가 없어진다고?
State of JS 2023 설문조사를 확인해보면 Create React App(CRA)를 사용했다는 응답자가 90%가 넘을 정도로 프로젝트 표준 생성 CLI도구였던 CRA가 폐기된다는 소식에 React 생태계는 새로운 변화의 시점으로 들어섰다.
(물론 CRA "Used it"이라고 응답한 응답자 중 35%는 부정적인 반응을 보였지만..)
아무튼 이정도로 프로젝트 생성에 표준이 되었던 CRA는 무엇이며,
CRA가 사라지게 된 원인은 무엇이었을까?
Create React App (CRA) 란?
React 애플리케이션을 쉽고 빠르게 생성하기 위한 표준이었던 CLI(Command Line Interface)기반 도구이다. 주요 특징은 아래와 같다.
주요특징
- 복잡한 빌드 구성(Webpack, Babel 등)을 자동으로 설정해줌
- 프로젝트 구성, 번들링 등을 사전 구성해줌
npm run build명령어로 빌드 프로세스를 자동화해줌- ...등등 React 초기 환경에 대해 개발자가 별도 세팅할 필요없이 개발 환경을 만들어줌
즉, "개발자는 React 코드에만 집중할 수 있게 만들어준다." 는 것인데 왜 사라졌을까?
Create React App (CRA) 가 무덤속으로 사라진 이유
여러가지가 있지만 자료조사 후 내가 생각하고 정리해본 원인은 다음과 같다.
1. 성능문제
CRA는 Webpack을 기반으로 작동하지만, 최근 Vite, esbuild와 같이 더 빠르고 경량화된 도구들이 등장하면서 상대적으로 CRA의 빌드 및 개발 서버 속도가 느리고 비효율적이다.
2. 최신 기술 대응 부족
Server-Side Rendering(SSR), Static Stie Generation(SSG) 같은 최신 JavaScript와 React개발 트렌드의 요구를 충분히 충족하지 못했다.
3. 대체 기술의 성장
Vite같이 ESM, HMR등을 기반으로 빠른 개발 속도를 강조하는 웹 개발 빌드 도구와, Next.js와 같이 SSR, SSG를 기본으로 지원하며 SEO와 UX를 강화할 수 있는 프레임워크들이 CRA를 대체할만큼 충분히 안정적이게 성장했다.
4. 높은 의존도와 프로젝트 설정 커스텀 어려움
초기 설정이 간단하다는 장점이 있지만 프로젝트가 커질수록 설정을 커스텀해야하는 경우도 더러 발생하는데 모듈간 의존도가 높은 CRA는 이런 부분을 유연하게 대처하기 어렵다.
도태된 CRA..
아무래도 함수형 프로그래밍 프론트엔드 프로그래밍 패러다임에 크게 자리하면서 독립적이고 안정성이 중요화된 시대에 CRA처럼 여러 모듈에 종속적이고 의존도가 높으며 비교적 느리고 업데이트가 어려운 도구는 빠르게 대체되기 마련인 것 같다.
실제로 State of JS 2023 설문조사에서도 CRA를 사용했던 90% 응답자 중 35%가 불편함을 인지하기도 했으니 말이다.
다음 포스트에서는 나와 프로젝트 팀원들이 CRA를 대체하여 어떠한 기술 스택을 선택했고 그 과정에서 겪은 고민들에 대해 다루려고 한다.
