npm - Custom hook Publish !

최근에 리팩토링을 진행하면서 custom hook이 하나 생겼다.

만든김에 해당 훅을 npm에 올려보기로 했다.

 

npm에 훅을 publish 하는 과정은 아래와 같다.

 

1. npm 회원가입
2. npm organization 생성
3. custom hook 폴더생성
4. npm init
5. publish !

 

npm 회원가입 및 organization 생성

회원가입을 마치고, npm 사이트 우측 상단 프로필에서 organization을 추가할 수 있다.

프로필 클릭  ->  + Add organization

 

Custom hook 폴더 생성

프로젝트를 진행하면서 만들었던 hook이어서 올리기 위해 분리가 필요했다.

custom hook의 이름으로 폴더를 만들고, 그 안에 index.js파일을 만들어서 분리했다.

그리고 앞으로 custom hook을 만들게되면 git과 npm으로 올려볼 예정이어서

customhooks 라는 폴더에 useKeepScroll 폴더를 담았다.

.
└── customhooks
    └── useKeepScroll
        └── index.js

 

npm init

index.js 파일을 가지고 있는 useKeepScroll 폴더에서, package.json을 생성하기 위해 init을 진행했다.

$ npm init을 하면 package.json을 생성할 수 있는데, 편의상 -y 를 붙여서 기본값으로 생성했다.

$ npm init -y

 

이렇게 기본값으로 생성하면 아래와 같은 형식의 package.json 파일이 생성된다.

{
  "name": "useKeepScroll",
  "version": "1.0.0",
  "description": "", // 한 줄 소개
  "main": "index.js", // 가장 먼저 실행되는 파일
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [], // ['', '', '', ...]
  "author": "",
  "license": "ISC"
}

여기서 name과 license를 변경해야 하는데, 아까 생성했던 organization이름을 붙여서 설정해준다.

license는 MIT.

 

기본으로 생성되는 내용은 name부터 license까지인데, 추가적으로 github을 이용할 생각이었기 때문에

homepage와 repository 를 추가했다.

 

그리고 custom hook은 React 환경에서 작동해야하기 때문에,

peerDependencies에 react와 react-dom을 추가했다.

 

{
  "name": "@enjoywater-hook/use-keep-scroll",
  "version": "1.0.0",
  "description": "React hook to maintain scroll position using session storage when returning to the page.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react",
    "hooks",
    "scroll",
    "maintain scroll",
    "useKeepScroll"
  ],
  "author": "enjoywater",
  "license": "MIT",
  "homepage": "https://github.com/Enjoywater/enjoywater-hooks",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Enjoywater/enjoywater-hooks.git"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

 

이렇게 package.json 생성을 끝내고 해당 custom hook의 설명을 README.md에 추가했다.

github과 npm에서 모두 보여져야하기에 사실상 모든 작업중에서 README를 제일 공들인 것 같다.

README.md

 

Publish

모든 준비를 끝내고 다시 터미널로 돌아갔다.

$ npm whoami 로 로그인 상태를 확인하고 대망의 publish 커맨드를 입력했다.

$ npm publish --access=public

이렇게 기분 좋은 글이 뜨면서 첫 npm publish가 성공적으로 마무리되었다.

큰 시간과 노력이 들지는 않지만 뭔가 되게 보람찬 느낌이 들어서 아주 좋았다.

 

사람들이 사용하는 걸 엄청 바라지는 않지만, 다운로드가 1 이라도 올라가면 신기하긴 할 것 같다.

 

npm
https://www.npmjs.com/package/@enjoywater-hook/use-keep-scroll

@enjoywater-hook/use-keep-scroll

 

github

https://github.com/Enjoywater/enjoywater-hooks

GitHub - Enjoywater/enjoywater-hooks: Useful custom hooks to help your react-project

 

 

추가)

2022.02.10 오전 9시 47분

1이면 신기하겠다고 했는데 50이라니!!