React 설치 오류(react@19.0.0 관련)

React JS를 공부해보려고 인터넷을 찾아 설치하려고 하는데 오류가 발생했다.

npx create-react-app first-app

Creating a new React app in /Users/hyosukjung/git/react-app/first-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1323 packages in 2m

267 packages are looking for funding
  run `npm fund` for details

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: first-app@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error   @testing-library/react@"^13.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/hyosukjung/.npm/_logs/2025-01-21T13_32_06_760Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/hyosukjung/.npm/_logs/2025-01-21T13_32_06_760Z-debug-0.log
`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed

 

인터넷을 찾아보니 24년도 말인가 리액트 19 버전이 나온거 같은데, 그것 관련해서 발생한 에러인거 같았다.

 

참고로 위 문제를 해결하는데 아래 사이트를 참고했다.

 

https://www.inflearn.com/community/questions/1457785/react-app-%EC%84%A4%EC%B9%98-%EC%8B%9C-%EB%AC%B8%EC%A0%9C?srsltid=AfmBOoqv1zCceHuR0E9ueFCbsx3rgr8YlSxWCQYyZc3GLqv10fGCV2_D

React app 설치 시 문제 - 인프런 | 커뮤니티 질문&답변

 

해결법에 대한 내용은 간단하게 아래와 같다.

 

1) npm(또는 npx)가 아니라 yarn으로 설치

npm install -g yarn
yarn create react-app my-app

 

뤼튼을 통한 의미 확인

• npm install -g yarn
  > 의미 : 이 명령어는 Yarn 패키지 관리자를 전역(global)으로 설치하는 것입니다. -g 플래그는 Yarn이 시스템 전체에서 사용 가능하도록 설치된다는 것을 의미합니다. Yarn은 npm과 비슷한 기능을 제공하는 패키지 관리자입니다.
• yarn create react-app my-app
  > 의미 : 이 명령어는 Yarn을 사용하여 새 React 애플리케이션을 생성하는 것입니다. create-react-app 템플릿을 기반으로 하며, my-app이라는 이름의 새 디렉토리를 만들고 그 안에 기본적인 React 애플리케이션 구조를 설정합니다.

 

 

2) '--force' 또는 '--legacy-peer-deps' 옵션 사용

npx create-react-app my-app --legacy-peer-deps

 

뤼튼을 통한 의미 확인

• npx create-react-app my-app --legacy-peer-deps
  > 의미 : npx를 사용하여 create-react-app을 실행하고, my-app이라는 이름의 새 React 애플리케이션을 생성합니다. --legacy-peer-deps 플래그는 의존성 충돌을 무시하고 설치를 진행하도록 합니다. 이는 주로 패키지 간의 버전 불일치로 인한 문제를 해결하기 위해 사용됩니다.

3) 리액트 버전을 변경해서 설치

npx create-react-app my-app
cd my-app
npm install react@18 react-dom@18
npm i web-vitals
npm start

 

뤼튼을 통한 의미 확인

• npx create-react-app my-app
  > 의미 : npx를 사용하여 create-react-app을 실행하고, my-app이라는 이름의 새 React 애플리케이션을 생성합니다. 이 명령어는 create-react-app이 최신 버전으로 실행되도록 보장합니다.
• cd my-app
  > 의미 : 현재 작업 디렉토리를 my-app으로 변경합니다. 이렇게 하면 이후의 명령어들을 해당 프로젝트 디렉토리 내에서 실행할 수 있습니다.
• npm install react@18 react-dom@18
  > 의미 : React와 React DOM의 버전 18을 설치합니다. 이 명령어는 package.json 파일에 해당 의존성을 추가하고, 필요한 패키지를 다운로드합니다.

npm install react@18 react-dom@18

added 1 package, changed 4 packages, and audited 1325 packages in 4s

267 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

• npm i web-vitals
  > 의미 : web-vitals 패키지를 설치합니다. 이 패키지는 웹 애플리케이션의 성능을 측정하는 데 유용한 도구입니다. 이 명령어는 npm install web-vitals의 약어입니다.

npm i web-vitals

added 1 package, and audited 1326 packages in 2s

267 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

• npm start
  > 의미 : 현재 프로젝트에서 개발 서버를 시작합니다. 이를 통해 로컬에서 React 애플리케이션을 실행하고, 브라우저에서 확인할 수 있습니다. 기본적으로 create-react-app으로 생성된 프로젝트에서 npm start는 react-scripts start를 실행하여 개발 서버를 시작합니다.

Compiled successfully!

You can now view first-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.12:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

 

 

나같은 경우는 1, 2번 해결법은 안통한것 같고, 3번의 경우 뭔가 경고는 뜨는거 같은데 일단 리액트 실행 후 브라우저에 정상적으로 출력되는걸 확인했다.