npm publish 해보기 ( react-step-slider )

 

내가 step slider에 대한 정의를 잘 몰랐던건가.... 하는 생각을 했다.

 

...

 

저번 주에 회사 프로젝트 중 슬라이드지만 구분이 되어있고, 그 구분자에 대한 값을 받아와야하는 step slide가 들어가는 부분이 있었다.

그 정도는 으레 있겠지 싶어서 찾아봤는데 내가 원하는 형태의 step slide가 없었다.

아래 이미지와 같은 모양이 대부분이었다.

 

하지만 내가 원하는 모양은 좀 더 구분이 되어있고, 라벨도 붙어있으며 그 부분의 값도 가져올 수 있는 것을 원했다.

어느정도 커스텀을 하면 되겠지만 일단 스타일부터 내가 원하던 스타일이 아니었다.

그래서 내가 npm library에 하나 올려야겠다 라고 생각했다.

 

...

 

우선 원하는 모양을 잡았다.

대충 그려보는 step slider

 

그리고 간단하게 vite를 이용한 react, typescript를 이용해서 원하는 것을 만들었다. 

이 때 tailwindcss를 사용하였지만 외부에서 건들이지 않는 것에만 tailwindcss를 사용하였고, 외부에서 props를 전달해서 동적으로 바뀌는 부분 등은 inline-style로 작성하였다.

 

npm에 한 번도 배포를 해본 적이 없던터라 ChatGPT와 몇몇 블로그를 참고했는데 막상 보니 별건 없었다.

package.json을 수정하고 tsconfig만 조금 손 보면 될 것 같았다.

그리고 tsup을 이용해서 빌드를 했다.

vite가 있음에도 tsup을 이용한 이유는 vite는 애플리케이션 자체 빌드에 초점이 맞춰져있다면 tsup의 경우 라이브러리 및 유틸리티 코드 번들리에 초점이 맞춰져있기 때문이다. 즉, 애플리케이션이 아니라 모듈(라이브러리)을 배포하기 위해서는 tsup이 더 효과적이라고 판단했다.

실제로 둘 다 테스트를 해본 결과 vite의 경우 dist 폴더가 229KB였고, tsup을 이용했을 때는 23KB로 차이가 났다.

그리고 .d.ts 파일 같은 추가적인 개발자용 파일들을 config에서 셋팅만 해주면 생성할 수 있었다.

(vite는 애플리케이션 자체를 빌드하므로 react, react-dom 또한 빌드하게 되지만 vite 또한 external로 처리해주면 된다고 하더라... 하지만 난 tsup을 선택했다)

 

그리고 내가 사용하기 좋게 외부에서 색상, 두께, 길이, step, dot size 등 다양한 것들을 커스텀 할 수 있도록 만들었다.

그 외에 크게 수정을 한 것은 package.json, tsup.config.ts 정도인 것 같다.

 

우선 tsup을 설치했으므로 package.json의 script 또한 tsup을 이용해서 빌드할 수 있도록 추가했다.

"build-tsup": "tsup --tsconfig tsconfig.app.json",

 

그냥 "build" 라고 하지 않은 이유는 vite build 때문인데 둘을 비교해보고 싶어서 따로 만들었다.

그리고 peerDependencies에 react, react-dom을 추가했다. 나는 18버전을 사용했으므로 사용자의 리액트 또한 18버전 이상에서만 사용할 수 있다는 뜻이다

추가로 잠깐 dependencies와 devDependencies와 peerDependencies를 구분해보자면....

1. dependencies : 애플리케이션 실행(핵심 동작)에 직접적으로 필요한 패키지의 목록이며, 프로덕션 환경에서도 사용된다

2. devDependencies : 개발 및 빌드 환경에서만 필요한 패키지이며 주로 테스트, 빌드, 린트, 타입 검사와 같은 개발 과정에서만 사용되는 패키지이다

3. peerDependencies : 패키지를 사용하는 최종 사용자가 특정 버전의 의존성을 직접 설치하도록 요구하는 것이다.

몰랐던 package.json의 key 중에는 keywords라는 것이 있었다.

이것을 통해서 검색이 되도록 하는 모양이다.

그리고 repository를 이용해서 github repository url을 넣어줬고, contributors에서 내 이름을 넣어놨다.

사실 이런 것들은 다른 사람 npm 라이브러리를 들어가보고 README.md 파일을 베껴왔다.

 

exports로 내가 export 시키고 싶은 파일을 넣어두고, 누구나 자유롭게 사용, 수정, 배포할 수 있도록 MIT license를 부여해놓았다.

package.json이 궁금하다면 github에서 확인해보면 된다.

 

---

 

 

tsup 또한 여러 곳에서 참고를 했는데 크게는 entry, format, dts, sourcemap, clean, external 이렇게 만들었다.

entry는 엔트리 파일을 지정하는 것이고, format은 ESM 및 CJS 포맷으로 빌드하도록 설정한 것이고, dts는 타입정의 파일을 생성한다는 것, sourcemap은 소스맵을 생성하느냐 묻는 것인데 번들링 된 파일과 원본 코드 간의 매핑정보를 제공한다.

clean은 빌드 전의 이전 파일을 삭제하겠다고 한 것이고, external은 필요 없는 외부 의존성을 빌드에서 제외하는 것이다.

 

이 후, 터미널을 이용해서 npm login을 하고, 빌드 후 npm publish를 하면 된다.

어려울 건 없다.

 

---

 

 

 

( 시작은 나 혼자 사용하려고 만든 라이브러리 였는데... 자고 일어나니 360명이 넘게 이미 다운로드 했다는 기록이 있다..
무섭게시리...
사용자를 위해서라도 test case를 만들어서 테스트 코드도 좀 넣어놔야겠다... )

 

https://www.npmjs.com/package/react-step-slider