npm install 에러 해결하다가 package-lock.json의 중요성을 알아버린건 대하여

제목이 무슨 웹소설같지만🙄, 

결론은 오늘 npm 설치 에러를 해결하다가 npm 설치 해결 후 dependency 버전 문제에 고생을 좀 했다. 

 

회사에서 사이드프로젝트를 마무리하는 중이다. 원격연결시 폰트깨짐 문제 때문에 (이상하게 vscode에서 심해서) FE는 개인 로컬 PC에서 개발하고 있었는데, 이제는 api랑 연결해서 조회도 해보고 저장 로직도 구현해야하는 시점이 와버렸다. 그래서 회사 원격 PC에 UI를 딱~ 실행해서 api 테스트를 좀 하려고 했다.

 

 

---

npm run serve가 안된다.

아 npm install이 안됐나보다, npm install을 실행하니

 

어맛 오류가? npm install 에러하면 가장 많이 나오는 ELIFECYCLE 에러였다. 캐시 지우고 .node_modules 지우고 package-lock 딱 지우고 npm install을 했다. 

 

역시 이전에 다른 repo에서 돌렸던 문제였어. 회사 원격 PC는 또 얼마나 느린지 열심히 티비보며 설치되기를 기다렸다가 딱 

localhost:8080 접속. 잘 되는 것 같네. 조회 화면 들어갔는데

 

어? 그리드에서 무한로딩?

옆에 이상한 버튼? 같은게 떠있길래 들어가보니 wijmo license를 살래요?

---

지금은 xxx 버전을 쓰는데 yyy 버전으로 돌리고 있다는겨,,, 라이센스 구입할래? 이러는데 멘탈이 파사삭. 조금 많이 고생했다😥 원인을 찾는데도 오래걸리고, 해결하는데도 오래걸렸다. 몇 번 npm install 을 했는데.. 느렸다,, 😤😤 

 

결론적으로는, 지워버린 package-lock에 wijmo의 다른 버전(= 라이센스가 없는)이 매핑되었다. package.json에 @grapecity/wijmo.all 이랑 @grapecity/wijmo.vue.all 이랑 모두 맞는 버전이 매핑되어있어서 당연히 package-lock에도 제대로 된 버전이 설정된건줄 알았다. 

 

https://hyunjun19.github.io/2018/03/23/package-lock-why-need/

package-lock.json은 왜 필요할까?

 

위 포스트에 따르면 '저 package.json 파일로 npm install을 실행하면 현재는 4.16.3 버전이 설치되지만 express의 새로운 minor, patch가 publish 되면 동일한 package.json 파일로 npm install을 실행해도 4.17.3, 이나 4.16.4 같은 업데이트된 버전이 설치됩니다.' 라는 문구가 있다. 딱 저대로, 다른 버전이 install 되었다. 이렇게 하나를 또 배워간다. 

 

'package-lock.json 파일은 의존성 트리에 대한 정보를 가지고 있으며 package-lock.json 파일이 작성된 시점의 의존성 트리가 다시 생성될 수 있도록 보장합니다.'  라고 적혀진 문구가 package-lock.json의 존재 이유(?)이다. package-lock.json의 중요성을 라이센스 버전으로 깨달았다.

 

해결 방법은 간단했다. package-lock.json을 다시 git에서 따오고 (그냥 변경 취소 했다) npm install을 해주면 끝.

이 간단한 문제로 2시간정도 고생한 듯 하다.

 

오늘의 요약 : package-lock.json 중요하다