[npm] install 무한로딩 해결

 

vue 프로젝트 작업 진행 중에 'axios'설치 시, 무한 로딩에 빠지게 되었다. 이 문제점을 해결하며 그 방법에 대해 정리하였다. 

 

1. 현상

npm install axios 및 npm uninstall axios명령어에 대하여 터미널창에 아래와 같은 상태 메세지만 표출되며 더 이상의 진행사항이 없었다. 

[#########.........] / idealTree:vue: timing idealTree:#root Completed in 2265ms

 

위 메세지는 설치 및 삭제 상태에 대한 메세지 이며, 그 의미는 완료 상태가 아닌 진행 상태라는 것이다.

 

---

 

 

2. 시도

해당 문제를 해결하기 위해 아래와 같은 시도를 하였다.

• 개발 툴 재부팅 -> 실패
• PC 재부팅 -> 실패
• package-lock.json 삭제 후 npm install 진행

 

---

 

 

3. 해결

프로젝트 내 포함된 package-lock.json을 삭제(만일을 위해 원본 백업)후 npm install으로 package-lock.json재생성을 진행한 뒤, npm install axios 명령어를 실행하니 정상적으로 수행된 모습을 확인할 수 있었다.

 

package.json은 의존성 패키지들과 그 버전들을 한 눈에 확인할 수 있는 파일인 것으로 인지하고 있었는데, package-lock.json은 무슨 파일인지 놀랍게도 단 한 번도 궁금하지 않았었다. 하지만 지금 와서 해결된 이유를 생각해보려 하니 무슨 파일인지 이해하는게 중요해 보였다.

 

두 json파일은 모두 의존성 패키지들을 관리하는 파일임에는 분명하나, package.json의 한계를 극복하기 위해 제안된 파일인 것으로 이해하면 편하다. 그럼 package.json의 한계가 무엇인지 아래 인용된 단락을 통해 이해해보자.

 

 

package.json의 한계

규모가 큰 프로젝트의 경우, 여러 명의 개발자들이 동일한 개발 환경을 가지는 것이 중요하다. 이때, package.json만으로는 부족할 때가 있다. npm 모듈의 semantic versioning(semver) 기반 범위 지정 방식 때문이다. semver 에서는 [Major].[Minor].[Patch] 와 같은 방식으로 버저닝이 구성된다. 이때, 버전 정보 앞에 기호를 부여하여 업데이트 범위를 지정할 수 있는데, 기술 방식은 다음과 같다. 

표기법	Description
version	명시된 version과 일치
>version	명시된 version보다 높은 버전
>=version	명시된 version과 같거나 높은 버전
<version	명시된 version보다 낮은 버전
<=version	명시된 version과 같거나 낮은 버전
~version	명시된 version과 근사한(?) 버전. 패치 버전 범위 내에서 업데이트한다.  ex) ~0.0.1: 0.0.1 ≤ version < 0.1.0 ex) ~0.1.1: 0.1.1 ≤ version < 0.2.0
^version	명시된 version과 호환되는 버전. 마이너 버전 범위 내에서 업데이트한다. ex) ^1.0.2: 1.0.2 ≤ version < 2.0

따라서 A 패키지에 대해 ^1.2.3 이라고 package.json에 설정해 둔다면, 내 로컬에는 실제로 1.2.4가 설치될 수도 있고 1.3이 설치될 수도 있게 된다. 그렇다면 여러 명의 개발자가 협업할 때, 또는 배포 환경에 실제로 배포가 될 때 설치되는 버전을 명확하게 알 수 없는 문제가 있다. 나와 내 동료가 같은 버전을 사용한다는 보장이 없게 되는 것이다. 유동적인 상황이 발생하는 과정에서도 개발 환경에서 발생하는 의존성 버전 정보를 고정시키기 위해 필요한 것이 바로 package-lock.json이다. 

 

본인의 경우, 어떠한 시점에서 package-lock.json파일이 손상되었거나 무결성이 제거되었으며 그로 인해 npm install axios명령어 수행에 차질이 있던 것으로 추측된다.

 

때문에 해당 문제를 손상된 package-lock.json교체를 통해 개선한 것이라고 사료된다.

 

혹시 package-lock.json에 대해 조금 더 이해하고 싶다면 아래 첨부된 블로그 게시물의 링크를 확인해볼 수 있겠다.

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

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

 

 

---

 

해당 게시물 포스팅에 참고한 블로그 링크를 첨부하였다.

https://bo5mi.tistory.com/195

npm install 오류 발생 시, 해결 방안