[환경설정] create-react-app 에러 (CRA 에러)

Create React App(CRA)란?

Create React App(CRA)는 리액트(React) 애플리케이션을 손쉽게 생성할 수 있도록 해주는 공식적인 CLI 도구다. 별도의 복잡한 설정 없이 단순한 명령어 입력만으로 프로젝트를 초기화할 수 있어 초보자부터 숙련자까지 널리 사용했었다.

터미널에서 CRA를 이용한 프로젝트 생성 명령어는 다음과 같았다.

npx create-react-app my-react-app
cd my-react-app
npm start

이 명령어를 실행하면 자동으로 프로젝트 구조가 생성되고, 개발 서버를 실행하여 즉시 React 애플리케이션을 실행할 수 있었다. 

CRA의 주요 장점

CRA는 메타에서 몇 년간이나 관리하지 않았지만 다음과 같은 장점으로 인해 많은 개발자들에게 인기가 있었고, 현재도 많이 사용하고 있다.

• 간편한 프로젝트 생성: 단 한 줄의 명령어로 React 프로젝트를 손쉽게 만들 수 있다.
• 기본적인 설정 제공: Webpack, Babel, ESLint 등의 설정이 자동으로 구성되어 개발자가 직접 설정할 필요가 없다.
• 빠른 개발 환경 구성: 내장된 개발 서버(npm start)를 사용하여 변경 사항을 즉시 확인할 수 있다.
• 테스트 환경 제공: Jest 및 React Testing Library가 기본 포함되어 있어 손쉽게 테스트를 작성할 수 있다.
• 직관적인 폴더 구조: 기본적인 프로젝트 구조를 제공하여 초보자가 쉽게 익숙해질 수 있다.
• 공식 지원과 문서 제공: React 팀에서 직접 관리하고 있었기 때문에 안정적인 지원과 문서를 활용할 수 있다.

CRA의 현재 문제

그런데 최근 React의 공식 문서에서 CRA를 이용한 프로젝트 생성대신 Create Next App(CNA)을 이용해 프로젝트를 생성하도록 권장하고 있다. React의 버전도 19로 업데이트 됨에 따라 최신 버전의 npx create-react-app 명령어를 실행할 경우 CRA의 내부 패키지 의존성이 업데이트되지 않아 최신 React 버전과 충돌이 발생하고, 이로 인해 기존의 create-react-app 명령어만으로는 정상적인 프로젝트 생성을 보장할 수 없다.

CRA 설치 문제 해결 방법

하지만 만약 기존 방식대로 CRA를 이용하여 프로젝트를 생성하고 싶다면, React 18 버전으로 강제 다운그레이드하는 방법을 사용할 수 있다. 

1) CRA 프로젝트 생성

npx create-react-app my-react-app
cd my-react-app

2) React 18 버전으로 다운그레이드

npm install react@18 react-dom@18 @testing-library/jest-dom@5.17.0 @testing-library/react@13.4.0 @testing-library/user-event@13.5.0 web-vitals

3) 애플리케이션 실행

npm start

이 방법을 적용하면 React 18 버전의 환경에서 create-react-app을 정상적으로 사용할 수 있다. 하지만 장기적으로는 공식 권장되는 Next.js를 활용하거나, Vite의 사용을 고려해봐야 한다.

---

25년 2월 15일 공식 깃헙에서 커밋이 진행된 후 현재 25년 4월 기준으로 의존성 에러 없이 CRA를 사용할 수 있다. 공식적으로 더 이상 지원하지 않는다고 발표했기 때문에 실제 프로젝트에서 사용은 감소하겠지만, CRA를 사용한 온라인 강의가 많아서 학습용으로는 그래도 한동안 유지될 것 같다.