나만의 라이브러리를 만들어보자! npm 배포 도전기

계기

npm에는 수많은 패키지 라이브러리들이 있다.

https://www.npmjs.com/

npm | Home

 

프로젝트 중 라이브러리 또는 프레임워크를 선택할 때 아래 npmtrends 사이트를 참고하곤 했다.

(아래는 예시)

 

그러면서 나도 언젠가는 이렇게 사람들이 많이 쓰는 라이브러리를 만들 수 있게될까? 하는 기대를 가졌다.

하지만 그 '언젠가'는 내가 만드는법!

 

내 라이브러리를 배포해보기로 했다!

아직은 별 기능이 없는 깡통 라이브러리지만, 일단 배포 과정을 기록해보려 한다.

과정

이 라이브러리의 기술스택으로는 pnpm, Nx, Rollup, React, TypeScript, Tailwind CSS, Storybook이다.

기능을 만들면서 테스트 관련한 기술도 추가될 예정이다.

그리고 라이브러리는 shadcn같은 컴포넌트 라이브러리를 만들 예정이고, 이름은 aicody-ui로 정했다!

이름을 aicody-ui로 정한 이유는, 후에 ai 기능도 넣고싶어서 'ai'를 넣었고, code + 디자인을 코디한다(사실 코디는 coordinate이지만 발음상 언어유희정도로...)라는 의미로 aicody라고 지었다.

 

처음엔 npm install aicody-ui 이런 식의 명령어로 둘까 생각했는데, 나의 원대한 목표로는 react 버전, vue 버전과 같이 확장성을 고려하고싶었다. 그래서 모노레포를 도입하기로 결정했고, npm에도 '@'(스코프)를 사용하기로 했다.

즉, 내 목표는 아래와 같은 명령어로 등록되길 바랬다.

npm install @aicody-ui/react

 

 

배포할 라이브러리가 있는 위치는 aicody-ui/libs/react다.

배포하기 전에 package.json의 name 부분이나 에러 등을 잘 확인한다.

 

(참고로 npm을 사용한다면 pnpm 대신 npm을 적으면 된다.)

1) 내 라이브리러에서 pnpm run build 명령어를 통해 빌드 작업을 진행한다.

그러면 aicody-ui/libs/react 안에 dist라는 폴더가 만들어진다.

 

2) 이 위치로 cd libs/react/dist 명령어를 통해 이동한다.

 

3) npm login 명령어를 입력해서 연결해준 웹사이트에서 회원가입 및 로그인을 진행한다.

 

❗️잠깐❗️

나처럼 '@' 스코프를 사용해서 모듈화 라이브러리를 배포하고싶다면 npm 조직(Organization)을 만들어야 한다.

물론, 조직을 만든 후에 라이브러리를 private하게 이용하고싶다면 한달에 $7 유료 결제를 진행해서 이용하면 된다.

하지만 public으로 배포한다면 무료다. 나는 모두에게 공개하는 라이브러리를 만들거기 때문에 무료로 진행할것이다.

 

조직을 만드는 방법은 다음과 같다.

https://www.npmjs.com/

npm | Home

npmjs 사이트에 접속해서 오른쪽 내 프로필 이미지 클릭 > Packages 클릭

그럼 내가 배포한 패키지들이 나온다.(나는 일단 0개....)

 

여기서 왼쪽 아래에 'Organizations +'를 클릭한다.

그럼 아래와 같은 화면이 뜰 것이다.

주의할 점은 Name에 @ 뒤에 들어갈 이름을 적어야한다.

나는 @aicody-ui/react로 배포하고싶기 때문에 Name에 'aicody-ui'라고 적었다.

그리고나서 Unlimited public packages 부분의 Create를 클릭하면

 

이렇게! Oragnizations에 aicody-ui가 추가된다.

 

4) 이후 아래 명령어를 입력한다.

pnpm publish --access public

성공하면 터미널에 아래처럼 나올것이다.

 

결과

배포 성공! 아직 무슨 기능이 있는건 아니지만 아주 뿌듯했다.

 

실제로 test 폴더를 만들어서 npm i @aicody-ui/react를 입력하면 아래와 같이 node_modules가 만들어지면서 내 라이브러리가 설치된다!