npm 오류 멈춰!! 🖐️

정말 정말 뒤늦게 .. GDSC에서 스터디로 진행했던 페이지 배포를 마무리지었다. 최종 목표가 프로젝트를 마무리짓고 github 페이지로 배포를 마무리하는 것이었기 때문에 배포를 하려고 Npm 세팅을 이것저것 마무리하려고 조금 고생을 했다.

2022년 9월에 시작한 프로젝트이기도 하고 해서, node나 React버전이나 다른 패키지 등등도 버전이 맞지 않는 것이 많아서 gh page 패키지를 까는 데에도 정말 많은 시간이 들었다.
이번 글에서는 내가 마주쳤던 Npm 세팅 오류들과 그에 대한 해결 방법을 작성하고자 한다.

1. 버전 오류

먼저, github페이지로 배포하기 위해서는 배포를 위한 gh page 패키지를 설치해주어야 한다.

npm install --save gh-pages

하지만 설치를 하기만 하면, 아래와 같은 오류가 발생했다.

내가 사용하고 있는 것은 React 버전 18.2.0 이었는데, 내가 사용하고 있는 패키지들이 React 버전과 맞지 않아서 오류가 계속 발생하였다.
위 사진은 버전 오류 예시 화면이다.

예시 화면에서 보이듯이, react-virtualized 와 같은 패키지는 특정 React 버전을 요구하는데 react가 가지고 있는 패키지는 이와 맞지 않아서 발생하는 것이다. 오류 메시지를 보면 보라색으로 하이라이트 되어 peer 라고 작성된 부분이 있다. 이것은 바로 peerDependencies라는 건데, 나의 패키지가 다른 패키지의 특정 버전과 호환된다는 것을 뜻한다.

처음에는 해당 패키지와 버전을 맞추기 위하여 아래 명령어를 통하여 해결을 해 보려고 하였다.
npm install react@^16.8.0 react-dom@16.8.0
하지만, 이렇게 버전을 강제로 맞출 수록 다른 패키지에 대한 버전이 다시 꼬이게 되고, 의존성을 마음대로 변경했다가는 react-dom에 대한 의존성도 모두 꼬이게 되어서 참 골치가 아프게 된다...🥹

그럼 어떻게 이 문제를 해결할 수 있을까?

npm6 버전까지는 이러한 현상에 대하여 Warn메세지만 보였는데, 이제 7버전부터는 peer dependencies 자동 설치가 진행되어, 맞지 않는 패키지에 대하여 실제 에러메세지를 반환하기 때문에 참 해결하기 힘든 것 같다. 그래도 해결을 해야 다음 단계로 넘어갈 수 있으니 꼭 정리해야 하는 문제이다.

해결 방법은 두가지로 정리할 수 있겠다.
1. --force 명령어를 이용한다.
2. --legacy-peer-deps 명령어를 이용한다.

그럼 두가지 명령어의 차이점은 무엇이며, 그 둘은 어떤 기능을 하고 있을까?
먼저, --force 명령어에 대한 정리이다.

force를 사용하게 되면 충돌을 우회시킬 수 있는데, peer dependency들을 루트 프로젝트에 설치하여 에러를 해결한다. 필요한 경우 패키지 의존성을 위해 추가적인 패키지를 설치할 수 있다.

다음으로, --legacy-peer-deps 명령어는 어떤 역할을 하는지 알아보자.

peerDependency가 맞지 않아도, 그것을 무시하고 설치한다.

보통 --force를 사용하였을 때, 더 필요한 의존성을 추가로 설치해주기 때문에 먼저 force 를 이용하여 설치를 시도해 보고, --legacy-peer-deps 를 사용하여 설치를 시도해 보는 것도 좋다.
나는 후자를 이용하여 성공적으로 gh-page 패키지를 설치 완료하였다.

2. envelope unsupported !

설치를 잘 하고, npm run deploy 를 하니 이런 에러를 마주쳤다.
다른 에러들을 만나 이미 너덜너덜해져 있었던 나는 그만..🤷‍♀️
그래도 이 산을 넘어야 한층 더 단단해지는 것 아니겠으요 🕵️ 하고 씩씩하게 또다시 에러를 해결하러 출발했다..

처음에 여러 블로그들을 다 읽어보았을 때에는 Node의 버전이 너무 높아서 이를 다운그레이드 해야지 해결할 수 있다는 말이 많았다.
하지만 현재 사용하고 있는 Node 버전은 LTS이기도 하고,(스택오버플로우 개발자들도 LTS 버전 노드를 사용하라고 했다!) 만약 다운그레이드를 한다고 해도 어느 버전까지 내가 버전을 내려야 하는지 잘 모르겠기 때문에 막막한 생각이 들었다.

그럼 해결하기 위한 근본적인 원인을 탐색해보자.

그것은 바로 노드 17, 18로 업데이트가 되면서 OpenSSL과의 통신에 있어 바뀐 점이 많기 때문이다. 그래서 노드 16버전으로 롤백해서 해결한 분들이 많은 것 같은데.. 노드 18을 사용하여 이 문제를 해결하고 싶었다.

아래 글은 stackoverflow에서 발췌한 글이다.

In Node.js v17, the Node.js developers closed a security hole in the SSL provider. This fix was a breaking change that corresponded with similar breaking changes in the SSL packages in NPM. When you attempt to use SSL in Node.js v17 or later without also upgrading those SSL packages in your package.json, then you will see this error.

SSL패키지가 package.json에서 최신 상태가 아닐 때에서 SSL을 사용하려고 하면 에러를 발생시킨다는 것이다. 보안에 관련된 최신 버전을 이용하면 해당 에러를 해결할 수 있다.
그래서 내가 선택한 해당 에러 해결법은 아래 명령어를 이용하는 것이다.

npm audit fix --force

npm audit fix를 사용하면 내가 사용하고 있는 패키지에 대하여, 취약점을 가진 종속성을 호환되는 버전으로 자동으로 업데이트를 해주는 것이다. 실제로 해당 명령어를 입력하니, React-script 의 버전은 5.0.1 로 업데이트 되고, 문제 없이 deploy를 진행할 수 있었다. 이로 인해 존재하던 보안 이슈들을 해결할 수 있었다 😆

오늘의 결론.

yarn을 쓰자!

출처

Github npm 페이지
Peer Dependencies에 대하여