React Hook 만들어서 npm에 publish 하기

노마드 코더 react hook 강의를 듣고 배포하는 것을 해봤는데 뭔가 헷갈렸다;;

다행히 잘 해결되어서 과정을 조금 적어본다.

 

먼저 useTabs이라는 섹션 선택시 해당 섹션의 내용을 보여주는 hook을 하나 배포해본다.

먼저 readme 파일을 간단하게 정리하고 ~ (이건 배포자가 알아서 작성하면 될 듯 .. 사용법이라던지 주요기능이라던지 설명을 적으면 좋겠다)

 

 

가장 헷갈렸던 부분인 index.js 파일의 존재...  이것부터 정리하고 순서를 적어본다.

index.js 를 먼저 인식하기 때문에 이걸 이용해서 배포를 하는 걸로 생각은 들었는데.. useTabs에 만들어놓은 function을

index.js에 임포트해서 배포를 했더니;; 안된다.. 뒤에서 다루겠지만..

이게 npm init을 해주고 package.json이 생성이 되는데~  여기에 어떤 파일을 main으로 둘것인지를 결정한다.

기본적으로 index.js가 default이기 때문에 그냥 index.js파일에  해당 hook코드를 다 넣어주면 끝날 문제였다.

만약 다른 파일 바로 init해주고 싶으면 해당 파일명을 적으면 되는 문제이다.

(근데... 생각해보면 해당 파일의 function을 export해주고  index.js에서 import 한뒤에  default로 다시 export해주면 안되나?

내가 알고있는 것으로는 이렇게 해도 되는 것으로 생각되는데 필자가 해보니 배포가 제대로 이루어지지 않았다. 다시 한번 해봐야겠다)

 

이제 다시 본론으로 돌아와~

 

먼저 필요한 것은  npm사이트에 가입하고 Add organization 탭으로 이동 후 하나를 만들어주자 

만들어주고서 다시 vs code로 돌아와~

 

 

배포할 hook이 있는  해당 폴더로 이동 후 터미널창에서

 

npm init 을 써주자

그럼

이렇게 설정이 나오는데 하나씩 설정해준다.

전체적으로 어려운 건 없는데 ~ 버전같은 경우 자신이 올린 hook이나 모듈을 업데이트 하면 version이 바뀌니 이부분은 차후

업데이트시 version을 바꿔주자~

 

이렇게 해주고 나면 package.json파일이 생성이 된다.

 

자 원래 처음 생성을 하게 되면 위 목록중 dependencies 관련 목록은 없다.

여기서 자신이 올릴 hook이나 모듈에 필요한 라이브러리나 패키지를 설정해 줘야 하는데

npm i ~~~~ bla bla 로 올려주자. 그럼 디펜던시가 생성이 된다.

위의  peerDependencies 가 생소한데~ peer를 붙여주면   필요하긴 하지만 만약 내가 해당 Hook을 사용할 때

필요한 디펜던시가 이미 설치가 되어 있다면 따로 설치하지 않고 없다면 설치한다는 디펜던시 설정이다.

 

그리고~~ 터미널상에서 npm login을 통해 로그인을 해준다.

별거 없다. 그냥 npm 가입할때 썼던 username과 password, email 을 적어주면 된다.

그리고 npm publish --access public 을 통해 배포를 해준다. 문제가 없다면 위처럼 완료가 되고

npm 사이트를 가서 내 profile에 들어가보면~

  이렇게 잘 배포된 것을 볼 수 있다.

 

시험 삼아 코드샌드박스에서 확인해보면

이렇게 잘 배포가 되어있고 잘 사용이 된다~

 

음 나혼자 쓸때야 상관없지만 여러사람이 사용하게 범용성을 주고 싶으면 readme 파일을 잘 작성하자.