[에러해결🪄 ] Error: error:0308010C:digital envelope routines::unsupported : Node 버전 맞춰주기

에러발생

Error: error:0308010C:digital envelope 에러

도서 [ 웹 개발 스킬을 한 단계 높여 주는 프론트엔드성능 최적화 가이드 ] 를 공부 중인데, 

책에서 주어진 깃 레포를 클론 받고 npm run start를  하자마자 아래와 같은 에러가 떴다. 

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/webpack/lib/NormalModule.js:417:16)
    at /Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/webpack/lib/NormalModule.js:452:10
    at /Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/webpack/lib/NormalModule.js:323:13
    at /Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/choijungyoon/Desktop/webdev/FE-optimize/lecture-1/node_modules/babel-loader/lib/index.js:55:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

다행히 해당 깃허브의 Issue에서 나와 같은 에러를 겪은 사람이 남긴 질문이 있어 에러에 대한 원인을 알 수 있었다. 

원인은 node의 버전 호환 문제였다. 

node 16버전으로 맞추면 해결되는 것이었다. 

node 버전을 맞추는 것을 몇번 해봤지만, 제대로 정리하지 못한 것 같아 이번 기회에 포스팅하여 정리하게 되었다.

---

노드 버전을 관리하는 가장 일반적인 방법은 nvm을 사용하는 것이다. 

nvm이란?

"Node Version Manager"의 약자로, Node.js의 여러 버전을 쉽게 설치하고 관리할 수 있게 해주는 버전 관리 도구이다.

이 도구는 특히 여러 Node.js 프로젝트를 다룰 때 유용하며, 각 프로젝트에 필요한 Node.js의 특정 버전을 사용할 수 있게 해준다.

nvm 설치 (mac)

$curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

설치된 노드 버전 리스트 확인

$nvm list

노드 버전 변경

아래와 같이 변경하고자 하는 버전을 바꿔주면 된다.

하지만 이러면 모든 프로젝트에 사용되는 노드 버전이 바뀌기 때문에, 

프로젝트 별로 사용하는 노드 버전을 다르게할 경우 따로 설정이 필요하다. 

$nvm use 00.00

 

프로젝트 별 노드 버전 설정하기 (feat. .nvmrc)

.nvmrc 파일 생성

먼저, 프로젝트의 루트 경로에서 .nvmrc 파일을 생성한다.

그러고 나서 사용하고자 하는 노드 버전을 입력한다.

노드 버전 적용

그리고 프로젝트에서 터미널을 새로 열고, 노드 버전을 적용시켜준다.

$nvm use

 

노드 버전 확인

$node -v

노드 버전을 확인해보면, 설정한 대로 변경된 것을 확인할 수 있고,

해당 프로젝트가 아닌 다른 프로젝트에서는 원래 사용중이던 node 버전이 그대로 유지되는 것을 확인할 수 있다.