0strich
[NPM 배포] NPM 모듈 배포 본문
프로젝트 진행 중 필요한 npm 모듈이 3년 전이 마지막 업데이트여서 수정해서 사용해야 하는 경우가 생겼다.
이런 경우 해당 모듈의 git을 fork 받아서 수정 후, npm에 publish 하는 것으로 누군가가 만들다만 코드를 활용할 수 있다.
react-native-credit-card-input
사용하려고 한 모듈은 신용카드 정보를 입력할 수 있는 모듈이다.
Github Commit History를 보면 다음과 같이 마지막 커밋이 3,4년 전인 것을 확인할 수 있다.
수평으로 고정되어 있는 카드 정보 입력창을 변경해서 사용하고 싶지만, 기존의 모듈에서 수직으로 설정하는 부분을 만들어 놓지 않았다.
나머지 기능들은 매우 유용하기 때문에 정말 아쉬는 부분이다. 이 부분을 git fork 후, 소스코드를 업데이트하고 npm publish를 해서 사용했다.
NPM 회원가입
npm 배포를 하기 위해선 npmjs.com 사이트에서 회원가입을 해야 한다.
GIt Fork & Commit
수정 및 배포할 모듈을 github에서 fork 한다.
에디터로 해당 모듈을 열어서 package.json, README.md 파일을 본인 계정으로 수정한다.
README.md 파일에서는 fork 한 파일이라는 것을 명시해 준다.
NPM publish
수정된 모듈 파일을 commit 후, npm login 명령어를 사용해서 터미널에서 npm 로그인을 한다.
npm whoami 명령어를 사용해서 로그인된 계정을 확인.
npm publish --access public 명령어로 npm 배포.
npmjs.com 사이트의 마이페이지에서 packages탭을 클릭해서 배포가 제대로 되었는지 확인한다.
다음 명령어를 사용해서 진행 중인 프로젝트에서 설치해서 사용할 수 있다.
배포한 모듈 사용
진행 중인 프로젝트 경로에서 배포한 모듈을 설치하면 package.json의 dependencies에 추가된 것을 확인할 수 있다.
이제 소스 코드에서 모듈을 사용해서 실행하면 다음과 같은 화면이 나온다.
NPM Version Patch
이제 fork 한 소스를 수정해서 카드정보를 입력하는 부분을 수직으로 바꾼 후, npm version patch를 해보자.
수평으로 나오도록 만들어져 있는 부분을 주석 처리하고 수직으로 나오도록 바꾸고 git push를 해주었다.
수정된 부분을 npm version patch 명령어를 사용하여 버전 업데이트 후, npm publish 명령어로 재배포한다.
업데이트된 버전의 모듈을 재설치해서 사용하면 다음과 같이 카드 정보 입력 부분이 수직으로 나오는 것을 확인할 수 있다.
