이 글은 NPM DEEP DIVE 책을 리뷰하는 것과 동시에 완독하는 챌린지(25.6.23~25.7.23)에 참여했던 회고를 담은 글이다.
챌린지 신청 배경
이 라이브러리는 어떻게 빌드되어서 오픈소스로서 사용할 수 있는 것이며, 어떻게 설정해야 함수를 import할때 경로를 올바르게 불러올 수 있는지, 패키지 매니저들은 구체적으로 어떤 차이가 있는지 등 궁금한 것이 많았지만,
평소에 기능 구현에 급급해서 남들이 만들어둔 라이브러리를 쓰기만 하며, 해부해보려는 시도없이 개발만 해왔던 것 같다.
그러던 중, npm deep dive라는 책이 출시되었다는 소식과 함께 약 20일동안 책을 독파하는 챌린지 모집글을 보게 되었다.
내 자유의지로 이 책을 다 읽어내는게 현실적으로 어렵다고 판단했고, 다른 챌린저 분들과 으쌰으쌰 동기부여하며 완료 기한이 정해져있어야 완독할 수 있을 거라고 생각하게 되어 도전하는 마음으로 신청했다.
책 소개
약 1000쪽으로 구성되어있으며,
javascript 생태계가 어떻게 변해왔는지부터 시작해서,
npm의 원리, 패키지 매니저들간의 비교, 유의적 버전 관리, CJS와 ESM, 번들러, 모노레포 활용법
등을 다룬다.
책을 통해 새로 알게 된 내용
1. 모듈 시스템에 대한 이해
기존에는 CJS가 레거시고 ESM이 최신이라 좋은 거다라고만 생각하고 넘어갔었다면,
CJS는 런타임에서 동적으로 호출되어, 모듈을 동기적으로 로드함으로써 심각한 성능 저하와 UX 문제를 야기하고, 예측 불가능하다는 점에서 불필요하게 빌드시 번들 크기를 키울 수 있는데,
ESM은 비동기적으로 모듈을 로드하도록 설계되어, 병렬적으로 모듈을 다운로드 및 파싱가능하게 하고, import, export문을 통해 어떤 모듈을 내보내고 가져오는지 파악이 용이하며, 재사용성을 높이고 표준화를 하게 한다.
2. 번들러, 트랜스파일러, 폴리필
번들러, 트랜스파일러, 폴리필이 각각 어떤 역할을 하는지 머릿 속에 정확히 그려지지 않았었는데,
- 번들러: 여러 파일을 하나로 묶고 최적화하여 효율적인 배포를 가능하게 함 (파일 단위의 처리)
- 트랜스파일러: 최신 문법을 구형 문법으로 변환하여 코드 호환성을 확보함 (문법 단위의 처리)
- 폴리필: 구형 환경에 없는 기능을 새로 구현하여 런타임 호환성을 보장함 (런타임 기능/API 단위의 처리)
3. 각종 환경설정과 필드
package.json, webpack.config.js, babel.config.js, vite.config.ts, turbo.json 등
패키지매니저, 번들러, 도구 들의 환경설정과 그에 대한 이해
완독 전과 후, npm과 생태계 도구에 대한 나의 생각의 변화
예시로,
완독 전에는 package.json은 라이브러리가 deprecated되거나 에러가 있을 때만 들어가는 곳이었다면,
완독 후에는package.json의 name, version, description, license, main, module, exports, bin, files 등의 필드를 하나하나 보며, 이 패키지는 이렇게 구성되어있구나를 곱씹게 되었다.
그리고, 내가 설치하는 라이브러리에서 관심사를 어떻게 분리해서 어떤 파일명으로 관리를 하고 있는지, 파일끼리 어떻게 맞물려있는지 등을 한번씩 생각하게 되었다.
이 책을 추천하는 이유
자바스크립트 생태계에 대한 이해
도구를 더 잘 사용하기 위해서는 '이 도구가 왜 만들어지게 되었는가'를 파악하는데 그 본질이 있다.
그런 측면에서, 자바스크립트 진영에서 어떤 변화들이 있었는지를 이해하는데 도움이 많이 된다.
패키지 개발의 정수
패키지 개발 경험이 부족한 초심자들에게, 중요한 요소들과 추가되면 좋을 요소들을 상세하게 알려줌으로써,
패키지 개발 경험이 없던 사람에게 큰 도움이 될 것 같다.
후기
지식 취득 목적으로 책을 읽을 때에는 역시 기한이 정해져있는게 완독 확률을 높인다는 점을 스스로 깨달으며,
같이 함께했던 챌린저 분들 덕분에 귀찮음을 덜 느끼면서 계획대로 읽을 수 있었다.
그리고, npm에 대한 이해도가 조금 올라갔다고 생각하며, 이제 패키지 개발할 때 이 책을 토대로 개발할 수 있을 것만 같다.
