CODINGNOW
← JavaScript 강의 목록으로
📦
Node 입문
심화 · 선수: 24_Node_환경

25. npm 입문

프로젝트의 명함이자 설정 파일. 의존성, 스크립트, 메타정보를 담습니다.

npmpackage.jsonscriptsCLI
소요 시간
⏱ 약 1.5시간
난이도
📊 중급
선수 조건
🎯 단원 24
결과물
프로젝트의 명함이자 설정 파일. 의존성, 스크립트, 메타정보를 담습니다.

이 강의에서 배우는 것

  • 1`package.json`의 역할을 이해한다.
  • 2`npm init`, `npm install`, `npm run`을 사용한다.
  • 3외부 패키지를 설치해 활용한다.
  • 4`bin` 필드로 간단한 CLI를 만든다.

소개

프로젝트의 명함이자 설정 파일. 의존성, 스크립트, 메타정보를 담습니다.

핵심 개념

1. package.json

프로젝트의 명함이자 설정 파일. 의존성, 스크립트, 메타정보를 담습니다.

bash
npm init -y

최소 형태:

json
{
  "name": "my-app",
  "version": "1.0.0",
  "type": "module"
}

`"type": "module"`을 추가하면 `.js`도 ESM으로 동작합니다.

2. scripts

자주 쓰는 명령을 별칭으로 등록합니다.

json
{
  "scripts": {
    "start": "node index.js",
    "hello": "node -e \"console.log('hi')\""
  }
}

실행:

bash
npm start
npm run hello

`start`, `test` 등은 `run` 없이 실행됩니다.

3. dependencies

bash
npm install chalk@5

`node_modules/`에 설치되고 `package.json`의 `dependencies`에 추가됩니다.

javascript
import chalk from 'chalk';
console.log(chalk.green('성공!'));

개발용 도구는 `--save-dev` (또는 `-D`).

4. CLI 만들기 (`bin`)

json
{
  "bin": { "greet": "./bin/greet.js" }
}

`bin/greet.js` 첫 줄에 shebang:

javascript
#!/usr/bin/env node
console.log('hi', process.argv[2] ?? 'world');

`npm link` 후 터미널에서 `greet 홍길동` 가능.

핵심 예제

폴더다루는 내용
01_init/최소 package.json
02_scripts/npm scripts
03_dependency/외부 패키지(chalk)
04_cli/bin 필드로 CLI 만들기

각 폴더에서 `npm install` 후 실행합니다.

src/01_init/package.json

json
{
  "name": "init-demo",
  "version": "1.0.0",
  "description": "npm init 최소 예제",
  "type": "module",
  "license": "MIT"
}

src/02_scripts/index.js

javascript
/**
 * npm start로 실행되는 진입점
 */
console.log('start 스크립트로 실행됨!');
console.log('현재 시각:', new Date().toLocaleString('ko-KR'));

src/02_scripts/package.json

json
{
  "name": "scripts-demo",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "hello": "node -e \"console.log('Hello from npm script')\""
  }
}

src/03_dependency/index.js

javascript
/**
 * chalk 패키지 사용 예제
 * 먼저: npm install
 * 실행: npm start
 */
import chalk from 'chalk';

console.log(chalk.green('성공 메시지'));
console.log(chalk.red.bold('빨간 굵은 글씨'));
console.log(chalk.blue('파란 글씨'), chalk.yellow('노란 글씨'));

src/03_dependency/package.json

json
{
  "name": "dependency-demo",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "chalk": "^5.3.0"
  }
}

src/04_cli/bin/greet.js

javascript
#!/usr/bin/env node
/**
 * 간단한 CLI: greet 홍길동
 * 설치 테스트: 이 폴더에서 npm link 후 터미널에서 greet 이름
 */
const name = process.argv[2] ?? 'world';
console.log(`안녕하세요, ${name}님!`);

src/04_cli/package.json

json
{
  "name": "greet-cli",
  "version": "1.0.0",
  "type": "module",
  "bin": {
    "greet": "./bin/greet.js"
  }
}

자주 하는 실수

  1. `node_modules`를 git에 커밋.
  2. `package-lock.json`을 무시 — 버전 고정 보장이 깨짐.
  3. `^`, `~` 의미 혼동 (`^5.0.0`은 5.x 허용).
  4. ESM에서 `"type":"module"` 누락 → `import` SyntaxError.
  5. CLI shebang `#!/usr/bin/env node`를 빼먹어 직접 실행 불가.

FAQ

Q1. yarn/pnpm은?

대체 패키지 매니저. 기본은 npm으로 익히면 됩니다. **Q2. 전역 설치는 언제?** A. CLI 도구 정도. 프로젝트 의존성은 로컬 설치. **Q3. 의존성을 지우려면?** A. `npm uninstall <패키지>`.

과제

이름을 입력받아 인사하는 CLI를 만드세요.

homework/README.md

## 과제 1 — 인사 CLI `readline`으로 이름을 입력받아 인사 메시지를 출력하는 CLI를 만드세요.

  • `package.json`에 `start` 스크립트 등록.
  • 실행: `npm start`
  • 입력 후 `안녕하세요, OOO님! 환영합니다.` 출력.

homework/answer/homework_01/index.js

javascript
/**
 * 과제 1: readline으로 이름을 입력받아 인사
 * 실행: npm start
 */
import { createInterface } from 'node:readline/promises';
import { stdin as input, stdout as output } from 'node:process';

const rl = createInterface({ input, output });

const name = await rl.question('이름을 입력하세요: ');
console.log(`안녕하세요, ${name.trim() || '익명'}님! 환영합니다.`);

rl.close();

homework/answer/homework_01/package.json

json
{
  "name": "greet-input",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node index.js"
  }
}

다음 단원

🎉 강의를 완주했습니다!

25편을 모두 마쳤다면 이제 다음을 시도해 볼 수 있습니다:

  • TypeScript 입문 — JS에 타입 시스템 추가
  • React/Vue 등 프레임워크
  • Node.js 심화 (Express, 데이터베이스 연결)
  • 빌드 도구 (Vite, esbuild)

수고하셨습니다!

예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗