Learn

의존성 설치하기

add, install, save-dev, 그리고 프로덕션 의존성과 개발 의존성의 차이.

사전 요건

프로젝트에 라이브러리를 추가하는 것은 수천 번 반복하게 될 첫 번째 명령어예요. 이 레슨에서는 npm, pnpm, bun의 문법과 일반 의존성과 개발 의존성의 차이를 다뤄요.

기본 명령어

pnpm(권장)으로:

shell
pnpm add react

bun으로:

shell
bun add react

npm으로:

shell
npm install react

세 명령어 모두 같은 일을 해요 : 패키지를 다운로드하고, package.jsondependencies에 추가하고, lockfile을 업데이트해요.

개발 의존성

TypeScript 컴파일러, 린터, 테스트 프레임워크 같은 패키지들은 개발 중에만 필요해요. 프로덕션에는 포함하지 않아요. -D 플래그(또는 --save-dev)를 사용하세요:

shell
pnpm add -D typescript
shell
bun add -d vitest
shell
npm install --save-dev eslint

이 패키지들은 package.jsondependencies 대신 devDependencies에 들어가요.

semver 버전 관리 이해하기

패키지를 설치하면 package.json에 접두사와 함께 버전이 기록돼요:

json
{
  "dependencies": {
    "react": "^18.3.0",
    "lodash": "~4.17.21",
    "some-lib": "2.1.0"
  }
}
  • ^18.3.0 (캐럿) : 18.3.0 이상의 18.x.x 버전을 모두 허용해요. minor와 patch 업데이트가 허용돼요.
  • ~4.17.21 (틸드) : 4.17.x만 허용해요. patch 업데이트만 허용돼요.
  • 2.1.0 (정확한 버전) : 이 정확한 버전만, 다른 버전은 안 돼요.

캐럿 ^은 pnpm, bun, npm의 기본값이에요. 대부분의 경우에 적합해요.

전역 패키지 설치하기

어디서든 사용하고 싶은 CLI 도구(예 : vercel, http-server)라면:

shell
pnpm add -g vercel
shell
npm install -g vercel

일회성 명령어에는 전역 설치 대신 pnpm dlx(또는 npx)를 사용하세요:

shell
pnpm dlx create-next-app my-app

모든 의존성 재설치하기

기존 프로젝트를 클론하면 node_modules/가 없어요. 그냥 실행하면 돼요:

shell
pnpm install

pnpm이 lockfile을 읽고 프로젝트 작성자와 정확히 같은 버전을 설치해요.

npm 시맨틱 버전 관리

다음 단계를 열려면 단계를 체크하세요

코스로 돌아가기