NPM 이란

📌 npm 이란 nodejs(node) package manager의 약자 입니다. npm 자체가 프로그램 package 모듈을 의미하면서, 이 package 모듈 관리 프로그램을 의미 합니다.

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 substractNumbers(a, b) {
    	return a - b;
    }

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

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

  • function addNumbers(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 입니다.
• 아래 각각의 명령어 입니다.
  

  

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

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

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

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

import { now } from "./time";

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