일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 상태 관리 라이브러리
- 프론트엔드
- npm
- 리액트프로젝트
- pnpm
- tanstack query
- 컴포넌트설계
- radixui
- 프로젝트캠프
- sucoding
- TypeScript
- frontend
- JavaScript
- @stomp/stompjs
- React
- 프로젝트
- 공식문서
- 코딩테스트
- MDN
- 수코딩
- Server State
- shadcn
- 배열메서드
- 라이브러리
- 실시간통신
- React Query
- 배열
- 스나이퍼팩토리
- stompjs
- 자바스크립트
- Today
- Total
yunicornlab
나만의 라이브러리를 만들어보자! npm 배포 도전기 본문
계기
npm에는 수많은 패키지 라이브러리들이 있다.
npm | Home
Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java
www.npmjs.com
프로젝트 중 라이브러리 또는 프레임워크를 선택할 때 아래 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으로 배포한다면 무료다. 나는 모두에게 공개하는 라이브러리를 만들거기 때문에 무료로 진행할것이다.
조직을 만드는 방법은 다음과 같다.
npm | Home
Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java
www.npmjs.com
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가 만들어지면서 내 라이브러리가 설치된다!

'Project' 카테고리의 다른 글
빌드 설정 파일(rollup.config.cjs) 파헤치기 (0) | 2025.04.04 |
---|---|
채팅 구현에 @stomp/stompjs 라이브러리를 사용한 이유 (0) | 2025.03.28 |
[유데미x스나이퍼팩토리] React 2기 - 프로젝트 첫 오프라인 회의 (5) | 2024.09.09 |
[유데미x스나이퍼팩토리] React 2기 - 프로젝트 1주차 기획 회고 (4) | 2024.09.08 |