[react] yarn start 작동 에러

❌ 에러 상황

리액트에서 차트 라이브러리 사용을 위해 다음 명령어를 실행했다.

npm install --save chart.js react-chartjs-2

지금까지 yarn을 통해 라이브러리 설치를 하다가 npm을 이용해 설치를 했더니 갑자기 yarn start에서 에러가 발생한다.

✅ 해결 방법

yarn config set registry https://registry.npmjs.org
rm yarn.lock
yarn

✔ yarn과 npm은 자바스크립트 패키지 관리자이지만, 각각의 lock파일 관리 방식에 차이가 있다.

yarn add를 사용하여 패키지를 설치하면, yarn은 yarn.lock 파일을 업데이트하고, 패키지들을 자체적인 캐시 디렉토리에 저장한다. 이로써 프로젝트의 의존성 버전이 일관되게 유지한다.

npm install 명령어를 실행하면, npm은 자체적인 package-lock.json 파일을 생성하고, 자체적인 캐시 디렉토리에 의존성을 설치한다.

yarn과 npm은 서로 다른 lock 파일 및 캐시를 사용하고 있기 때문에, 이러한 혼합된 사용은 프로젝트의 일관성을 해치게 할 수 있다.

✔ 위의 명령어는 yarn의 registry를 npm registry로 설정하고 yarn.lock 파일을 삭제한 것이다. 이로써 yarn은 npm registry에서 패키지 정보를 가져오고, lock 파일을 다시 생성한다.

그렇기 때문에 yarn start가 정상적으로 작동한 것 이다.

앞으로 프로젝트를 관리할 때 'yarn' 또는 'npm' 중 하나를 선택하여 일관적으로 사용하는 것이 좋다.