패키지 매니저 대체 뭐하는걸까?(프론트엔드 주니어/npm , yarn, pnpm)

패스트캠퍼스/자습

sunnykim91 2023. 4. 27. 15:32

갑자기 문득 npm, yarn의 차이점은 뭐고, 얘네는 정확히 뭐하는 애들일까?

그냥 난 npm start, npm build 등의 명령어만 칠줄 알았지. 이게 뭐하는거야?

예전 면접질문에서도 패키지매니저 뭐 쓰세요? 라고 했을때 그게 뭐지 하고 벙쪘던 기억이 있다.

사실 이런것들을 누가 알려주지 않으니까, 내가 알아서 공부했어야했는데 언제나 그랬듯 빚은 늘어만가지 줄지를 않아서 조금 이라도 탕감시켜보기로했다.

오늘 한번 이게 뭔지 정리해보고 각각의 장단점, 배경 등을 알아보고자 한다.

프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 갱신, 삭제 할 수 있도록 도와주는 관리 도구 !

대부분의 자바스크립트 패키지 매니저는 Node.js실행 환경에서 돌아가며, package.json이라는 파일에 프로젝트가 의존하고 있는 패키지 목록을 명시한다.

흔히 우리가 파일 구조에 보면 node_modules라는게 있다. 이곳에 패키지들이 저장되는데, npm 저장소로부터 설치를 해서 여기에 저장된다고 보면되겠다.

우리가 각 종 라이브러리들을 설치하기 위해서 npm install명령어로 설치되면 package.json에 추가되고, node_modules에 추가되고라고 생각하면 될 것 같다.

2010년 처음 npm이 나왔고, 이 npm이 yarn, pnpm이 나올 수 있게 만든 자리를 잡아주었다.

npm이 나오기 이전에는 직접 프로그램을 다운로드 후 설치 하고 사용하는 방법을 선택했다고 한다.

2016년 yarn의 등장 -> npm 의 문제해결을 하기 위해 나왔다.

(설치 프로세스의 속도를 높이기 위해 작업을 병렬화하였다고 한다. 성능, 보안, 개발자 경험 등을 높이기 위해 나옴)

2020년 부터 yarn 은 yarn classic으로 이름이 바뀌고 모두 레거시로 간주되고, yarn berrry에서 개발과 개선이 이루어짐

pnpm 2017년에 만들어져 npm만 있으면 바로 사용가능하게끔 만들어졌다.

pnpm이 나오게된 배경은 npm과 yarn보다 효율적(performance npm이다)으로 용량측면에서 낫다.

-> 예시 ) npm,yarn으로 lodash를 사용하는 패키지 100개가 있다고 가정했을때 각 폴더별로 lodash패키지가 약 그수만큼 복사가 된다.

하지만, pnpm의 경우 lodash를 한번만 설치 후 심링크로 연결하여 용량 절약 가능!
*심링크? 쉽게 생각하면 윈도우에서 바로가기 이다.

yarn berry, npm , yarn classic, pnpm 크게 4가지를 99프로 개발자가 이중에 사용하고 있을 것 같은데,

사실 npm 이 yarn이 개발하는 동안 노는것도 아니었고, 그렇다고 yarn도 노는 것도 아니니 어떤 걸 사용해도 큰 체감을 느끼기는 어려운것 같다. 물론, 그냥 골고루 사용해보면서 이것저것 알아보는것이 개발자로서는 도움이 될 수 있을것 같다.

우리가 패키지매니저를 통해서 프로젝트를 생성하고, 어떤 라이브러리를 추가하고 등등 하고나면 항상 프로젝트에 나는 생성한적도 없지만, pakcage-lock.json , yarn.lock 이라는 lock파일이 생성되는 것을 볼 수 있다.

이것의 역할은 쉽게 얘기하면 내가 어디서든 혹은 다른팀원이 어디서든 동일한 버전으로 다운받을 수 있게 하기 위해서이다.

하나의 프로젝트에 수많은 패키지들이 설치 되는데, 버전마다 지원하는 기능, 지원되지 않는 기능이 다 다르기 때문에 같은 버전을 보장하기 위해서는 이 lock파일이 도움을 주게된다.

추가 정보

둘의 차이는

1. 설치 방법

// 그냥 라이브러리 설치 시 dependencies로
npm install my-library

// devdependencies로 설치시
npm install my-library --save-dev
npm install my-library -D

2. 실제 어플리케이션에 포함되지 않는 경우 devdpendencies에 포함되게 하면 좋다.

실제 배포할때에 포함되지 않아 빌드 시간을 줄일 수 있기 때문에!

예시) eslint, prettier 등등

참고 자료