NPM

• npm은 node(node.js) package manager의 약자 입니다. 이름에서 볼 수 있는 것과 같이 원래는 node.js의 패키지(독립된 모듈)을 개발하고, 배포, 공유하기 위한 관리 툴이라고 볼 수 있습니다.
• npm은 현재 npm package자체를 이야기하는 단어로도 사용되고, node package manager라는 용어로도 사용 됩니다.
• 이름이 말해주는 것과 같이 당연히 node.js 환경위에서 동작 합니다.

Package 와 Module

• 위 2가지 단어가 매번 나오기 때문에 혼동이 있을 수 있습니다. 이 두가지 개념은 언어마다 약간씩은 다를 수 있지만 대체적으로 Scale의 차이입니다.
  • Module: 작은 단위로 독립된 하나의 기능을 수행합니다.
  • Package: Module들이 조합되어 Module보다 복잡적인 기능을 수행합니다. 하지만 역시 기능 자체는 일관적인 기능 입니다.
• 예를 들어 두수를 더하기, 빼기, 나누기, 곱하기 하는 Module을 각각 만들었다고 가정하고 이를 파일로 저장했다고 가정 합시다.

  • add.js, substract.js, multiple.js, divide.js

    function addNumbers(a, b) {
      return a + b;
    } 

    function substractNumbers(a, b) {
      return a - b;
    } 

    function multipleNumbers(a, b) {
      return a * b;
    } 

    function divideNumbers(a, b) {
      return a / b;
    } 

• 이렇게 4개의 모듈이 만들어 졌습니다.
• 그리고 이것들을 하나로 묶습니다. 그리고 cal.js라고 저장 합니다. 아래 코드는 단순히 각 파일을 하나로 묶어 export만 했지만, 하나의 함수로 만들수도 있습니다.
• javascript export 참조

  export * from 'add.js'
  export * from 'substract.js'
  export * from 'multiple.js'
  export * from 'divide.js'
  

• cal은 add, subscract, multiple, divide 모듈를 묶어 만들어진 하나의 package와 같은 역할을 합니다.
• 이것을 npm package로 만든다면 npm install cal 이라는 이름으로 설치하고 사용하면 4가지 모듈의 기능을 모두 사용할 수 있습니다.
• 하지만 꼭 이렇게 복합적인 기능으로 package를 만들 필요는 없습니다.
  • copy하는 기능만 있는 npm 입니다.
    • https://www.npmjs.com/package/cpy
      
  • 복합적이지 않은 단순한 모듈이지만, 편리성이 높은 것들도 하나의 npm package로 만들 수 있습니다.

NPM Package의 사용 예시

• 일단 가장 흔하게 사용되는 react 프로젝트를 기반으로 npm이 어떻게 사용되는지 살짝 살펴보겠습니다.
• https://github.com/direbunny/calculator → github에 있는 react로 만든 간단한 계산기 입니다.
• package.json 파일을 열어 봅시다.

  {
    "name": "calculator",
    "version": "0.1.0",
    "license": "MIT",
    "homepage": "http://ahfarmer.github.io/calculator",
    "devDependencies": {
      "chai": "^4.2.0",
      "gh-pages": "^2.0.1",
      "prettier": "^1.17.1",
      "react-scripts": "^3.0.1"
    },
    "dependencies": {
      "big.js": "^5.2.2",
      "github-fork-ribbon-css": "^0.2.1",
      "react": "^16.8.6",
      "react-dom": "^16.8.6"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject",
      "deploy": "gh-pages -d build"
    },
    "prettier": {
      "trailingComma": "all"
    },
    "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }

• 위와 같은 json 정보를 확인할 수 있습니다. 이중 dependencies 항목을 보면

  "big.js": "^5.2.2",
  "github-fork-ribbon-css": "^0.2.1",
  "react": "^16.8.6",
  "react-dom": "^16.8.6" 

• dependencies 는 이 프로젝트가 의존하고 있는 npm package입니다. 4개의 npm을 이 프로젝트가 사용하고 있음을 의미 합니다.
• devDependencies 를 확인해 봅시다.

  "chai": "^4.2.0",
  "gh-pages": "^2.0.1",
  "prettier": "^1.17.1",
  "react-scripts": "^3.0.1"

• devDependencies 는 이 프로젝트를 개발하기 위해 의존하고 있는 npm package입니다. 4개의 npm을 이 프로젝트를 개발하기 위해 사용하고 있음을 의미 합니다.
  • 주고 개발 과정에서 사용되는 컴파일이나 code lint등을 위해서 사용되는 모듈입니다.
• devDependencies 프로젝트 개발를 위해서만 사용됩니다. 위 프로젝트에서 react로 만들어진 계산기를 동작 시킬때는 위 4개의 npm package의 모듈이나 코드는 전혀 사용되지 않습니다.

📜 NPM 의 기본 사용법

• NPM의 기본 사용법은 간단합니다. install 한후 import하여 사용하면 됩니다.
• NPM을 install 하기 위해서 사용되는 프로그램은 대표적으로 2가지가 있습니다.
• 하나가 바로 npm 이고, 다른 하나가 yarn 입니다.
• 아래 각각의 명령어 입니다.

  Command	NPM	YARN
  Install dependencies	npm install	yarn
  Install package	npm install [package]	yarn add [package]
  Install dev package	npm install --save-dev [package]	yarn add --dev [package]
  Uninstall package	npm uninstall [package]	yarn remove [package]
  Uninstall dev package	npm uninstall --save-dev [package]	yarn remove [package]
  Update	npm update	yarn upgrade
  Update package	npm update [package]	yarn upgrade [package]
  Global install package	npm install --global [package]	yarn global add [package]
  Global uninstall package	npm uninstall --global [package]	yarn global remove [package]

• NPM 기준으로 설치해서 사용하고자 하는 package를 npm install [package] 로 설치 합니다.
• 설치후 package를 코드에서 import해서 사용하면 됩니다.

const { now } = require("time");

console.log("Now:", now());

• ES6 이상 Format을 사용한다면 import 키워드를 사용할 수 있습니다.