NPM 공식문서 따라 읽기

sham·2025년 1월 11일
0

개요

프론트를 개발하며 숨쉬듯 사용했던 npm install, npm run dev, npm run build.

그러나 내가 사용하고 있는 npm이 정확히 무엇인지, 제대로 알고 있지 않았다.

NPM은 Node.js의 패키지를 관리할 수 있는 도구이다.

Python의 pip나 Ruby의 gem처럼, 웹 사이트에서 패키지를 다운로드하여 컴퓨터에 설치할 수 있다.

공식 문서를 따라가며 NPM이 무엇인지 제대로 알아보자.

본문

About npm

About npm | npm Docs

npm은 세상에서 가장 큰 소프트웨어 저장소이다.

개인부터 조직까지 npm을 통해 오픈 소스 개발부터 사내 개발을 관리하고 있다.

npm을 구성하는 것은 다음 세 가지 요소이다.

  • 웹사이트 - 남들이 만든 패키지를 조회하고, 직접 만들어서 관리할 수 있다.
  • CLI - 터미널 상에서 npm와 상호작용한다.
  • 레지스트리 - npm 상의 모든 모듈들이 저장되는 곳. npm 서버에서 우리는 모듈들을 설치받는다.

사용처

  • 남들이 만들어 Node.js 기반 패키지를 다운받아 사용할 수 있다. npx 없이!
  • 내가 만든 JS 모듈을 다른 사용과 공유할 수 있다. 특정 개발자에게만 제한할 수도 있다.
  • 조직을 만들어 패키지를 관리할 수도 있다.
  • 모듈의 여러 버전을 만들고, 의존성을 관리할 수 있다.

Packages and modules

About packages and modules | npm Docs

packages와 modules은 다음과 같이 구분된다.

  • packages
    • package.json에 의해 정의되는 파일이나 디렉토리
    • package.json을 포함하며 npm registry 상에 배포되어 있어야 한다.
    • packages를 만들면 자동으로 사용자나 조직 이름을 딴 스코프가 부여된다. (사용자 이름이 gulsam00이면 @gulsam00/[패키지 이름])
  • modules
    • Node.js의 require() 함수로 불러올 수 있는 node_modules 디렉토리의 파일이나 디렉토리이다.
      • package.json에 “main” 필드가 포함된 폴더나, JS 파일이 이에 해당한다.

모든 모듈이 패키지는 아니며, package.json 파일을 가진 모듈을 패키지로 간주한다.

Configuring/package.json

package.json | npm Docs

굉장히 길다. 몇몇 부분만 발췌해보았다.

package.json은 문서이다. 개발자가 배포한 패키지에 대해 설치, 관리를 할 때 도움이 될 문서이다.

패키지가 무엇을 의존하며, 어떤 버전이고 어떻게 배포하는지에 대한 명세가 담겨있다.

{
  "name": "ultra-exact-ncst",
  "version": "1.1.6",
  "description": "nowcast with coordinate",
  "main": "dist/index.js",
  "type": "module",
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "test": "npx ts-node src/index.ts"
  },
  "author": "GulSam00",
  "license": "ISC",
  "Keywords": [
    "nowcast",
    "coordinate"
  ],
  "dependencies": {
    "axios": "^1.7.7",
    "date-fns": "^4.1.0"
  },
  "devDependencies": {
    "dotenv": "^16.4.5",
    "typescript": "^5.6.3"
  },
  "files": [
    "dist/**/*"
  ]
}

위는 내가 직접 만든 패키지의 package.json이다. 배포하는 패키지에는 어떤 요소가 들어가는지 확인해보자.

  • main
    • 모듈을 사용할 때, 해당 모듈의 진입점이 될 경로를 설정한다.
      • require("ultra-exact-ncst") 를 호출했을 때, main에 지정한 모듈을 export 가 반환되는 것이다.
    • 이 경로는 패키지 폴더의 루트를 기준으로 상대 경로여야 한다.
    • main이 설정되지 않으면 기본값으로 패키지의 루트 폴더에 있는 index.js 파일이 사용된다.
    • 배포하기 위한 패키지의 필수적이면서도 핵심적인 설정이다.
    • 내 패키지는 ts 파일을 js로 컴파일 및 번들링하여 dist/index.js라는 이름으로 저장되었기에, 해당 경로를 설정해주었다.
  • type
    • 기본값은 commonjs로, 해당 디렉토리의 모든 js 파일을 CommonJS로 간주한다.
    • "module" 로 설정하면 모든 js 파일을 ESM(ES modules)로 간주한다.
      • 즉, import, export 문법이 포함된 ESM을 사용하고 싶다면 "module"로 설정해주자…!
  • scripts
    • 주로 사용하게 될 명령어를 커맨드로 지정해서 사용할 수 있다.
    • npm run [커맨드] 형태로 CLI 상에서 사용한다.
  • dependencies
    • 이 패키지가 의존하고 있는 패키지들의 이름과 버전을 기술해놓은 명세이다.
    • 압축 파일이나 Git URL을 통해서 지정할 수도 있다.
    • npm install 시 dependencies에 있는 패키지들을 node_modules라는 디렉토리 경로에 설치하게 된다.
  • devDependencies
    • 기본적인 것은 dependencies와 동일하지만, 배포할 때는 포함되지 않을 패키지들이 이곳에 들어간다.
    • 애플리케이션 동작과 직접적인 연관은 없지만, 개발할 때 필요한 라이브러리가 이곳에 들어가는데, prettier 같은 formatter나, jest같은 테스트 도구나, 배포 시에는 js로 컴파일되는 typescript 등이 이에 해당한다.
    • npm install 시 설치되는 것은 동일하나, 배포된 해당 패키지를 설치할 때는 devDependencies의 패키지들이 설치되지 않는다.
    • 테스트 할 때 사용된 dotenv와 타입 지정을 위한 typescript가 devDependencies에 해당된다.
  • files
    • files 필드는 패키지가 종속성으로 설치될 때 포함될 항목을 설명하는 파일 패턴 배열이다.
    • .gitignore와 정반대의 역할을 한다고 보면 편하다. 무조건 설치되어야 하는 파일들을 배열 형태로 넣어준다.

Using/workspaces

workspaces | npm Docs

Workspaces(워크스페이스)는 npm CLI에서 제공하는 기능 집합을 지칭하는 일반적인 용어로, 단일 최상위 루트 패키지 내에서 로컬 파일 시스템의 여러 패키지를 관리할 수 있도록 지원하는 기능이다.

간단하게 말하면 한 package.json에서 packages라는 이름으로 구분된 작업 영역을 만들 수 있는 기능이다. 별개의 폴더를 만든다고 생각해도 좋다.

{
    "name": "workspace-example",
    "version": "1.0.0",
    "workspaces": [
        "packages/a",
        "packages/b",
        "packages/c"
    ]
}

각 패키지는 독립적인 폴더와 package.json이 존재하며, 루트인 레포지토리에서 모든 패키지 의존성을 한 번에 설치하거나 업데이트 할 수 있다.

workspace의 개별 패키지에 모듈을 설치를 하더라도 실제 모듈은 루트의 node_modules에 설치된다. 워크스페이스 내의 패키지들은 심볼릭 링크로 패키지에 접근할 수 있다.

동일한 모노레포 내의 패키지 간에 의존성을 자동으로 link하기에, 한 패키지가 다른 패키지를 의존성으로 사용할 경우 별도의 네트워크 요청 없이 바로 로컬에서 링크되어 개발 및 테스트 환경이 빨라진다.

한 레포 안에 여러 프로젝트가 있는 모노레포 환경을 쉽게 구성하고 관리할 수 있다.

레퍼런스

npm Docs

npm workspaces - FrontOverflow

profile
씨앗 개발자

0개의 댓글