🧚 npm 배포 배경

누구나 한번 쯤 자주 사용하는 나의 코드들을 재사용하고 싶을 때가 있을 것이다.
또, 구현하고 싶은 것을 패키지로 가져올 때 나의 상황에 맞게 커스터마이징 하는것에 어려움을 느낀 사람도 많을 것이다.

FeBase 스터디 에서 간단해보이지만
직접 구현하기는 힘든,
커스터마이징 하기 쉬운,
모션이 들어가 퀄리티 높은 UI조각을 팀원분들과 구현해보기로 했다!

아이디에이션을 하다가 저번에 구현했던 플로팅 버튼이 재밌었던 기억이 있어서 재사용성을 높여
대중적으로 사용될 수 있게끔 해보려한다

<구현했었던 버튼 솝트 - 모티브>

구현 참고 UI 프롭스 - 모션타입

---

🔎   오픈소스 (Open Source)

공개 소프트웨어는 저작권자가 소스코드를 공개하여
누구나 특별한 제한 없이 자유롭게 사용, 복제, 배포, 수정할 수 있는 소프트웨어

👍   장점

👀 참고 블로그

• 낮은 진입비용 : 오픈소스는 무료로 다운로드 및 소스코드의 수정/재배포가 가능하므로 일반적으로 초기 개발비용이 새로 개발하는 것에 비해 1/2 정도

• 빠르고 유연한 개발 : 오픈소스 커뮤니티는 보통 최신 기술 정보 및 문제점과 해결책을 공유하는 형태로 자유롭게 운영되기 때문에 독점 프로그램에 비해 기술발전속도가 빠름

• 신뢰성과 안정성 : 오픈소스의 개발 과정을 보면 전세계에 있는 수많은 우수한 개발자들이 직접 개발과 디버깅 과정에 참여하기 때문에 In-house에서 폐쇄적으로 개발되는 독점 프로그램에 비해 비교적 안정적으로 동작

---

🔎   npm (Node Package Manager)

npm의 역할은 소프트웨어의 라이브러리 또는 레지스트리이다. 소프트웨어를 관리하고 설치를 지원하며 오픈 소스 개발자는 이 npm을 이용하여 소프트웨어를 공유하고 관리

• npm에 배포될 모든 패키지는 git repository에 업로드 되어있어야 함

👍   구성 - 예시

👀 awesomeButton

👍  Package.json

npm init 명령어를 통하면 최초에 이 파일이 만들어지고 npm 패키지를 설치하게 되면 이 package.json에 명시
패키지 이름, 라이센스, NPM Repostory에 배포될 파일들이 무엇인지 등 패키지에 대한 정보를 명시하는 기능

👍  Package-lock.json

npm 패키지를 설치하거나 수정, 삭제 등의 작업을 진행할 때 생성되며 핵심 역할은 각 패키지에 대한 의존성 관리용도
❗️ 간혹 설치한 npm 패키지의 버전을 업데이트하기 위해 npm install을 하였는데 최신 버전이 업데이트되지 않는 경우에 package-lock.json을 삭제하고 재설치 권장

👍   패키시 선택시 고려사항 (어떤 오픈 소스를 채택?)

• star 수
• 꾸준히 업데이트되는지 (커밋 날짜 확인)
• 이슈 관리 여부
• 다운로드 수
• README.md 파일의 친절도
• 데모 페이지 여부

---

📃   패키지 구조

추천되는 폴더구조

my_npm_module/
├── dist/
├── examples/
├── lib/
├── .gitignore
├── .npmignore
├── LICENSE
└── package.json

• dist/는 배포용 디렉터리 : Webpack 같은 번들러로 배포용 파일생성
• examples/는 제공할 예제 디렉터리 : 예제 파일과 함께 Demo 페이지를 제공하는 것 추천
• lib/에는 패키지 제작을 위한 원본 파일 디렉터리

---

📃   package.json 설정

npm init --yes 를 실행하면
현재 프로젝트 directory 정보에 기반해 package.json을 생성

👀 속성 자세히 보기

❕ name

❕ version

❕ description

❕ keywords

❕ homepage

❕ bugs

❕ license

❕ author

❕ contributors

❕ main

❕ repository

❕ files

❕ browser

❕ dependencies

---

📃   LICENSE

다른 사람들이 기여할 수 있도록 저장소에 오픈 소스 라이센스 포함 가능
패키지 전역에 LICENSE 혹은 LICENSE.md(Markdown) 파일(모두 대문자)을 생성

GitHub에서 저장소를 관리한다면 라이센스 템플릿(License template)을 선택하여 제출 가능
👀 Github Docs

---

📃   .npmignore

패키지에서 배포하지 않을 파일이나 디렉터리를 지정합니다.
.npmignore 없이 .gitignore 파일만 사용가능
❗️ 빠른 패키지 배포와 효율적인 프로젝트 저장소 관리를 위해 각 파일을 따로 분리해서 작성하는 것 권장

ex)

---

📃   NPM 로그인

Public Email 과 Username은 추후 배포시 패키지와 함께 공개

$ npm adduser  // or npm login

입력 후 로그인 (Username / password) bash창 입력

$npm whoami // 로그인 유저 확인

---

📃   배포 전 테스트

배포 전에 로컬 환경에서 테스트 가능

$ cd ..
$ mkdir npm_install_test
$ cd npm_install_test
$ npm init -y
$ npm install ../<모듈이름>

---

📃   배포

검색결과로 반영되는 것에는 시간이 좀 걸림
https://www.npmjs.com/package/<모듈이름> 으로 확인가능

$ npm publish

$ npm publish --access public

# ...
npm notice === Tarball Details ===
npm notice name:          my_npm_module                                  
npm notice version:       0.1.0                                   
npm notice package size:  591.2 kB                                
npm notice unpacked size: 6.3 MB                                  
npm notice shasum:        ab1234aa331abcd30f0f8d854ab6390123456789
npm notice integrity:     sha512-AbcDEfGHuBczK[...]27123Cd65mMTQ==
npm notice total files:   422                                     
npm notice
+ my_npm_module@0.1.0

---

📃   사용

$ npm install febase-float-button

import FloatButton from 'febase-float-button'

<FloatButton type='hurricane'></FloatButton>

---

📃   버전관리

npm은 패키지를 배포할 때 특정한 의미있는 버전 규칙을 따르도록 권장

패키지의 가장 첫 버전은 1.0.0 으로 시작

버그를 수정한 release는 1.0.1 과 같이, 가장 마지막 숫자를 증가
마이너한 업데이트가 있을 경우 1.1.0 처럼 두번째 숫자를 증가
큰 변화와 같은 메이저 업데이트는 2.0.0 가장 첫번째 숫자를 증가

---

참고
👀 박영웅님 블로그
👀 kler님 블로그