이동규

개발 잘하고 싶다

1. npm이란?

npm(node package manage)은 자바스크립트용 패키지 매니저이다. 유저가 만든 패키지를 등록하는 저장소를 의미하기도 하고 CLI(Command Line Interface)를 의미하기도 한다. Node.js를 설치할 때 함께 설치된다.

2. 패키지와 모듈

패키지

Node.js에서 패키지는 package.json으로 정의한 파일 또는 디렉터리를 의미한다. 패키지에는 package.json이 꼭 포함된다. 다음에 정리한 것들 모두가 패키지가 될 수 있다.

  1. package.json 파일이 있는 디렉터리
  2. 1번을 압축한 파일
  3. 2번을 내려받을 URL 주소
  4. 3번 정보를 가지고 npm 저장소에 <패키지명>@<버전>으로 등록된것
  5. 4번을 가리키는 <패키지명>@<태그>
  6. <패키지명>만 있는 경우는 5번에서 latest 태그를 가리킴
  7. 1번을 결과로 주는 Git URL

결과적으로 package.json으로 정의한 코드 뭉치가 패키지라 볼 수 있다.

모듈

모듈은 [node_modeules] 디렉터리 아래에 있는 파일 또는 디렉터리를 말한다. node_modules에 있는 파일이나 디렉터리를 require() 함수로 읽을 수 있다.

3. Pacakage.json 파일 만들기

순서 1. package.json 파일 생성

  • 패키지를 만드려면 package.json이 필요하다. 직접만들 수도 있지만, npm init 명령을 사용해 package.json 파일을 만드는 것이 추천된다. bash 명령어와 생성된 pacakage.json 파일은 아래와 같다.
// sample-package
npm init -y

// sample-package > package.json
{
  "name": "sample-package",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

순서 2. index.js 파일 추가

  • package.json 경로에 index.js 파일을 추가, 아래와 같이 코드를 추가한다. 노출할 객체는 사칙연산 함수로 구성되어있다.
// sample-package > package.json

// 1. 모듈을 require 함수로 포함시킬 때 실행
console.log("require로 부르면 실행된다.");

module.exports = { // 2. 외부로 노출할 객체를 저장
    add: (a, b) => a + b,
    sub: (a, b) => a - b,
    multi: (a, b) => a * b,
    div: (a, b) => a / b
}

순서 3. sample-package를 다른 디렉터리에 설치하고 불러오기

순서 3-1. 새로운 경로를 다음과 같이 생성하고, sample-package를 설치

[경로]

  • sample-package
    • index.js
    • package.json
  • chapter4
    • sample-test ← 여기에 sample-package 설치

[bash]

cd sample-test
npm install ../../sample-package

[결과]

image-20230812165621851

순서 3-2. sample-test 디렉터리에 index.js를 만들고 sample-package를 테스트
  • sample-package 패키지가 sample-test 경로에 설치되어 정상적으로 실행됨을 확인할 수 있다.
// sample-test > sample-test.js

const calc = require("sample-package"); // sample-package 불러오기

const a = 17;
const b = 3;

console.log(calc.add(a, b));
console.log(calc.sub(a, b));
console.log(calc.multi(a, b));
console.log(calc.div(a, b));

image-20230812170036623

※ npm 리포지에 패키지를 업로드할 수도 있는데, 이번에 다루지는 않겠다.

4. 패키지 설치, 업데이트, 삭제

  • 아래와 같이 npm을 통해 패키지를 다운받아 설치할 수 있다.
npm install <패키지명>@<태그 | 버전 | 버전 범위>
  • npm ls 커맨드로 설치한 패키지의 리스트를 확인할 수 있다.
// sample-test

npm ls
└── sample-package@1.0.0 -> .\..\..\sample-package
  • 아래와 같이 특정 패키지를 삭제할 수 있으며, 삭제 예시이다.
npm uninstall [@스코프/] 패키지명[@버전] [-S | --save | -D | --save-dev | -O | --save--optional]

// 삭제 예시
npm uninstall express --save
npm uninstall @types/react
npm uninstall jest --save-dev
npm uninstall plugin --save-optional

5. 스크립트 기능과 NPX

npm은 명령어를 지정해 실행하는 스크립트 기능도 제공한다. 스크립트 기능은 앱 시작(start), 중지(stop), 빌드(build), 배포(deploy), 테스트(test) 등의 명령어를 터미널에 매번 입력하지 않고 package.json에 정의함으로써 조금 더 간편하게 명령어를 실행하는 기능이다. (※ Azure의 CI/CLI에서 봤던 기억이 있다.)

1. npm 스크립트 파일 정의하기

  • 아래와 같이 새로운 경로(test-scripts)를 생성하여, package.json 파일을 생성 후, scripts 코드를 작성한다.
// test-scripts > package.json

{
  "name": "test-scripts",
  "version": "1.0.0",
  "scripts": {
    "hello": "echo 'hello Node.js'"
  }
}
  • 터미널에서 npm run hello를 실행한다.

image-20230812181237972

  • scripts에 정의된 명령 중, start, stop, test, restart는 run 없이 바로 실행할 수 있다.
// test-scripts > package.json

{
  "name": "test-scripts",
  "version": "1.0.0",
  "scripts": {
    "hello": "echo 'hello Node.js'",
    // 아래부터 새로 추가된 scripts 명령어
    "test": "echo 'test Node.js'",
    "stop": "echo 'stop Node.js'",
    "start": "echo 'start Node.js'",
    "restart": "echo 'restart Node.js'"
  }
}

image-20230812181650060

  • 스크립트 실행 전과 후에 실행될 스크립트를 지정할 수 있다. 명령어 앞에 pre 또는 post를 붙이면 된다.
// test-scripts > package.json

{
  "name": "test-scripts",
  "version": "1.0.0",
  "scripts": {
    "hello": "echo 'hello Node.js'",
    "prehello": "echo 'PRE HELLO'",
    "posthello": "echo 'POST HELLO'"
  }
}

image-20230812182034145

2. NPX로 코드 포매팅 명령어 prettier 실행하기

NPX란?

NPX는 Node Package eXecute의 약자이다. Node 패키지 실행자라고도 한다. Node.js 패키지는 대부분 프로젝트에 임포트해서 사용하지만, 개발할 때는 프로젝트 실행, 관리, 테스트 등에 명령형 패키지를 다수 사용한다. 대표적으로 prettier, eslint, jest 같은 포매팅, 문법 검사, 단위 테스트 도구들이 있다. npx를 사용하면 npx {패키지명}처럼 경로를 생략해 실행할 수 있다.

순서 1. chapter4 디렉터리 밑에 test-npmx 디렉터리를 만들고 prettier를 설치한다.

mkdir test-npx
cd test-npx
npm install prettier

순서 2. 설치가 완료되면 test-npx/node_modules/prettier/package.json을 확인한다. 여기서 ‘bin’ 설정이 npx 명령어에서 실행하는 파일이다.

{
  "name": "prettier",
  "version": "3.0.1",
  "description": "Prettier is an opinionated code formatter",
  "bin": "./bin/prettier.cjs", // ※ npx로 실행하는 명령어의 경로 지정
  // ... 생략 ...
}

순서 3. prettier 적용 여부를 확인하기 위해, 포맷이 엉망인 예시를 index.js 파일을 생성하여 작성한다.

// test-npx > index.js

function getRandomInt(
    min,
    max) /* 주석도 포매팅 될까? */
{
    return Math.floor(
        Math.random()
        * (max - min)) + min;
}

console.log(
    getRandomInt
    (10, 20));

순서 4. 터미널에 아래와 같이 npx 명령어로 prettier를 실행한다.

image-20230812184029476

순서 5. index.js 파일을 열어보면, 알맞은 형식으로 포매팅되었음을 확인할 수 있다.

// test-npx > index.js

function getRandomInt(min, max) /* 주석도 포매팅 될까? */ {
    return Math.floor(Math.random() * (max - min)) + min;
}

console.log(getRandomInt(10, 20));

참고

다음에 다루게 될 것

  • JS에서 비동기 처리하기

댓글남기기

참고