홈앤서비스 SK BROADBAND

자바스크립트 생태계의 비밀, npm부터 모노레포까지!

자바스크립트는 단순한 프로그래밍 언어를 넘어 전 세계 개발자들이 활용하는 방대한 생태계를 만들어냈습니다. 하지만 매일 사용하는 npm과 package.json, 다양한 번들 도구와 모듈 시스템의 작동 원리, 그리고 모노레포 환경까지 제대로 이해하기는 쉽지 않는다. 이 책은 이러한 자바스크립트 생태계의 복잡한 퍼즐을 하나씩 풀어가며 실무에 꼭 필요한 지식을 제공한다.

『npm Deep Dive』는 단순히 사용법을 나열하는 데 그치지 않고, 각 도구와 개념의 작동 원리와 선택 기준을 깊이 있게 다룬다. npm의 기본 원리와 유의적 버전 관리, CommonJS와 ESModule의 차이점과 활용법, Webpack, Rollup, Vite 같은 최신 번들 도구의 비교와 실무 적용법, 그리고 모노레포를 활용한 대규모 프로젝트 관리 방법까지, 자바스크립트 생태계의 핵심을 체계적으로 정리했다.

초보 개발자라면 복잡한 개념을 단계적으로 이해할 수 있도록, 숙련된 개발자라면 실무에 바로 적용할 수 있는 팁과 전략을 통해 자바스크립트를 한층 더 깊이 이해하고 활용할 수 있도록 도와준다. 이 책을 통해 여러분은 자바스크립트 생태계를 자유롭게 탐험하며, 더 나은 개발 환경을 만드는 것뿐만 아니라 평소에 하던 웹 서비스 개발만으로는 이해하기 힘든 지식을 얻을 수 있을 것이다.

▣ 01장: npm과 유의적 버전

1.1 npm의 정의와 역사
__1.1.1 npm의 역사와 배경
__1.1.2 npm의 주요 기능
__1.1.3 npm과 관련된 유용한 사이트
__1.1.4 정리
1.2 유의적 버전이란?
__1.2.1 유의적 버전의 등장 배경과 정의
__1.2.2 유의적 버전의 구체적인 명세
__1.2.3 유의적 버전의 문법
__1.2.4 Node.js와 npm에서 사용하는 유의적 버전
__1.2.5 정리
1.3 유의적 버전과 npm 생태계의 명과 암
__1.3.1 left-pad: 수천만 패키지에서 의존하는 유틸 패키지가 사라지면 어떻게 될까?
__1.3.2 everthing: 의존성으로 있으면 패키지 삭제가 안 된다고? 그렇다면 모든 자바스크립트 패키지를 의존성으로 가져본다면 어떨까?
__1.3.3 is-promise: 잘못된 부 버전 업데이트가 만들어낸 사태
__1.3.4 colors.js와 faker.js: 섣부른 부, 수 버전 업데이트는 독이 될 수도 있다
__1.3.5 event-stream 사건: 오픈소스는 얼마나 안전한가?
__1.3.6 유의적 버전과 npm을 사용할 때 주의할 점
__1.3.7 정리

▣ 02장: package.json과 npm 파헤치기

2.1 package.json 톺아보기
__2.1.1 package.json
__2.1.2 package.json의 주요 필드
__2.1.3 package.json 생성하기
__2.1.4 npm config와 .npmrc 살펴보기
__2.1.5 정리
2.2 dependencies란 무엇일까?
__2.2.1 npm 버전과 버전에 사용되는 특수 기호
__2.2.2 dependencies
__2.2.3 devDependencies
__2.2.4 peerDependencies
__2.2.5 peerDependenciesMeta
__2.2.6 정리
2.3 npm의 주요 명령어
__2.3.1 npm run
__2.3.2 npm install과 npm ci
__2.3.3 npm update
__2.3.4 npm dedupe
__2.3.5 npm ls
__2.3.6 npm explain
__2.3.7 npm audit
__2.3.8 npm publish
__2.3.9 npm deprecate
__2.3.10 npm outdated
__2.3.11 npm view
__2.3.12 정리
2.4 npm install을 실행하면 벌어지는 일
__2.4.1 의존성 트리 분석의 핵심 @npmcli/arborist
__2.4.2 패키지 설치를 위한 패키지, pacote
__2.4.3 node_modules 살펴보기
__2.4.4 정리
2.5 node_modules는 무엇일까?
__2.5.1 node_modules의 역할
__2.5.2 node_modules의 구조
__2.5.3 심볼릭 링크
__2.5.4 정리
2.6 bin 필드와 npx
__2.6.1 CLI 패키지
__2.6.2 bin 필드
__2.6.3 npx
__2.6.4 정리

▣ 03장: npm의 대항마 yarn과 pnpm

3.1 npm의 문제점과 한계
__3.1.1 유령 의존성
__3.1.2 디스크 I/O 부하
__3.1.3 너무 거대한 node_modules
__3.1.4 변경에 취약한 락 파일
__3.1.5 정리
3.2 yarn: 신속하고 안정적인 패키지 관리를 위한 패키지 관리자
__3.2.1 yarn 소개와 역사
__3.2.2 특징
__3.2.3 정리
3.3 pnpm: 디스크 공간 절약과 설치 속도의 혁신을 가져온 패키지 관리자
__3.3.1 pnpm의 소개와 역사
__3.3.2 특징
__3.3.3 정리
3.4 npm, yarn, pnpm 비교
__3.4.1 워크스페이스
__3.4.2 명령어 비교
__3.4.3 벤치마크 테스트
__3.4.4 정리

▣ 04장: CommonJS와 ESModule

4.1 자바스크립트 모듈화의 역사
__4.1.1 자바스크립트 모듈화의 배경
__4.1.2 모듈화 이전의 자바스크립트
__4.1.3 자바스크립트 모듈의 여러 시도들
__4.1.4 오늘날의 자바스크립트 모듈 시스템
__4.1.5 정리
4.2 CommonJS란 무엇일까?
__4.2.1 CommonJS의 탄생 배경
__4.2.2 CommonJS의 명세
__4.2.3 Node.js의 CommonJS
__4.2.4 소스코드를 CommonJS로 빌드하기
__4.2.5 정리
4.3 ESModule이란 무엇일까?
__4.3.1 ESModule의 탄생 배경과 도입
__4.3.2 ESModule의 특징
__4.3.3 Node.js의 ESModule
__4.3.4 정리
4.4 Node.js는 어떻게 node_modules에서 패키지를 찾아갈까?
__4.4.1 모듈 해석 알고리즘
__4.4.2 모듈 이름 지정자로 모듈을 로드하는 방법
__4.4.3 정리
4.5 CommonJS와 ESModule, 무엇이 정답일까?
__4.5.1 오픈소스 패키지가 CommonJS와 ESModule을 동시에 지원하는 이유
__4.5.2 CommonJS와 ESModule을 동시에 지원하는 듀얼 패키지 개발하기
__4.5.3 순수한 ESModule 패키지 개발하기
__4.5.4 CommonJS와 ESModule, 무엇이 정답일까?
__4.5.5 정리

▣ 05장: 트랜스파일과 폴리필

5.1 트랜스파일을 도와주는 도구, 바벨
__5.1.1 바벨의 필요성
__5.1.2 바벨의 동작 방식
__5.1.3 바벨 사용해보기
__5.1.4 정리
5.2 폴리필을 도와주는 도구 core-js
__5.2.1 core-js란 무엇인가?
__5.2.2 바벨과 core-js
__5.2.3 정리
5.3 최선의 폴리필과 트랜스파일은 무엇일까?
__5.3.1 지원 환경 명시하기
__5.3.2 정리
5.4 바벨과 core-js의 대안
__5.4.1 타입스크립트 컴파일러
__5.4.2 SWC(Speedy Web Compiler)
__5.4.3 es-shims
__5.4.4 polyfill.js
__5.4.5 정리

▣ 06장: 자바스크립트 번들 도구 살펴보기

6.1 번들링은 무엇이고 왜 필요할까?
__6.1.1 번들링의 역사
__6.1.2 번들링의 역할
__6.1.3 정리
6.2 웹서비스 번들의 표준, 웹팩
__6.2.1 웹팩 소개 및 주요 특징
__6.2.2 웹팩의 기본 개념과 동작 원리
__6.2.3 간단한 웹팩 서비스 만들기
__6.2.4 정리
6.3 패키지 번들의 선두주자, 롤업
__6.3.1 롤업의 등장 배경과 소개
__6.3.2 롤업의 기본 개념과 특징
__6.3.3 정리
6.4 번들 도구의 신흥 강자, 비트
__6.4.1 비트의 등장 배경과 소개
__6.4.2 비트의 기본 개념과 특징
__6.4.3 설정에 필요한 주요 필드
__6.4.4 정리

▣ 07장: 직접 자바스크립트 패키지 만들기

7.1 나만의 npm 패키지 만들기
__7.1.1 패키지 개발을 위한 체크리스트
__7.1.2 프로젝트 환경 설정
__7.1.3 실제 코드와 테스트 코드 작성
__7.1.4 번들 및 트랜스파일하기 위한 환경 구축
__7.1.5 간단한 테스트 코드 작성
__7.1.6 깃허브 액션을 활용한 CI 파이프라인 구축
__7.1.7 changesets를 활용한 배포
__7.1.8 정리
7.2 나만의 CLI 패키지 만들기
__7.2.1 제작할 CLI 패키지 구상
__7.2.2 프로젝트 환경 설정
__7.2.3 실제 코드 작성
__7.2.4 결과물 확인
__7.2.5 배포 후 사용
__7.2.6 CLI를 만드는 데 유용한 패키지
__7.2.7 정리

▣ 08장: 모노레포로 서비스와 라이브러리 모두 관리하기

8.1 모노레포와 터보레포
__8.1.1 모노레포란?
__8.1.2 npm 워크스페이스
__8.1.3 모노레포를 구성하는 도구, 터보레포
__8.1.4 정리
8.2 나만의 모노레포 프로젝트 만들기
__8.2.1 디자인 시스템 소개
__8.2.2 pnpm 워크스페이스 및 터보레포 구성하기
__8.2.3 shared 공유 패키지 구현하기
__8.2.4 @ndive/design-tokens 구현
__8.2.5 @ndive/design-components 구현
__8.2.6 @ndive/design-tracker 구현
__8.2.7 애플리케이션 작성
__8.2.8 배포 살펴보기
__8.2.9 정리

▣ 09장: 패키지 개발에 도움이 되는 도구와 팁

9.1 패키지 개발에 도움이 되는 도구
__9.1.1 패키지를 업로드하는 또다른 방법 JSR
__9.1.2 복잡한 번들 프로세스를 한 번에 수행하는 도구, t sup
__9.1.3 구성 파일의 표준 cosmiconfig
__9.1.4 성능 분석을 위한 도구 Tinybench
__9.1.5 손쉬운 코드 마이그레이션을 도와주는 jscodeshift
__9.1.6 정리
9.2 패키지 개발에 도움이 되는 팁
__9.2.1 선택이 아닌 필수, ESModule
__9.2.2 package.json 올바르게 작성하기
__9.2.3 올바른 트랜스파일과 폴리필 적용하기
__9.2.4 dependencies는 신중하게 추가하라
__9.2.5 코드에 신뢰를 주는 테스트 코드와 벤치마크 테스트
__9.2.6 올바른 문서 작성법
__9.2.7 정리