Frontend Academy · 강의

npm과 package.json: 의존성, 스크립트

npm init으로 프로젝트를 초기화하고, 런타임 및 개발 의존성을 추가하며, 재사용 가능한 npm 스크립트를 작성하고 semver를 이해합니다.

npm과 package.json: 의존성, 스크립트은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

npm이란 무엇인가요?

npm(Node Package Manager)은 프로젝트 종속성과 스크립트를 관리합니다. 설치할 항목을 확인하기 위해 package.json을 읽고, 정확한 버전을 기록하기 위해 package-lock.json을 작성합니다. npm 레지스트리에는 200만 개가 넘는 패키지가 게시되어 있습니다.

프로젝트 초기화하기

npm init -y는 기본값이 포함된 package.json을 생성합니다. -y 플래그를 사용하면 확인 메시지 없이 모든 기본값을 적용합니다.

mkdir my-project && cd my-project
npm init -y
# Creates package.json

package.json 파일

주요 필드는 다음과 같습니다: name, version, description, main(진입점), scripts, dependencies, devDependencies.

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

패키지 설치하기

npm install package은 종속성에 패키지를 추가합니다. npm install -D package는 devDependencies에 패키지를 추가합니다(프로덕션에는 필요하지 않음). 인수 없이 npm install을 실행하면 package.json에 지정된 모든 항목을 설치합니다.

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

시맨틱 버전 관리

npm은 semver를 사용합니다: major.minor.patch. ^ 접두사는 호환 가능한 업데이트(동일한 major)를 허용합니다. ~ 접두사는 patch 업데이트만 허용합니다. 정확한 버전에는 접두사가 없습니다.

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

npm 스크립트

scripts 필드에 명령을 정의합니다. npm run scriptname으로 실행합니다. 기본 제공 스크립트(test, start)는 npm test 또는 npm start로 직접 실행합니다.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run과 npx 비교

npm run은 package.json의 스크립트를 실행합니다. npx는 node_modules의 패키지를 실행하거나 패키지를 임시로 다운로드해 실행합니다. npx create-vite@latest와 같은 일회성 명령에 유용합니다.

package-lock.json

package-lock.json은 설치된 모든 패키지와 전이적 종속성의 정확한 버전을 기록합니다. 모든 개발자와 CI가 동일한 버전을 사용하도록 이 파일을 커밋합니다. 직접 수정하지 마십시오.

node_modules와 .gitignore

node_modules는 절대 커밋하지 마십시오. 수백 MB에 이를 수 있기 때문입니다. 항상 .gitignore에 추가합니다. 누구나 npm install로 복원할 수 있습니다.

# .gitignore
node_modules/

패키지 업데이트 및 제거하기

npm update는 semver 범위 내에서 패키지를 업데이트합니다. npm outdated는 업데이트할 수 있는 항목을 보여 줍니다. npm uninstall package는 패키지를 제거합니다.

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm과 yarn과 pnpm 비교

npm의 대안으로는 yarn(더 빠르고, 작업 공간과 Plug'n'Play 지원), pnpm(디스크 효율적인 심볼릭 링크 저장소, 엄격한 의존성 관리, 모노레포에서 가장 빠름)이 있습니다. 세 도구의 핵심 명령어는 서로 비슷합니다.

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

빠른 확인

npm install -D jest를 실행할 때 -D 플래그는 무엇을 하나요?

복습: npm과 package.json

npm init은 package.json을 생성합니다. npm install은 의존성을 추가합니다. 개발 의존성에는 -D를 사용합니다. semver에서 ^는 호환되는 업데이트를 의미합니다. 스크립트는 npm run으로 명령어를 실행합니다. package-lock.json은 정확한 버전을 기록하므로 커밋해야 합니다. node_modules는 .gitignore에 추가합니다. npx는 일회성 패키지 명령어를 실행합니다.

자주 묻는 질문

“npm과 package.json: 의존성, 스크립트” 강의는 무료인가요?

네 — “npm과 package.json: 의존성, 스크립트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“npm과 package.json: 의존성, 스크립트”에서 뭘 배우나요?

npm init으로 프로젝트를 초기화하고, 런타임 및 개발 의존성을 추가하며, 재사용 가능한 npm 스크립트를 작성하고 semver를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“npm과 package.json: 의존성, 스크립트” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기