노마드코더 ReactJS로 영화 웹 서비스 만들기 05-1 무료강좌

 

노마드코더 ReactJS로 영화 웹 서비스 만들기 05-1 무료강좌

 

🔻🔻🔻node.js 설치 방법 확인하기ㅣ

https://blog.naver.com/devlunch4/223724591778

맥북 node js 설치 macOS Node.js install 설치 버전 확인

react app 설치 생성

하지만 오류가 발생..

이 에러는 주로 React 프로젝트를 생성하거나 패키지를 설치할 때 발생하며, 주된 원인은 의존성 충돌입니다.

아래 단계에 따라 문제를 해결해 보았지만.. (실패..)

1. 에러의 원인

react 버전 19.0.0이 설치되어 있는데, @testing-library/react 패키지는 react 버전 ^18.0.0과 호환됩니다.

NPM이 의존성 트리를 해결하지 못하고 충돌을 보고하는 것입니다.

2. 해결 방법

(1) React 버전 변경

React의 안정된 최신 버전은 현재 18.x.x입니다. 따라서 아래 명령어로 React 버전을 변경합니다.

npm install react@18 react-dom@18

 

그런 다음 다시 의존성을 설치합니다.

npm install

 

 

(2) --legacy-peer-deps 옵션 사용

만약 React를 꼭 19.0.0으로 유지해야 한다면, 설치 명령에 --legacy-peer-deps 옵션을 추가하여 강제로 설치를 진행할 수 있습니다.

npm install --legacy-peer-deps

 

(3) --force 옵션 사용

위 방법으로 해결되지 않는다면, 의존성을 강제로 설치합니다. 이는 문제가 있는 의존성을 무시하고 설치를 진행하지만, 안정성을 해칠 수 있으니 주의하세요.

npm install --force

 

에러 해결 방법

어느 멋진 분의 설명 안내!

바로 실시!

 

기존에 설치된 디렉터리 내 파일들을 삭제해 주고 깨끗(클린) 하게 다시 시도를 해보았습니다.

해결 방법 시 도전 한 번 더 다시 해보았는데 여전히 오류 발생. 그래서 다시 클린 작업을 했습니다.

이어서 댓글에 안내된 방법을 실시.

"npm config set legacy-peer-deps true"

를 입력해 보았는데요.

정상적으로 설치가 되었고, 강좌 진행을 이어서 할 수 있었습니다.

 

일단 에러코드를 안 남겨 놓아서 코드로 남겨봅니다.

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: react-for-beginners@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/##/.npm/_logs/2025-01-13T10_02_37_951Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/##/.npm/_logs/2025-01-13T10_02_37_951Z-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
##@#### npx-app %  npm install --legacy-peer-deps
npm error code ENOENT
npm error syscall open
npm error path /Users/##/vsCode_project/nomadcoders_react-for-beginners/npx-app/package.json
npm error errno -2
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/Users/##/vsCode_project/nomadcoders_react-for-beginners/npx-app/package.json'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: /Users/##/.npm/_logs/2025-01-13T10_04_55_819Z-debug-0.log
##@#### npx-app % npm install --force
npm warn using --force Recommended protections disabled.
npm error code ENOENT
npm error syscall open
npm error path /Users/##/vsCode_project/nomadcoders_react-for-beginners/npx-app/package.json
npm error errno -2
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/Users/##/vsCode_project/nomadcoders_react-for-beginners/npx-app/package.json'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: /Users/##/.npm/_logs/2025-01-13T10_05_02_123Z-debug-0.log
##@#### npx-app % npm cache clean --force
npm warn using --force Recommended protections disabled.
##@#### npx-app % npx create-react-app react-for-beginners
The directory react-for-beginners contains files that could conflict:

 

생성된 리액트 앱 경로로 vscode에서 열어줍니다.

저의 경우 이전 강좌의 파일들이 있는 내부에 앱 생성 폴더를 만들고 거기에 프로젝트가 생성되었네요.

상위 폴더의 레포지토리로 깃헙으로 백업 및 커밋을 진행하려고 이와 같이 진행했습니다.

여기까지가 5.0강좌 3분 30초 부근이네요.

 

이어서 "npm start"를 터미널에 입력하면 에러가 납니다.

오류코드를 복사하지 못햿는데요.

"avj" 패키지에 오류가 있어서 이 패키지를 재설치 해보았습니다.

명령어는 아래 순서로 진행했습니다.

npm install

npm install ajv@^8.0.0 --save

npm install ajv-keywords@^5.0.0 --save

 

그리고 최종 확인을 위한 "npm start" 명령어 실행하면

정상적으로 서버 진행, 기동이 되었음을 확인할 수 있었습니다.

기본적이 설정, 설치 후 기초 서버 설정을 마무리하였습니다.

이어서 다음 강좌와 블로그 글을 남겨 놓아볼게요.