디자인 시스템 npm 배포하기

sikkzz·2024년 4월 10일

Project

목록 보기

4/9

🖐️ 시작하며

프로젝트 제작 중 공통 컴포넌트로 만들어 사용하던 UI 컴포넌트들이 슬슬 거슬리기 시작했습니다. UI 컴포넌트 제외하고도 common 디렉토리에 여러 페이지들에서 사용하는 컴포넌트들이 늘어나기 시작하면서 점점 파일들이 늘어나기 시작했습니다.

원래 계획은 프로젝트 1차 제작 완료 후에 monorepo로 디자인 시스템과 서비스를 나눠서 운용하려 했으나 현재도 코드가 너무 번잡해지는걸 체감해서 우선은 따로 분리하고 이후에 모노레포로 마이그레이션을 진행하기로 결정했습니다.

❗️개발 환경은 다음과 같습니다

React

TypeScript

Vite

Emotion

npm 로그인

우선은 npm 배포를 위해 npm 공식 홈페이지 계정이 필요합니다. 사이트에 들어가서 회원가입을 진행해줍니다.

회원가입 이후 사이트에서 로그인이 아닌 우리의 프로젝트 터미널로 돌아와서 로그인을 진행해줍니다.

npm login

터미널에서 id, pw, email을 입력해주고 이메일 인증 번호를 입력해주면 정상적으로 로그인이 진행됩니다.

프로젝트 설정

저는 이미 개발된 코드들을 배포만 해주었기에 따로 프로젝트 설정이나 개발을 진행하지 않았습니다.

다만 해당 프로젝트 설정에 대해 궁금하시다면 프로젝트 초기 설정 글을 참고하시기 바랍니다. 설정은 해당 글과 동일합니다.

이후 추가적인 설정이 몇가지 필요합니다.

package.json

라이브러리 배포를 위해 package.json에 추가적으로 작성해주어야 하는 정보들이 있습니다.

name

"name": react-component

배포할 라이브러리의 이름입니다. 이후에 npm i ~~~로 설치할 라이브러리 이름이기도 합니다. 다만 중복이 불가능하기에 미리 꼭 npm 공식 홈페이지에서 이름을 찾아보시길 바랍니다.

version

"version": "0.0.1"

라이브러리의 버전입니다. 버전에 따라 코드가 다르게 배포되기에 버전을 그때그때 변경해서 명시해주어야합니다.

또한 업데이트시 버전을 올리지 않으면 겹쳐있는 버전이라고 오류가 뜨니 코드 업데이트 및 새로 배포할때는 꼭 버전을 올려서 배포하시기 바랍니다.

main

"main": "dist/index.js

라이브러리의 진입점입니다. 해당 프로젝트 설정은 배포시 dist로 배포되기 때문에 dist에 index.js로 명시해주었습니다.

types

"types": "dist/index.d.ts

타입 파일 진입점입니다. 당연하지만 타입스크립트 기반 코드기에 타입 추론을 위해 명시해줍니다.

browser

"browser": "./browser/specific/main.js",

브라우저에서 구동되는 라이브러리 제공을 위한 browser 필드 입니다.

script

"scripts": {
	...
    "publish:npm": "rm -rf dist && mkdir dist && tsc 
 }

npm에 배포시 파일 업데이트를 위한 명령어입니다.

dist 폴더를 삭제하고 다시 dist 폴더를 만든 후 tsc로 컴파일을 진행해서 파일을 업데이트해줍니다.

이외에 description, keywords, author, repository, contributors등 자세한 상세 정보를 적어줄 수 있지만 필수적이지는 않습니다. 최종적인 package.json은 아래와 같습니다.

dependencies들은 제외하고 명시합니다.

{
  "name": "waggle-design-system",
  "version": "1.0.2",
  "type": "module",
  "description": "Waggle 디자인 시스템",
  "homepage": "https://github.com/teamWaggle/Waggle-Design-System",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "browser": "./browser/specific/main.js",
  "scripts": {
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "publish:npm": "rm -rf dist && mkdir dist && tsc && rm -rf ./dist/stories && cp -r ./src/assets ./dist && tsc-alias"
  },
  "keywords": [
    "react",
    "ui",
    "design-system",
    "react-components",
    "uikit",
    "components",
    "emotion",
    "typescript",
    "library"
  ],
  "contributors": [
    {
      "name": "sikkzz",
      "email": "sling0623@gmail.com",
      "url": "https://github.com/sikkzz"
    }
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/teamWaggle/Waggle-Design-System.git"
  },
  "license": "MIT",
  
 ... dependencies, devDependencies 파일들
}

.npmignore 추가

다들 아시는 .gitignore와 동일하게 npm에도 배포에 제외할 파일들을 지정해줄 수 있습니다.

저는 다음과 같이 적어주었습니다.

node_modules/
src/
public/
tsconfig.json
.storybook/
.eslintrc.json
.prettierrc

빌드 및 배포

설정 및 개발이 끝났다면 npm publish 명령어를 통해 배포가 가능합니다.

명령어 입력시 빌드 및 배포까지 자동으로 진행을 해줍니다.

이후 npm install "라이브러리 이름" 명령어를 통해 설치하면 다른 라이브러리들과 동일하게 사용이 가능합니다.

🔚 마치며

임시로 디자인 시스템 npm 배포를 진행해보았는데 개발이 이미 진행된 프로젝트다 보니 배포 과정만 잘 설정해서 문제 없이 배포가 가능했습니다. 배포는 완료 했지만 아직 숙제들이 많이 남았다고 생각합니다.

우선은 서로 다른 레포지토리에서 서비스와 디자인 시스템을 관리하다 보니 불편함이 큽니다. 또한 CI/CD 과정 또한 확립이 되어있지 않습니다.

그래서 다음 목표는 배포 자동화 이후 모노레포 마이그레이션으로 잡았습니다. 이미 프로젝트 의존성 관리를 yarn berry로 진행하고 있다보니 yarn berry monorepo가 적합하다고 판단했고 디자인 시스템 배포 자동화 부터 구축한 뒤 모노레포 구축을 진행해볼 예정입니다.

관련 포스팅으로 또 돌아오도록 하겠습니다.

감사합니다.