React 컴포넌트 제작기 3 / 3

컴포넌트 제작의 마지막인 이번 포스팅은, npm에 publish하는 과정과 관리에 대해 다루고자 한다.

react-simple-image-slider를 제작하면서 쓰는 포스팅.

npm

npm에 먼저 배포를 하고자하려면 계정이 있어야 한다.
npm에 방문하여 가입을 먼저 하자.
그리고 아래와 같은 단계를 거치면 손쉽게 배포할 수 있다.

npm init

아래 명령어를 통해 package.json의 기본 정보들을 초기화할 수 있다.
이미 npm package가 존재하는 디렉토리에서도 실행이 가능하며,
비어있는 디렉토리에서 명령어를 실행해도 가능하다.
( 단, 이미 package.json이 존재한다면 입력받는 정보들을 overwrite 하게 된다. )

npm init

위의 터미널에 명령어를 입력하면, 아래와 같은 순으로 데이터 입력을 받는다.

package name
version
description
git repository
keywords
author
license

여기서 개발한 컴포넌트의 package.json을 예시로 확인해보자.

{
  "name": "react-simple-image-slider",
  "version": "1.0.2",
  "description": "simple image slider component for react",
  "main": "dist/ImageSlider.js",
  "scripts": {
    "example": "webpack-dev-server --inline --mode development",
    "build": "rollup -c",
    "build:watch": "rollup -c --watch"
  },
  "keywords": [
    "reactjs",
    "react",
    "react-component",
    "react gallery",
    "react slider",
    "image gallery",
    "image slider"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/kimcoder/react-simple-image-slider.git"
  },
  "author": {
    "name": "kimcoder",
    "email": "kimcoder@me.com"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/kimcoder/react-simple-image-slider/issues"
  },
  "homepage": "https://github.com/kimcoder/react-simple-image-slider#readme",
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

여기에 크게 부가적인 설명이 필요할 것 같지 않지만 조금 신경써야 할 부분이 있다면,
컴포넌트 제작시 dependencies와 devDependencies를 잘 구분하여 모듈을 설치하고 작업을 해야한다.
배포가 될 필요가 없고 컴포넌트 개발에만 필요한 모듈들은 devDependencies로 설치를 해주어야 한다.

npm ignore

git과 마찬가지로 npm에도 특정 디렉토리, 파일들을 ignore 할 수 있다.

.DS_Store
.vscode
.git*

example
node_modules
npm-debug.log
yarn-debug.log
yarn-error.log

이것은 역시 환경에 따라 다르겠지만, 기본적으로 컴포넌트 사용시에만 필요한 파일들을 기준으로 배포하자.
개발시 사용하였던 테스트나 예제, 모듈들, 로그 등의 파일들은 필요가 없으니 추가해주자.

npm adduser

배포 전, 아래와 같은 npm cli를 통해 로그인을 해주도록 하자.

npm adduser

로그인이 완료되면 아래와 같이 Logged in as 유저라는 메시지를 볼 수 있을 것이다.

test for npm publish

테스트는 실제 npm install을 통하여 하는 것이 좋다.
물론, 아직 배포를 하지 않았기 때문에 아래와 같이 컴포넌트의 루트디렉토리 경로를 통해 설치해보자.

npm install /Users/KIMCODER/Documents/react-simple-image-slider/
or
npm install ../react-simple-image-slider/

실제 컴포넌트를 사용하는 환경에서 import하여 정상적으로 사용이 가능하다면, 배포해도 좋을 것이다.

npm publish

배포를 위한 명령어는 아래와 같다.

npm publish

package.json의 version에 따라 배포가 되며, 만약 최초배포가 아닌 경우는 version을 업그레이드하여 publish를 하면 된다.
배포가 정상적으로 완료가 되면, https://www.npmjs.com/package/이름의 URL에서 확인할 수 있다.
또는, https://www.npmjs.com/settings/${계정 아이디}/packages에서도 확인이 가능하다.

npm에 모듈 배포를 직접 한 번 경험을 해보면 어렵지않다는 것을 느낄 수 있다.

Git

추가적으로 npm 외에 git 관련 내용도 조금 다루어보자.
npm과 git의 소스는 기본적으로 동일한 버전으로 관리가 되어야 한다.
하지만, git에서 ignore 대상은 조금 다를 수 있다.
npm에서는 사용되는 중심으로 소스가 배포되어야 한다면, git은 컴포넌트 개발중심의 소스가 배포하도록 하자.
npm과 github의 역할에 대해 생각하면 충분히 납득이 가능하리라 예상한다.

CHANGELOG.md를 생성하여 버전별로 어떤 것들이 바뀌는지에 대해 기록하면 좋을 것 같다.

마치며

컴포넌트 제작의 결과물은 Git repository에서 확인할 수 있으며 NPM Package에서도 볼 수 있다.
거창한 모듈, 컴포넌트가 아니더라도 개발자들이 꼭 한 번쯤은 경험하면 좋을 것 같다 :)

@kimcoder