본문 바로가기
프로그래밍 개발/프론트엔드 개발자 기본 지식

Npm

by Jinseok Kim 2022. 4. 12.
반응형

Npm

 

  • N은 Node는 Node.js를 의미하며 P는 package로 만들어진 것들을 의미합니다.  package는 모듈이라고도 불리는데 패키지나 모듈은 프로그램보다는 조금 작은 단위의 기능들을 의미합니다. 그리고M의 Manager는 관리자를 의미합니다. 즉 npm이라는 것은 Node.js로 만들어진 pakage(module)을 관리해주는 툴이라는 의미를 가지고 있다는 것을 알 수 있습니다.
  • 이름처럼 npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 공개된 모듈들을 설치하고 활용할 수 있고 프로그램보다 조금 작은 단위인 이 모듈들을 필요에 따라서 이런 저런 모양으로 쌓아서 활용을 할 수 있다고 하는데 필요한 기능을 적절하게 활용할 수 있다면 개발자 입장에서는 매우 편리한 기능들입니다.

 

 

 

Npm 기본 사용

 

1. node.js를 설치하면 내장(built in)되어 있어 node.js 는 npm을 사용하기 위해서 꼭 필요합니다.

 

 

2. 그 다음으로 가장 먼저 해야 할 일은 사용할 모듈을 다운로드 하는 일입니다. 모듈 다운로드는  <npm install <module name>>과 같은 명령어로 할 수 있습니다.

 

npm install --g

 

 

3. 그리고 <npm init>명령어를 치면 name을 시작으로 여러 가지를 입력을 요청받는데 이름 규약 같은 것을 위반하지 않았으면 엔터를 치면 defaul로 등록이 됩니다. 그 단계에서 바로 설정을 해도 되고 나중에 수정할 수도 있습니다.

 

{
  "name": "application-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "http-server": "0.9.0",
    "rimraf": "2.6.1",
    "webpack": "2.2.1",
    "worker-loader": "0.8.0"
  },
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "webpack --config webpack/webpack.config.js",
    "http-server": "http-server -c-1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/aaa/bbb.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/aaa/bbb/issues"
  },
  "homepage": "https://github.com/aaa/bbb#readme"
}

여기서 중요한 부분은 "scripts" 와  "dependencies" 입니다. script는 우리가 run 명령어를 통해서 실행할 것들을 적어두는 것이고 dependencies의 경우는 설치할 모듈들을 의미합니다. npm install -g 같이 설치를 해서 자동으로 기록할 수 있습니다.

 

 

 

4. 이렇게 package.json 파일이 정리되면 배포를 해야 할 때  파일만 같이 배포를 한다면 해당 프로그램 개발에 사용되었던 모듈을 그대로 인스톨할 수 있게 됩니다.  한번에 하는 install은 <npm install> 명령어로 간단하게 할 수 있습니다. 

 

 

 

5. 마지막으로 scipts 안의 내용을 실행하기 위해서는 <npm run <name>> 같은 형식으로 실행할 수 있습니다. 

 

npm run build

 

반응형

'프로그래밍 개발 > 프론트엔드 개발자 기본 지식' 카테고리의 다른 글

Babel 바벨  (0) 2022.04.12
Webpack 웹팩  (0) 2022.04.12
ECMAScript2015(ES6)  (0) 2022.04.10
DOM API (Web API) and Concept  (0) 2022.04.10
JavaScript의 동작 원리  (0) 2022.04.10

댓글