--legacy-peer-deps와 --force 차이점

이윤희·2025년 1월 30일

React/Next 일기

목록 보기

33/52

npm error code ERESOLVE

배경

여태 서울에서 노트북으로 개발하다가 본가에 내려와서 데스크탑에서 PULL했다.

1. PULL 에러

error: cannot lock ref 'refs/remotes/origin/master': is at fb9a6b16a352939b7401a8223a5f752bf02a98c8 but expected d0df7ce2b5eb611a5881d1a75dbe1229cca606e9
From https://github.com/unizazang/shop
 ! d0df7ce..fb9a6b1  master     -> origin/master  (unable to update local ref)

처음에 git pull 했는데 뭔가 에러가 떠서
git pull origin master 해봤는데 이제 된다.

>git pull origin master
From https://github.com/unizazang/shop
 * branch            master     -> FETCH_HEAD
Updating d0df7ce..fb9a6b1
Fast-forward

 11 files changed, 1154 insertions(+), 124 deletions(-)

2. 컴파일 에러

그러고 나서 별 생각 없이 npm start를 했는데 컴파일 에러가 떴다.

Failed to compile.

Module not found: Error: Can't resolve 'axios' in 'D:\다운로드\공부\shop\shop\src'
WARNING in [eslint]
src\routes\Detail.js
  Line 163:5:   Unreachable code
                                                      no-unreachable
  Line 190:8:   'count' is assigned a value but never used
                                                      no-unused-vars
  Line 190:15:  'setCount' is assigned a value but never used
                                                      no-unused-vars
  Line 222:17:  Expected '===' and instead saw '=='
                                                      eqeqeq
  Line 246:11:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images       
                                                      jsx-a11y/alt-text
  Line 306:5:   React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies  react-hooks/exhaustive-deps
ERROR in ./src/App.js 9:0-26
Module not found: Error: Can't resolve 'axios' in 'D:\다운로드\공부\shop\shop\src'

ERROR in ./src/index.js 10:0-39
Module not found: Error: Can't resolve 'react-redux' in 'D:\다운로드\공부\shop\shop\src'

ERROR in ./src/routes/Cart.js 6:0-55
Module not found: Error: Can't resolve 'react-redux' in 'D:\다운로드\공부\shop\shop\src\routes'

ERROR in ./src/store.js 11:0-63
Module not found: Error: Can't resolve '@reduxjs/toolkit' in 'D:\다운로드\공부\shop\shop\src'

webpack compiled with 4 errors and 1 warning

읽어보니 전에 설치했던 라이브러리들이 이 데스크탑 폴더에는 설치가 안 되어있어서 그런 것 같다.

이럴 때 npm i를 했던 기억이 있어서 npm i를 했는데, 또 에러가 떴다.

3. npm error code ERESOLVE

PS D:\다운로드\공부\shop> npm i
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @reduxjs/toolkit@1.8.1
npm error Found: react-redux@9.2.0
npm error node_modules/react-redux
npm error   react-redux@"^9.2.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peerOptional react-redux@"^7.2.1 || ^8.0.0-beta" from @reduxjs/toolkit@1.8.1
npm error node_modules/@reduxjs/toolkit
npm error   @reduxjs/toolkit@"^1.8.1" from the root project
npm error
npm error Conflicting peer dependency: react-redux@8.1.3
npm error node_modules/react-redux
npm error   peerOptional react-redux@"^7.2.1 || ^8.0.0-beta" from @reduxjs/toolkit@1.8.1
npm error   peerOptional react-redux@"^7.2.1 || ^8.0.0-beta" from @reduxjs/toolkit@1.8.1
npm error   node_modules/@reduxjs/toolkit
npm error     @reduxjs/toolkit@"^1.8.1" 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 C:\Users\sister\AppData\Local\npm-cache\_logs\2025-01-30T15_54_36_112Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\sister\AppData\Local\npm-cache\_logs\2025-01-30T15_54_36_112Z-debug-0.log
PS D:\다운로드\공부\shop\shop>

라이브러리들의 호환성이 맞지 않아 설치가 안 된다는 것 같다.
구글링해보니, 세 가지 정도 해결 방법이 있다고 한다.

package.json 에서 라이브러리 버전을 호환되는 버전으로 맞춘다

--save --legacy-peer-deps

npm install --force

읽어보니 2번은 기존 버전을 무시하고 설치한다고 하고, 3번은 강제 설치라고 하는데?? 그거 두개가 무슨 차이가 있는지 모르겠어서 GPT한테 물어봤다.

GPT

세 가지 방법 모두 의존성 충돌을 해결하기 위한 방식이지만, 접근 방식이 다릅니다. 하나씩 설명하고, 차이점을 비교해보겠습니다.

1️⃣ `package.json`에서 호환되는 버전으로 수정 후 설치

📌 설명

직접 package.json을 열어, 충돌이 발생하는 라이브러리들의 버전을 호환되는 버전으로 맞춘 후 npm install을 실행하는 방법입니다.
예를 들어, @reduxjs/toolkit@1.8.1이 react-redux@7.2.1 || ^8.0.0-beta를 필요로 하는데, 현재 react-redux@9.2.0이 설치되어 있다면:
- react-redux의 버전을 8.1.3 이하로 맞춰줍니다.
- package.json을 열어 다음과 같이 수정:
```
"dependencies": {
  "@reduxjs/toolkit": "^1.8.1",
  "react-redux": "^8.1.3"  // 9.2.0 → 8.1.3으로 변경
}
```
- 그런 다음 npm install을 실행하여 충돌 없이 설치합니다.

✅ 장점

✔ 충돌을 근본적으로 해결하는 가장 안전한 방법
✔ 예상치 못한 버그 발생 가능성이 낮음

❌ 단점

✖ 수동 작업이 필요 → 어떤 버전이 호환되는지 직접 확인해야 함
✖ 일부 패키지의 기능이 최신 버전과 다를 수도 있음

2️⃣ `npm install --legacy-peer-deps`

📌 설명

의존성 충돌이 발생할 경우, 충돌을 무시하고 설치하는 옵션
npm v7부터 peer dependencies(상호 의존성)에 대해 엄격한 검사를 진행하는데, 이 옵션을 사용하면 npm v6처럼 동작하게 만듭니다.
즉, package.json의 peer dependencies를 무시하고 설치를 강제합니다.

사용법:

npm install --legacy-peer-deps

✅ 장점

✔ 직접 package.json을 수정할 필요 없이 빠르게 해결 가능
✔ 충돌로 인해 npm install이 중단될 때 즉시 해결 가능

❌ 단점

✖ 근본적인 해결이 아니라 문제를 "임시로" 무시하는 방식
✖ 예기치 못한 버그 발생 가능성 있음
✖ 장기적으로 보면, 업데이트 시 다시 충돌이 발생할 가능성이 높음

3️⃣ `npm install --force`

📌 설명

강제(force)적으로 설치하는 방법
의존성 충돌을 무시하고, 필요한 패키지를 무조건 설치하는 옵션
package.json의 peer dependencies를 강제로 덮어쓰고 설치합니다.

사용법:

npm install --force

✅ 장점

✔ 설치를 강제 실행하기 때문에 가장 빠르게 해결 가능
✔ --legacy-peer-deps로도 해결되지 않을 경우 사용할 수 있음

❌ 단점

✖ 위험성이 가장 큼 → 잘못된 의존성이 설치될 가능성이 높음
✖ 기존 패키지가 충돌을 일으킬 가능성이 있음 → 프로젝트가 예상대로 동작하지 않을 수도 있음
✖ npm update 또는 다른 패키지 설치 시 다시 문제가 발생할 수 있음

📌 세 가지 방법 비교 요약

방법	장점	단점	추천 상황
1. `package.json`에서 수동 수정	근본적인 해결, 안정적	수동 작업 필요	장기적으로 유지해야 할 프로젝트
2. `npm install --legacy-peer-deps`	빠르게 해결 가능, 기존 방식 유지	충돌을 무시하므로 예기치 못한 문제 발생 가능	비교적 안전한 빠른 해결책이 필요할 때
3. `npm install --force`	가장 빠른 해결 방법	가장 위험, 예상치 못한 충돌 가능성	`--legacy-peer-deps`도 실패할 경우 최후의 수단

🔥 최적의 해결 방법 추천

가능하면 package.json에서 직접 수정 후 설치 → 안정적
빠르게 해결하려면 --legacy-peer-deps 사용 → 안전성과 속도의 균형
그래도 해결이 안 되면 --force 사용 (최후의 수단) → 위험하지만 어쩔 수 없을 때

보통의 경우, npm install --legacy-peer-deps로 해결할 수 있습니다.
하지만 장기적으로는 package.json에서 버전을 맞추는 것이 가장 좋은 방법입니다. 🚀

--legacy-peer-deps와 --force 가 무슨 차이가 있나요?

GPT

좋은 질문입니다! --legacy-peer-deps와 --force는 둘 다 의존성 충돌을 무시하고 설치하는 방법이지만, 동작 방식이 다릅니다.
이 차이를 이해하려면 먼저 peer dependencies(동료 의존성)에 대한 개념을 이해하는 것이 중요합니다.

🔹 `peer dependencies`(동료 의존성)란?

peer dependencies는 특정 패키지가 "이 라이브러리를 함께 사용해야 해!"라고 요구하는 의존성입니다.
즉, 어떤 라이브러리가 제대로 동작하려면 특정 버전의 다른 라이브러리가 필요할 때 사용됩니다.

예를 들어:

@reduxjs/toolkit@1.8.1은 "react-redux가 버전 7.2.1 ~ 8.0.0-beta 사이여야 해!" 라고 요구합니다.
하지만 현재 프로젝트에 react-redux@9.2.0이 설치되어 있다면, 버전이 맞지 않아서 충돌이 발생합니다.

🚀 `--legacy-peer-deps`와 `--force`의 차이점

1️⃣ `npm install --legacy-peer-deps`

💡 "peer dependencies 충돌을 무시하지만, 기존 패키지 구조를 유지하면서 설치"

기존에 설치된 패키지들은 그대로 두고, 필요한 패키지만 추가 또는 업데이트합니다.
즉, 새로운 패키지가 기존 패키지의 요구 조건과 맞지 않더라도 그대로 설치합니다.
npm v6 방식처럼 동작하며, 기존 패키지를 건드리지 않기 때문에 상대적으로 안전합니다.

🔹 예제

@reduxjs/toolkit@1.8.1은 react-redux@9.2.0과 충돌하지만,
--legacy-peer-deps를 사용하면 그냥 설치를 진행합니다.
```
npm install --legacy-peer-deps
```
⚠ 하지만, react-redux@9.2.0이 실제로 @reduxjs/toolkit@1.8.1과 잘 동작하는지는 보장할 수 없습니다.
(이건 직접 실행해봐야 알 수 있습니다.)

2️⃣ `npm install --force`

💡 "강제로 덮어쓰면서, 의존성 규칙을 무시하고 전부 다시 설치"

충돌이 발생하면 기존에 설치된 패키지를 삭제하고, 새로운 패키지를 강제로 설치합니다.
즉, package.json에 적힌 버전과 상관없이, 의존성 충돌이 나더라도 무조건 덮어씁니다.
가장 강력한 해결책이지만, 가장 위험한 방법입니다.

🔹 예제

npm install --force

기존 node_modules 안에 있는 패키지가 삭제될 수도 있고,
package-lock.json도 변경될 가능성이 높으며,
특정 패키지가 호환되지 않는 버전으로 설치될 수도 있습니다.
(예를 들어 react-redux@9.2.0이 삭제되고, @reduxjs/toolkit이 요구하는 react-redux@8.1.3으로 강제로 변경될 수도 있음.)

🔥 차이점 정리 (비유 포함)

옵션	설명	비유 (건축 공사)	장점	단점
`legacy-peer-deps`	의존성 충돌을 무시하고 기존 패키지를 유지한 채 필요한 패키지만 설치	건물을 수리하면서 기존 구조를 유지하는 방식 (벽이 조금 안 맞아도 그냥 둠)	기존 패키지를 최대한 유지하면서 해결 가능	일부 기능이 예상과 다르게 동작할 수도 있음
`force`	충돌을 무시하고 강제로 모든 패키지를 덮어씀	건물을 부수고 새로 짓는 방식 (강제 철거 후 다시 건설)	설치 오류를 100% 해결	기존 패키지가 삭제될 수도 있으며, 예상치 못한 문제가 발생할 가능성이 높음

✅ 언제 어떤 걸 써야 할까?

🔹 우선적으로 `--legacy-peer-deps`를 사용하세요!

✔ 기존 패키지를 최대한 유지하면서 충돌을 무시하기 때문에 상대적으로 안전합니다.
✔ 대부분의 경우 이 옵션으로 설치가 잘 됩니다.
✔ 사용 방법:

npm install --legacy-peer-deps

🔹 `--legacy-peer-deps`로도 해결되지 않으면 `--force`를 사용하세요.

✔ 최후의 수단으로 사용해야 합니다.
✔ 기존 패키지가 삭제될 수도 있기 때문에, package-lock.json을 백업하는 것이 좋습니다.
✔ 사용 방법:

npm install --force

🚀 결론

1순위: npm install --legacy-peer-deps → 안전하게 충돌을 무시하고 설치
2순위: npm install --force → --legacy-peer-deps도 안 될 때 최후의 방법
가장 좋은 방법: package.json에서 충돌을 수정한 후 다시 npm install 🚀

즉, --legacy-peer-deps는 충돌을 그냥 무시하고 기존 구조를 유지하면서 설치하지만, --force는 강제로 기존 패키지를 덮어쓰고 재설치합니다.
가능하면 안전한 방법을 먼저 시도하고, 정말 안 될 때만 강제 설치를 사용하세요! 🔥

결과

Compiled successfully!

You can now view shop in the browser.

  http://localhost:3000

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

webpack compiled successfully

npm install --legacy-peer-deps 했더니 정상적으로 컴파일 됨!

이윤희

이전 포스트

Redux - action 파라미터 / 파일 분리하기

다음 포스트

--legacy-peer-deps와 --force 차이점

React/Next 일기

npm error code ERESOLVE

배경

1. PULL 에러

2. 컴파일 에러

3. npm error code ERESOLVE

GPT

1️⃣ `package.json`에서 호환되는 버전으로 수정 후 설치

📌 설명

✅ 장점

❌ 단점

2️⃣ `npm install --legacy-peer-deps`

📌 설명

✅ 장점

❌ 단점

3️⃣ `npm install --force`

📌 설명

✅ 장점

❌ 단점

📌 세 가지 방법 비교 요약

🔥 최적의 해결 방법 추천

GPT

🔹 `peer dependencies`(동료 의존성)란?

🚀 `--legacy-peer-deps`와 `--force`의 차이점

1️⃣ `npm install --legacy-peer-deps`

2️⃣ `npm install --force`

🔥 차이점 정리 (비유 포함)

✅ 언제 어떤 걸 써야 할까?

🔹 우선적으로 `--legacy-peer-deps`를 사용하세요!

🔹 `--legacy-peer-deps`로도 해결되지 않으면 `--force`를 사용하세요.

🚀 결론

결과

Redux - action 파라미터 / 파일 분리하기

dispatch / state 변경

0개의 댓글

--legacy-peer-deps와 --force 차이점

React/Next 일기

npm error code ERESOLVE

배경

1. PULL 에러

2. 컴파일 에러

3. npm error code ERESOLVE

GPT

1️⃣ package.json에서 호환되는 버전으로 수정 후 설치

📌 설명

✅ 장점

❌ 단점

2️⃣ npm install --legacy-peer-deps

📌 설명

✅ 장점

❌ 단점

3️⃣ npm install --force

📌 설명

✅ 장점

❌ 단점

📌 세 가지 방법 비교 요약

🔥 최적의 해결 방법 추천

GPT

🔹 peer dependencies(동료 의존성)란?

🚀 --legacy-peer-deps와 --force의 차이점

1️⃣ npm install --legacy-peer-deps

2️⃣ npm install --force

🔥 차이점 정리 (비유 포함)

✅ 언제 어떤 걸 써야 할까?

🔹 우선적으로 --legacy-peer-deps를 사용하세요!

🔹 --legacy-peer-deps로도 해결되지 않으면 --force를 사용하세요.

🚀 결론

결과

Redux - action 파라미터 / 파일 분리하기

dispatch / state 변경

0개의 댓글

1️⃣ `package.json`에서 호환되는 버전으로 수정 후 설치

2️⃣ `npm install --legacy-peer-deps`

3️⃣ `npm install --force`

🔹 `peer dependencies`(동료 의존성)란?

🚀 `--legacy-peer-deps`와 `--force`의 차이점

1️⃣ `npm install --legacy-peer-deps`

2️⃣ `npm install --force`

🔹 우선적으로 `--legacy-peer-deps`를 사용하세요!

🔹 `--legacy-peer-deps`로도 해결되지 않으면 `--force`를 사용하세요.