git clone 후 npm install 했을 때 package lock.json이 변경되는 문제 해결하기
스터디에서 기존에 진행하고 있던 팀 프로젝트의 저장소에 참여해 개발을 진행하기 위해 다음과 같은 명령어를 순서대로 실행했습니다.
#먼저 저장소를 clone 해줍니다.
git clone https://github.com/계정명/저장소_이름.git
#그 다음, 아래의 명령어로 node 모듈들을 설치해줍니다.
npm install
npm install로 node_modules 폴더가 설치된 후에는 package-lock.json 파일에 아래와 같이 변경되어버린 문제가 발생했습니다.
왼쪽의 코드는 기존 코드이고, 오른쪽의 코드는 npm install을 하며 변경되어버린 코드 입니다.
변경된 package-lock.json은 기존의 package-lock.json의 코드 구조와 달랐고, 코드도 상당 부분이 삭제된 모습을 볼 수 있었습니다.
이 문제를 해결하기 위해 다음과 같은 시도들을 해봤습니다.
- 기존에 git clone을 했던 위치말고 새로운 경로에서 git clone을 했습니다.
git clone https://github.com/계정명/저장소_이름.git
- 다시 npm install을 해서 모듈을 설치해줍니다.
그 결과, 여전히 package-lock.json은 변경되었습니다.
- 설치된 node_modules 폴더와 package-lock.json 파일을 지워줍니다.
git clone https://github.com/계정명/저장소_이름.git
- 다시 npm install을 해서 모듈을 설치해줍니다.
하지만 이 방법에도 package-lock.json은 변경되었습니다.
위의 2가지 방법 시도 후 혹시 다른 팀원들은 이와 같은 문제를 겪었을지 궁금하여 채팅방에 제 상황을 공유하였고, 백엔드팀의 창훈님이 제가 겪고 있는 문제와 관련된 해결 방법이 있는 링크를 보내주셨습니다.
그리고 아래의 과정을 통해 문제를 해결하게 되었습니다.
- 새로운 경로에서 git clone을 해줍니다.
git clone https://github.com/계정명/저장소_이름.git
- npm ci 명령어를 실행시켜줍니다.
npm ci
그 결과, package-lock.json이 변경되지 않은채로 node_modules가 잘 설치되는 모습을 확인할 수 있습니다.
설치하는 환경의 npm 버전이 다르면 그럴 수 있습니다. 일단 npm 버전 6에서는 packages 라는 속성이 존재하지 않았는데 7에서는 packages 속성이 추가되었습니다. 또한 lockfileVersion도 1에서 2로 변경되었습니다.
📌참고 - 버전별 package-lock.json 파일 포맷
npm 6.x : https://docs.npmjs.com/cli/v6/configuring-npm/package-lock-json/
npm 7.x: https://docs.npmjs.com/cli/v7/configuring-npm/package-lock-json/
참고로 프론트 팀원들은 npm 버전이 7이었고, 저는 npm 버전이 6이었습니다.
그래서 npm 7.x 버전으로 모듈을 설치한 팀원들과 npm 6.x 버전으로 모듈을 설치한 저의 결과가 다를 수 밖에 없었던 것입니다.
package-lock.json이 있다고 하더라고 npm install을 통해 변경될 확률이 있습니다. 왜냐하면 npm 버전에 따라 npm install의 미묘한 구동 차이가 존재하기 때문입니다.
npm ci를 사용하면 package-lock.json을 사용하여 똑같은 개발 환경을 구축해낼 수 있지만 npm ci로는 원하는 패키지만 개별적으로 설치할 수 없기 때문에 실질적인 해결책은 아닙니다.
npm install과 npm ci 차이점은 제가 정리한 이 글을 참고해주세요 :)
사실 npm install을 했을 때나 npm ci를 했을 때 둘다 문제 없이 애플리케이션이 실행은 잘 되었지만, 나중에 npm install package 처럼 모듈을 추가로 설치하고 package-lock.json이 달라졌을 때 git pull을 하면 코드가 충돌할 수도 있는 문제가 발생할 수 있습니다.
그래서 이 문제는 처음에 발견했을 때 해결을 해줘야하고, 팀원들이 사용하는 npm 버전을 확인하여 개발환경을 맞추는 게 필요하다고 생각했습니다.
저 같은 경우에는 npm ci로 초기 세팅을 한 후에, 지속적으로 개발하면서 npm 모듈을 추가로 설치할 예정이었기 때문에 팀원들이 사용하는 7.x 버전으로 업그레이드를 했습니다.
npm 버전을 업그레이드하는 방법은 다음과 같습니다. 작성일자인 21년11월18일 날짜 기준으로 2주전에 버전 8이 나와서 아마도 8.x 버전 이상으로 업그레이드 될 것습니다.
npm i -g npm
만약 특정 버전의 npm 버전으로 다운그레이드 혹은 업그레이드를 하고싶다면 아래 명령어를 입력해주시면 됩니다.
npm i -g npm@버전
#만약 7.24.0 버전으로 설치하고 싶다면
npm i -g npm@7.24.0
이 문제 해결을 통해 npm ci라는 것을 알게 되었고 npm 6.x에서 7.x로 업그레이드되면서 package-lock.json file 형식이 달라졌다는 것도 추가로 알게 되었습니다.
그래서 협업할 때 팀원들의 개발 환경도 고려하여 세팅하는 것도 중요하다는 생각을 하게 되었습니다.
npm install시 package.json이 변경될 때 해결 방법
npm install을 사용하지 말아야할 때
