'왜 package-lock.json이 갑자기 수정되었을까?
협업을 하다보면 의도치 않게 package-lock.json이 업데이트가 되는 경우가 있는데 이유를 알고싶었다.'
1. 의도치 않게 package-lock.json이 수정된 이유
package-lock.json이 수정되었다는 것은 의존성이 새로 추가되었거나, 기존의 의존성이 버전이 변경되었음을 의미합니다. 먼저 의존성이란 우리가 프로그램을 만들 때 의존하고 있는 코드 모듈입니다. package-lock.json과 package.json에 있는 dependencies들이 우리가 사용중인 의존성 목록입니다. 새로운 의존성이 추가되면 당연히 package-lock.json이 변경될 것이지만, 기존 의존성의 버전이 변하는 것은 어떤 경우가 있을까요?
1) 의도적으로 의존성 버전을 변경한 경우.
// 현재 axios 1.0.0 버전을 사용중인데 2.0.0 버전으로 업데이트하는 경우
npm i axios@2.0.0
2) 설치 순서가 다를 경우.
// 동료: axios설치 후 antd설치
// 나: antd설치 후 axios설치
// 동료
npm i axios
npm i antd
// 나
npm i antd
npm i axios
의도치 않게 package-lock.json이 변경되는 경우는 2번입니다. 즉 의존성 설치순서가 다르면 package-lock.json의 구조도 달라집니다. 이와 함께 package.json과 nodu_module 폴더의 구조도 변경됩니다. 참고로 node_module은 우리가 설치한 의존성들의 실제 코드 모듈들이 담겨있는 폴더입니다. package.json과 package-lock.json은 node_module 폴더가 만들어질때 필요한 파일들입니다. 설치순서에 따라 package.json, package-lock.json, node_module 구조가 어떻게 달라지고, 어떤 문제가 발생할 지 알아보겠습니다. 그 전에 node_module 폴더가 만들어지는 과정과 이 때 package.json과 package-lock.json의 각각의 역할을 알아보고 둘의 차이점을 무엇인지 이해해야합니다.
2. node_module이 만들어지는 과정
1) node_module 폴더를 만들기 위해 npm 명령어를 통해 package.json 파일을 생성해주어야 합니다.
npm init -y
2) package.json이 생성되었으면 원하는 의존성을 설치해주어야겠죠. 예시로 axios를 설치해보겠습니다.
npm i axios
3) 의존성을 설치가 끝나면 node_module 폴더와 package-lock.json 파일이 생성됩니다.
node_module 폴더에는 axios의 실제 코드 모듈들이 들어있고, package-lock.json파일에는 axios의 버전같은 구체적인 정보가 담겨 있습니다. 하지만 실제 위 과정을 커맨드해보면 axios만 설치되는 것이아니라 axios가 의존하고 있는 의존성들도 함께 node_module폴더와 package-lock.json에 함께 설치됩니다. 의존 관계를 보면 '나 -> axios -> axios가 필요한 의존성들' 이렇게 되는 겁니다. 하나의 의존성만 설치해도 node_module과 package-lock.json에 항상 뭐가 많이 설치되는 이유입니다. 여기까지 node_module이 만들어지는 전체적인 프로세스가 이렇구나 파악하시면 좋을거 같습니다.
3. package.json과 package-lock.json 역할과 차이점
1) 역할
node_module은 package.json 혹은 package-lock.json을 기반으로 생성됩니다.
'혹은' 이라고한 이유는 package-lock.json이 있는 경우와 없는 경우로 나뉘기 때문입니다.
있는 경우에는 package-lock.json에 명시된 버전과 순서를 우선적으로 따라 node_module이 생성됩니다.
없을 경우엔 package.json에 dependencies 순서에 따라 node_module이 생성됩니다.
2) 차이점
package.json은 의존성관리 외의 여러 역할을하지만 여기선 의존성관리 측면만 고려하겠습니다.
package.json과 package-lock.json의 차이는 '의존성에 대한 구체적인 버전 명시 유무'입니다.
2-1) package.json
package.json은 의존성들의 구체적인 버전을 명시하고 있지 않고 있습니다.
아래 사진을보면 ^(캐럿)표시가 있는데 이는 대략적인 버전의 범위만 나타내고 있는 것입니다.
^0.21.1은 0.21.0 >= 0.21.1 < 0.22.0을 의미합니다.
2-2) package-lock.json
package-lock.json은 의존성들의 정확한 버전과 기타정보들을 담고있습니다.
4. 예시 상황
설치 순서가 서로 다를 경우 node_module 폴더도 구조가 달라진다고 했습니다.
아래 예시처럼 동료와 저는 다른 설치순서로 A와 B를 설치했다고 가정해보겠습니다.
1) 동료: A -> B 순서로 설치
npm i A
npm i B
2) 본인: B -> A 순서로 설치
npm i B
npm i A
A와 B 둘다 C를 의존하고 있다고 한 가지 상황을 추가해보겠습니다.
차이점은 A는 C의 2.0버전을, B는 C의 1.0버전을 의존하고 있습니다.
A와 B는 각각 C의 다른 버전을 의존하고 있습니다.
이제 동료와 저의 node_module이 어떻게 생성되었는지 비교해보겠습니다.
- 동료
- 본인
동료는 C의 2.0버전이 상위, 1.0버전이 B폴더 내부에 생성되었고,
저는 C의 1.0버전이 상위, 2.0버전이 A폴더 내부에 생성되었습니다..
여기서 발견할 수 있는 규칙은 같은 의존성이 버전이 다르게 설치되는 경우에
먼저 설치되는 버전이 상위 폴더에 설치되게 됩니다.
나중에 설치한 버전은 해당 의존성 폴더 내부에 설치되게 됩니다.
이 규칙이 버그가 생길 수 있는 결정적인 원인입니다.
만약 저와 동료가 똑같이 C라는 의존성을 import해서 사용하게 될 경우
import C from 'C'
동료는 C 2.0버전을 사용하고 저는 C 1.0 버전을 사용하게 됩니다. 즉 상위에 있는 의존성을 사용하게 되는데 각자 상위에 있는 의존성 버전이 다르기 때문에 다른 버전을 사용하게 되는겁니다. 이게 핵심입니다.
갑작스럽게 사용하는 의존성의 버전이 달라질 경우 예기치 못한 버그를 초래할 수 있습니다. 규모가 크고 복잡한 프로젝트일 수록 버그가 생길 확률은 높아집니다.
5. 의존성 관리, 해답은?
의존성 관리의 핵심은 package-lock.json 파일을 '버전 관리 시스템'에서 관리하는 것입니다.
동시에 package-lock.json이 의도한 부분만 잘 업데이트 되었는지 꼼꼼하게 확인해야 합니다.
정리
의존성 관리를 한다함은 구성원 모두가 같은 버전의 의존성들을 사용하는 것을 의미합니다.
혼자 작업하는 경우에는 특별히 의존성 관리에 신경을 쓸 필요가 없지만, 협업을 하는 경우에는 의존성 관리가 필수입니다.
특히 프로젝트의 규모가 클 수록 그 중요성은 커집니다. 의존성 관리를 통해 불필요한 버그가 생기는 것을 방지할 수 있습니다.
Ref
'프론트엔드 > Web Env' 카테고리의 다른 글
서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) (0) | 2020.10.30 |
---|---|
브라우저 저장소 차이점 (0) | 2020.09.27 |
브라우저 동작 원리 (0) | 2020.09.10 |