[리뷰] npm 패키지(모듈) 배포 후기

안녕하세요~ 👋
오늘은 npm에 나만의 패키지를 배포해본 후기를 적어볼게요.

npm이 뭐죠?

npm은 Node Package Manager의 줄임말로 노드환경에서 사용할 수 있는 자바스크립트 패키지들을 관리해주는 프로그램이에요.

무엇을 왜 배포했죠?

저는 사이드 프로젝트로 쓸만한 프로그램들을 만들어 보곤 하는데, 프로그램이 많아지다보니 버튼, 인풋, 모달, 레이아웃 등 이런 컴포넌트들을 중복해서 개발해야하는 문제가 발생했어요. 그래서 공통 컴포넌트들을 npm을 이용해서 배포하기로 마음 먹었어요. 그리고 기왕 배포하는 김에 Storybook을 사용해서 컴포넌트를 시각화하면 더 좋겠다는 생각을 했고, 스토리북도 깃헙에 배포했어요.

개발스택

• Node, NPM
• React, CRA(create-react-app)
• Storybook
• Emotion
• Typescript, tsc(typescript compiler)

환경구축

Node, NPM

노드 홈페이지에서 노드를 다운받고 설치해줘요. 노드 설치시 npm도 같이 설치돼요~
https://nodejs.org/ko/download

React, CRA

CRA를 사용해서 리액트를 설치해줬어요. 저는 typescript를 선호해서 타입스크립트 템플릿을 추가했어요. 터미널(Git bash)을 띄우고 아래 명령어를 입력해서 리액트 폴더를 생성해줘요.

npx create-react-app [프로젝트명] --template typescript
cd [프로젝트명]

Storybook

스토리북은 리액트 프로젝트 안에서 아래 명령어를 입력하면 설치할 수 있어요.

npx storybook init

설치가 끝나면 아래 명령어로 실행, 빌드가 잘 되는지 확인해보세요.
실행이 잘 됐다면 웹브라우저가 열리면서 기본적인 스토리북 화면을 볼 수 있어요.
빌드가 잘 됐다면 storybook-static 폴더가 생겼을거에요. 이 폴더를 웹서버에 배포하면 빌드된 스토리북을 볼 수 있어요~

npm run storybook
npm run build-storybook

Emotion

저는 스타일을 작성할 때 이모션을 주로 사용해요. 이모션이 아니라도 본인 취향에 맞는 스타일 툴을 고르시면 되고, 해당 툴의 문서를 확인하시고 빌드에 필요한 설정을 꼭 확인해주셔야해요. 이모션은 아래 명령으로 설치 할 수 있어요.

npm i @emotion/react @emotion/styled

Typescript, tsc

이번 프로젝트에서 가장 골치였던 녀석이 바로 타입스크립트였는데요. 😭 배포를 위해선 ts 파일을 js 파일로 변경해줘야해요. 보통 ts 빌드툴로 babel 또는 tsc를 사용하는데요. 저는 CRA로 앱을 만들어서 babel을 사용하기에 여러 설정을 변경해줘야해서 tsc를 이용해서 빌드했어요.
ts 빌드 설정이 좀 복잡한데, tsconfig.json과 package.json을 설정해주셔야 해요.

// tsconfig.json
// 저는 module, jsxImportSource, noEmit, declaration, outDir 설정이 제대로 안되어있어서 조금 애먹었었어요. 아래 설정과 tsconfig 문서를 참고하셔서 설장해보세요.
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "noEmit": false,
    "declaration": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

// package.json
// name, version, description, keywords, private, homepage, repository, author은 npm 배포를 위한 설정이구요. main, types, browser는 ts 빌드를 위한 설정이에요.
{
  "name": "go-storybook",
  "version": "0.1.6",
  "description": "react storybook",
  "keywords": [
    "react",
    "storybook",
    "typescript",
    "component",
    "presentor"
  ],
  "browser": "./browser/specific/main.js",
  "homepage": "https://imki123.github.io/go-storybook/",
  "repository": "imki123/go-storybook",
  "author": "imki123 <popping2606@gmail.com>",
  "private": false,
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
}

.gitignore

이 두가지 설정도 중요한데요.
.gitignore는 git commit에 포함시키지 않을 파일들을 추가해주시구요.

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build
dist
storybook-static

# misc
.DS_Store
.env

npm-debug.log*
yarn-debug.log*
yarn-error.log*

.npmignore

.npmignore는 npm publish에 포함시키지 않을 파일을 추가해주셔야해요.

# npmignore
**/.*
.storybook
/node_modules
/public
/storybook-static
.env
package-lock-json
tsconfig.json

npm 배포

npm에 배포하기 위해 tsc 명령을 사용해서 빌드를 해줘요. dist 폴더를 비워주는 스크립트를 사용했어요. package.json의 script에 "build-npm": "rm -rf dist && mkdir dist && tsc" 추가해서 사용해요.

npm run build-npm

빌드가 끝나면 버전을 올리고 npm publish 해줘요. 저는 npm에 otp를 사용중이서 --otp= 옵션을 추가했어요.

npm version patch
npm publish
OR
npm publish --otp=000000

(npm을 처음 배포하거나 로그인이 안되어 있는 경우 npm adduser로 로그인을 해야해요.)

짜잔~! npm에 등록됐어요. 👏
배포가 완료되면 npm에서 완료 이메일이 와요 ㅎㅎ
배포가 완료된 상태에서 내정보를 들어가면 아래처럼 패키지를 확인할 수 있어요.

글이 많이 부족하지만 이틀동안 배포한다고 고생한걸 기록하고자 블로그에 남겨요.
읽어주셔서 감사합니다. 이걸로 npm 배포 후기를 마칠게요~~ 안녕~ 👋