npm이란?

npm은 Node Package Manager의 약자로 자바스크립트 프로그래밍 언어를 위한 패키지 관리자입니다. 즉, npm은 node.js에서 사용하는 모듈들을 패키지로 관리 및 배포하는 역할을 합니다.


Node.js 설치

  • 사용자의 운영체제에 맞게 다운로드 합니다.
  • [Node.js 홈페이지]](https://nodejs.org/ko/)
  • 짝수버전(왼쪽), 홀수버전(오른쪽)이 있는데 짝수버전은 안정성과 신뢰성을 지원하는 버전으로 실제 서버에 배포용으로 사용할 때 사용하고 홀수버전은 최신 기능을 지원하므로 개발용으로 사용한다.
  • 개발용으로 사용할 것이므로 오른쪽 버전을 다운로드 합니다.
  • 2021-12-08 기준, 17.2.0 최신버전

image


  • 터미널을 실행하여 node.js가 잘 설치되었는지 확인합니다.
  • 저는 윈도우에서 실행했습니다.
    C:\Users\seong>node
    Welcome to Node.js v17.2.0.
    Type ".help" for more information.
    >


  • 웹 브라우저 없이 JavaScript를 실행할 수 있습니다!
  • javaScript가 작동하는지 테스트 해보겠습니다.
  • ES6 문법인 const가 잘 작동됩니다.
  • const의 재사용이 안되는 것까지 잘되네요!
    C:\Users\seong>node
    Welcome to Node.js v17.2.0.
    Type ".help" for more information.
    > const x = 30;
    undefined
    > x
    30
    > x = 10;
    Uncaught TypeError: Assignment to constant variable.
    >


  • node.js의 버전을 확인합니다. 
      C:\Users\seong>node --version
  v17.2.0


  • npm의 버전을 확인합니다. 
      C:\Users\seong>npm --version
  v17.2.0


  • npm 을 입력합니다.
  • npm --version 처럼 명령어 사용방법에 대해 알려줍니다. 
      C:\Users\seong>npm
  npm <command>

  Usage:

  npm install        install all the dependencies in your project
  npm install <foo>  add the <foo> dependency to your project
  npm test           run this project's tests
  npm run <foo>      run the script named <foo>
  npm <command> -h   quick help on <command>
  npm -l             display usage info for all commands
  npm help <term>    search for help on <term> (in a browser)
  npm help npm       more involved overview (in a browser)

  All commands:

      access, adduser, audit, bin, bugs, cache, ci, completion,
      config, dedupe, deprecate, diff, dist-tag, docs, doctor,
      edit, exec, explain, explore, find-dupes, fund, get, help,
      hook, init, install, install-ci-test, install-test, link,
      ll, login, logout, ls, org, outdated, owner, pack, ping,
      pkg, prefix, profile, prune, publish, rebuild, repo,
      restart, root, run-script, search, set, set-script,
      shrinkwrap, star, stars, start, stop, team, test, token,
      uninstall, unpublish, unstar, update, version, view, whoami

  Specify configs in the ini-formatted file:
      C:\Users\seong\.npmrc
  or on the command line via: npm <command> --key=value

  More configuration info: npm help config
  Configuration fields: npm help 7 config

  npm@8.1.4 C:\Program Files\nodejs\node_modules\npm


프로젝트 생성 해보기

  • 프로젝트를 생성할 폴더(폴더명 : sample_01)를 만들어 줍니다.
  • 저는 E:\study\frontend 위에 만들었습니다.
  • 생성된 폴더에 이동합니다. 
      E:\study\frontend>mkdir sample_01

  E:\study\frontend>dir
      E 드라이브의 볼륨: seongsik
      볼륨 일련 번호: 1819-824F

      E:\study\frontend 디렉터리

      2021-12-08  오후 05:04    <DIR>          .
      2021-12-08  오후 05:04    <DIR>          ..
      2021-12-08  오후 05:04    <DIR>          sample_01
                  0개 파일                   0 바이트
                  3개 디렉터리  14,627,414,016 바이트 남음
    
  E:\study\frontend>cd sample_01

  E:\study\frontend\sample_01>


  • 프로젝트 생성하기 : npm init
  • package name, version, description … 입력란이 나오지만 전부 엔터
  • package name defalut는 폴더명입니다. 
      E:\study\frontend\sample_01>npm init

  This utility will walk you through creating a package.json file.
  It only covers the most common items, and tries to guess sensible defaults.

  See `npm help init` for definitive documentation on these fields
  and exactly what they do.

  Use `npm install <pkg>` afterwards to install a package and
  save it as a dependency in the package.json file.

  Press ^C at any time to quit.
  package name: (sample_01)
  version: (1.0.0)
  description:
  entry point: (index.js)
  test command:
  git repository:
  keywords:
  author:
  license: (ISC)
  About to write to E:\study\frontend\sample_01\package.json:

  {
  "name": "sample_01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
  }


  Is this OK? (yes)


  • sample_01 폴더 밑에 package.json 파일이 생성되었습니다.
  • 해당 파일을 실행해보면 프로젝트 정보들이 들어있습니다.

image