package 버전, yarn.lock 파일과 함께 고생한 이야기❗️⚠️

목차

1.  패키지 주소 404 Not Found error

2. EPERM: operation not permitted in Yarn

3. @types/node  버전

4. yarn.lock 파일이 무엇인지

 

 

1.  패키지 주소 404 Not Found error

라이브러리 버전 때문에 일주일 내내 고생했다. (매일 일하는 내내 고생한 건 아니고, 중간 중간 고생했다..ㅎㅎ)

사건의 발단은 월요일에 안 쓰는 라이브러리가 있어서 그걸 제거한 것이었다. (Yarn remove 패키지명)
그리고 로컬에서 서버를 돌리고(yarn dev), 빌드할 때도 (yarn build)할 때도 잘 동작했다.

그런데 깃허브에 pr 을 올렸더니, 깃허브 액션이 잘 안 돌아갔다.
정확히 그 에러 문구를 적어둔 게 없는데, 대충 아래 문구였다.

An unexpected error occurred: "패키지 주소: Request failed \"404 Not Found\"".

그 에러 문구를 chatGpt에게 물어보니 이렇게 답했다.

안녕하세요! 발생한 오류에 대해 알려주셔서 감사합니다. 이 오류는 npm 레지스트리에서 "@cnakazawa/watch" 패키지의 버전 "1.0.4"의 다운로드에 실패했다는 것을 나타냅니다. "404 Not Found" 오류는 해당 버전의 패키지가 npm 레지스트리에 존재하지 않는다는 것을 의미합니다.

이러한 오류는 일시적인 문제일 수도 있습니다. 네트워크 연결이 안정적이고, npm 레지스트리가 정상적으로 작동하는지 확인하는 것이 좋습니다. 또한, "@cnakazawa/watch" 패키지의 최신 버전이 있는지 확인해보실 수도 있습니다. 가장 최신 버전이 이미 설치되어 있다면, 해당 오류는 무시하셔도 됩니다.

만약 이 문제가 지속된다면, 해당 패키지의 개발자에게 문의하여 추가 도움을 받을 수 있습니다. 이를 위해서는 패키지의 GitHub 저장소 또는 개발자의 연락처를 확인하시면 됩니다.

저는 이 문제를 해결하는 데 도움이 되었기를 바랍니다! 추가 질문이 있으시면 언제든지 물어보세요.

그 라이브러리를 npm에서 검색해보니 존재했고, 버전도 1.0.4였다.
구글링을 좀 더 해보니 스택오버 플로우에서 나와 비슷한 문제를 겪으신 분이 있었다.

yarn.lock 파일에 문제가 있는 것이니, rm yarn.lock으로 파일을 제거한 후에 yarn으로 라이브러리를 설치하라고 하셨다.
나도 그렇게 하니 일단은 문제가 해결됐다 !

 

 

2. EPERM: operation not permitted in Yarn

아 그리고 중간에 겪은 문제가 하나 있다.

An unexpected error occurred: "EPERM: operation not permitted in Yarn.

이것도 스택오버 플로우에서 답을 얻었다. 서버를 돌리면서 (yarn dev) 라이브러리를 설치(yarn)해서 그런 것이었다. 서버를 끄고 설치하니 잘 됐다. package.json에 따라 패키지들이 설치됐다.

 

3. @types/node  버전

그러고 나서 빌드를 돌려보니 에러가 발생했다.

검색해보니 깃허브에 이슈가 있었다. @types/node 버전을 업데이트하면 된다고 해서 그렇게 했다 !

 

 

4. yarn.lock 파일이 무엇인지

이런 일을 겪으면서 yarn.lock 파일의 중요성에 대해 알게 됐다.

yarn.lock 파일에 대해 간단히 정리해봤다.
패키지 관리는 package.json으로 한다는 것은 많은 사람들이 알고 있을 것이다.  yarn install을 하면 package.json 파일에 쓰여있는 대로, 패키지들이 다운받아 설치가 되고 node_modules 폴더 안에 저장이 된다. node_modules 폴더 안의 파일은 보통 .gitignore 에 등록되어 있어서 원격 저장소에 저장하지 않는다.  (왜 그러는지 궁금해서 검색해보니 1. 용량이 크고 2. package.json을 이용하면 되기 때문이라고 한다.) 

그런데 package.json파일로 패키지 관리를 하면 되는데 yarn.lock 파일은 또 뭘까?

package.json의 일부를 가져왔다. (내가 개인적으로 리액트 강의 듣던 프로젝트..ㅎㅎ)

{
  "name": "my-todo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-typescript": "^7.21.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.4.0",
    "@types/node": "^18.14.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/parser": "^5.53.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.3"
  	}
  }

보면 ^ 표시가 있다.  ^은 캐럿이라고 하는데(대박 세븐틴 팬클럽 이름도 캐럿인데..💕), 하위 호환성이 유지되는 범위 내에서 업데이트가 되는 것이다. (보통 버전을 1.2.3 이런 식으로 점 두개를 사용해서 표시한다. 각각 major한 변화(하위 호환 안될 정도로), 기능 추가, 버그 픽스 같이 더 마이너한 변화다. 즉 ^ 은 major 버전은 유지되는 한에서 업데이트한다는 것이다.) 

그러니까 package.json만 있으면 협업하는 개발자끼리 정확히 동일한 버전을 공유하지 못할 수도 있는 것이다. 나는 한 달 전에 A 라이브러리를 1.5.0으로 설치했고, 그 사이에 마이너한 업데이트들이 있었다면 오늘 설치하는 동료 개발자는 1.9.9로 설치하게 될 수 있다. 

그래서 yarn.lock 파일을 이용해서 딱 그 버전을 설치할 수 있게 한다. 그러니 처음에 git에 꼭 올려야 한다. 또한  yarn 명령어를 이용해서 패키지를 삭제, 추가, 수정하면 yarn.lock 파일도 자동으로 바뀌기 때문에, 따로 수정하지 않아도 되고 않아야 한다! 

 

참고 자료

https://umanking.github.io/2022/05/05/yarn-lock/

yarn.lock 파일(잠금파일)은 무엇이고 어떤 기능을 하는가?

https://www.daleseo.com/js-package-locks/

패키지 잠금 파일 (package-lock.json, yarn.lock)