리액트 컴포넌트: NPM 패키지 배포하기

junamee·2021년 9월 11일

프론트엔드

목록 보기

5/17

페이지네이션 UI 컴포넌트를 범용적으로 사용할 수 있을 것 같아
npm 모듈 패키지로 배포해보았다.
방법은 쉬운 듯 간단했고, 겪었던 과정과 문제들을 정리해보았다.

🪓 Babel 설치

npm i @babel/cli
: command line을 통해 코드를 transpile 할 수 있는 도구 설치
npm i @babel/preset-react
: react transpile에 필요한 plugin을 포함한 preset설치, 바벨 설정만으로 plugin설치가 자동으로 된다.

🛒 배포할 컴포넌트와 로직 lib에 담기

lib폴더 안에 배포할 내용을 둔다.
나의 경우엔 다른 파일의 내용을 import 해오는 것이 실제론 undefined로 인식되었는데,
아마 배포하면서 외부 파일을 참조하지 못하는 것 같다.
그래서 themeProvider 적용도 어려웠고(물론 나중엔 커스텀 스타일을 주기 위해 theme적용이 불필요하긴 했다), 참조하지 못하는 내용을 반영해주다보니 파일이 많이 길어지긴 했다.

//lib/ComponentToPublish
import React, { useState, useEffect, useCallback } from "react";
import styled from "styled-components";
export default function PaginationLayout({...props}){
  
 //...생략...
  return ( <Component>{props.sample}</Component>)
}

🔫`.gitignore` 에 배포시 업로드 제외할 파일 설정

dist의 내용이 잘 올라가도록 하면된다.
그 외 필수적이지 않은 src , public, 기타 설정파일 을 .gitignore에 추가해준다.

📝 package.json 수정하기

npm에 표시될 내용 이름 설정
"name": "nyam-pagination",
npm에 표시될 키워드 설정
"keywords":["pagination", "React"]
필수는 아니지만 키워드를 설정해두면 npm 배포후 연관 키워드로 표시되며
아무래도 검색 시 키워드 기반으로 노출이 더 잘되는 것 같다.
파일 루트 단계에 'keyword'키를 만들고 키워드로 삼을 값을 배열 안에 나열해준다.
module, main 설정하기
빌드 후의 파일 경로로 작성해주어야 한다.

  "module": "dist/NYAM_PAGINATION.js",
  "main": "dist/NYAM_PAGINATION.js",

명령어 설정
package.json script에 명령어를 한 줄 추가해준다.
"publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files"
src/lib에 있는 파일을 복사해 dist경로에 babel로 컴파일한 결과물을 저장하겠다는 의미이다.
module과 main에 설정한 파일경로와 동일한지 다시 체크!

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files"
  },

바벨설정

    "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },

🧩 배포할 컴포넌트 빌드하기

npm run publish:npm
배포 전에, 또는 배포 후 수정할 내용이 생겼을 때
위에서 설정한 명령어를 실행해 dist 의 내용이 잘 변경되었는지 확인하자.

🎐 배포하기

npm publish

필수: 버젼 업데이트 후 진행하기
컴파일이 잘 되었어도, 버젼이 변경되지 않으면 에러가 난다.

npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/nyam-pagination - You cannot publish over the previously published versions: 0.2.2.
npm ERR! 403 In most cases, you or one of your dependencies are requesting

package.json에서 버젼을 이전과 달리하여 배포하면 된다.
"version": "0.2.2",

참고: 간혹 배포가 늦게 반영되는 경우가 있다.
안된다고 자꾸 배포하지말고 조금 쉬었다 보면 버젼이 업데이트 되어있다....🥴

결과 및 느낀 점

배포해 올린 NPM페이지: npm_nyam-pagination

우선 내가 만든 컴포넌트가 NPM에 등록된 것 자체가 너무 GOOD~~ ✌
간단하게 npm i nyam-pagination으로 설치할 수 있다.
우선 굉장히 어려울 것 같았던 배포가 성공적으로 되어 기뻤고, 여러번 오류 내용을 수정하며
빌드와 배포를 반복하면서 익숙하게 사용할 수 있게 되었다.

다만, 새로운 고민거리가 생겼는데

1) 라이브러리 사용과 npm 소개 글쓰기
npm에 내 모듈을 소개하는 글을 쓸 때, 어떻게 하면 사람들이 내 글을 잘 이해하고 사용할 수 있을까-
매우 고민되었다. 거기에다 영어로 작성하다보니 이게 맞는 말인지도 확신이 100%들지도 않고..
그냥 기본적인 기능만 전달하는 것을 넘어 추가적인 기능(스타일 커스텀, 개인의 상황에 맞춰 prop으로 추가적인 데이터를 넘겨주는 경우 등)을 소개해주어야 하는 부분에서 사람들이 잘 이해하지 못할 것 같다는 생각이 든다.

또 생각해보면, 내부 로직이 어떻게 돌아가는지 파악하는게 중요하다고 생각해 간단한 것은 직접 구현하려해 라이브러리를 많이 써오지 않았다. 때문에 이해하고, 좋은 글을 쓰는데 미흡했겠다는 생각도 들었다. 때문에 앞으로는 직접 구현도 해보면서 좋은 라이브러리를 접하는 것도 학습적인 면에서 중요하다고 생각이 든다.

2) 커스텀의 범위

간단한 앱에 페이지네이션을 설치해 적용해보았다. 잘 작동하였다.
그런데 예전에 작업했던 프로젝트에 내 패키지를 적용해보려했는데,
패키지 내부 로직에서 데이터를 한번 더 가공해야하는 상황이라, 내가 만든 npm패키지로는 구현이 되지 않는 상황이었다. (내 컴포넌트는 전달받은 내용만 단위별로 보여주고있는 상황이다.)
이러한 경우도 고려하면서 미리 작업을 했어야했는데.. 다음에는 여러가지 상황을 미리 파악해보고 적용할 수 있도록 커스텀범위를 파악하고 시도해야겠다.