넷플릭스 웹페이지에서 영화 카드에 마우스 호버를 하면 나타나는 모달 창을 구현하고자 한다
이때, 모달 관련 npm 패키지를 설치하고자 하였고
VSC에서 설치를 시도하니 아래와 같은 에러 메시지가 출력되었다
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react_netflix_jb@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0 || ^17.0.0" from react-modal-hover@1.1.13
npm ERR! node_modules/react-modal-hover
npm ERR! react-modal-hover@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\eyela\AppData\Local\npm-cache\eresolve-report.txt for a full report.트리 의존성과 관련하여 무언가 에러가 발생했다는 것 같았고, 강제로 설치하거나 레거시 방식으로
설치하라는 에러 메시지 같았다. 프로그래밍에서 강제한다는 것은 매우 꺼림직한 일인 것 같아
다시 설치를 시도하기 전, 위 에러 메시지가 출력된 원인을 알아보았다.
❓guess
설치하려는 npm package인 react-modal-hover@1.1.13 버전은
react@"^15.0.0 || ^16.0.0 || ^17.0.0" 버전과 호환이 되도록 만들어져 있는데
현재 사용하는 react 버전은 18.2.0 이라서 npm package와 react의 상호 의존이 안되는 문제라고 생각하였다.
❓--legacy-peer-deps ?
peerDependencies: In some cases, you want to express the compatibility of your package with a host tool or library, while not necessarily doing a require of this host. This is usually referred to as a plugin. Notably, your module may be exposing a specific interface, expected and specified by the host documentation.
피어 종속성: 경우에 따라서는, 호스트 도구나 라이브러리와 패키지의 호환성을 나타내려고 하지만 반드시 이 호스트를 요구하지는 않습니다. 일반적으로 이를 플러그인이라고 합니다. 특히, 모듈이 호스트 설명서에서 예상되고 지정된 특정 인터페이스를 노출하고 있을 수 있습니다.
출처 : docs.npmjs.com 공식 문서
번역기를 돌리다 보니, 설명을 읽어도 명확히 이해가 되지 않아 조금 더 쉽게 풀어놓은 글들을 찾아 보았고,
"peerDependencies란 실제로 패키지에서 require나 import 하지는 않지만, 특정 라이브러리나 툴에 호환성을 필요로 할 경우에 명시하는 dependencies이다"
라는 것을 알 수 있었다.
npm3 부터 6까지는 peerDependencies가 자동으로 설치되지 않았고, 설령 버전이 맞지 않더라도 경고 문구만
출력이 되었는데, npm 7 부터 peerDependencies가 기본으로 설치되고, 이 버전이 맞지 않으면 에러도 발생한다고 한다. 현재 나의 npm 버전은 8.11.0 버전이며, react의 버전은 18.2.0 버전이다.
npm 7 이상의 버전을 사용중이기 때문에, peerDependencies가 자동으로 설치되었고,
설치하려는 npm package의 peer는 react 15 || 16 || 17 버전인데
현재 사용중인 react의 버전은 18 이기 때문에 위와 같은 피어 의존성 오류가 발생하는 것이었다.
❗solve
에러 메시지에서 친절히(?) 안내 해주는 방식으로
- 의존성을 무시하고 강제로 설치한다
- --legacy-peer-deps 명령어를 사용하여 React와 React-Dom 의 버전을 라이브러리 버전에 맞춰
다운그레이드를 한다
위 2가지의 선택지가 있었고, 2번 선택지의 경우, 기존에 작성해둔 코드들과 다른 npm package에 영향이 갈 수도 있겠다고 생각하여 1번의 강제 설치를 하도록 결정하였다.
사실, 모달 기능을 직접 구현하는 것이 제일 좋은 방법이고
그 다음으로는 보다 더 업데이트가 활발한 npm package를 이용하는 방법이 차선이라고 생각한다.
이번 에러를 해결하고 테스트 해 본 뒤에, 모달 기능은 다시 직접 구현하는 방식으로 풀어가고자 한다.
