유용하게 쓸 수 있는 React Hook 만들기 5

Hyuno Choi·2021년 3월 13일
Reactnpmreact hook웹 프로그래밍
1

"React Hook 만들기" 복습노트📝

목록 보기
5/6
post-thumbnail

소스 코드: https://github.com/soonitoon/React_Hooks

이 글은 Nomad Coder의 "실전형 리액트 Hooks 10개" 강의를 바탕으로 작성되었습니다.

2021년 3월 13일 새벽

이번에는 지금까지 만든 리액트 모듈을 NPM에 배포하는 과정을 적어보겠습니다. npm 회원가입과 설치는 되어있다고 가정합니다.

후크 파일 수정

지금까지 만든 후크 js 파일 맨 윗 부분에 의존성 모듈을 import해야 합니다. 예시로 제가 만든 useBeforeLeave 파일을 가져와봤습니다.

const useBeforeLeave = (onLeave) => {
  if (typeof onLeave !== "function") {
    return;
  }
  const handle = (event) => {
    const { clientY } = event;
    if (clientY <= 0) {
      onLeave();
    }
  };

  useEffect(() => {
    document.addEventListener("mouseleave", handle);
    return () => {
      document.removeEventListener("mouseleave", handle);
    };
  }, []);
};

export default useBeforeLeave;

useBeforeLeave 라는 커스텀 후크는 useEffect를 사용합니다. 따라서 스크립트 첫 줄에서 해당 모듈을 불러와야 합니다.

import { useEffect } from "react";

다음과 같이 필요한 모듈을 불러옵니다.

Organization 만들기

모듈 배포 전에 npm 홈페이지에서 새 Organization을 만듭니다.

프로필 사진을 누르면 보이는 메뉴에서 빨간 글씨로 쓰여져 있는 + Add Organization을 클릭합니다.

그리고 Organization의 이름을 정합니다. 이름은 url로 사용할 수 있는 이름이어야 합니다. url에 사용할 수 없는 문자는 포함할 수 없습니다. 저는 sooni-hooks 라는 이름으로 Organization을 만들었습니다.

이름을 정한 후 밑에 있는 Create 버튼을 눌러 Organization을 만들어줍니다.

폴더 구성📁

지금까지 후크가 작성된 단일 js 파일만 있었다면, 이제는 후크 이름의 폴더를 만들어줍니다.

그리고 위와 같이 js파일의 이름을 index.js로 바꿔 폴더 안에 넣습니다. NPM 모듈에서는 index.js파일이 메인 파일로 기본 설정되어 있습니다. 다른 파일명을 사용하고 싶다면 package.json 파일에서 해당 부분을 수정해주면 됩니다. 이 부분은 뒤에서 자세히 적겠습니다.✍️

npm init

$ npm init -y 명령어를 통해 package.json 파일을 생성합니다. -y 옵션은 기본값으로 package.json 파일을 생성합니다. 이 옵션을 사용하지 않고 값을 하나하나 입력하면서 진행할 수도 있습니다.

{
  "name": "useBeforeLeave",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

기본값으로 만들어진 package.json 파일입니다.

npm install

지금까지 만들었던 리액트 후크는 당연하게도 리액트를 필요로 합니다. $ npm i react react-dom 명령어로 의존성 패키지를 설치합니다. 참고로 i는 install과 같은 의미이며, 설치하고 싶은 패키지들을 한 칸 띄어쓰고 적으면 여러 패키지를 한 번에 설치할 수 있습니다.

패키지 다운로드가 끝나면 package.json 파일에 의존성 부분이 추가됩니다.

"dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }

이렇게 기본적인 준비가 완료되었는데요, 이제 package.json 파일을 수정해야 합니다.

package.json 수정📝

name

패키지의 이름이자 npm install 패키지명 명령어로 패키지를 설치할 때 '패키지명' 부분에 들어가게 되는 이름입니다. 이름을 정할 때에는

  1. Organization 이름과 마찬가지로 url에 사용할 수 있는 문자만 사용해야 합니다.
  2. @Organization 이름/패키지 이름 형식으로 스코프를 앞에 붙여줍니다.

useBeforeLeave의 경우 @sooni-hooks/use-before-name으로 이름을 지을 수 있을 것입니다.

"name": "@sooni-hooks/use-before-leave"

version

말 그대로 패키지의 버전입니다. 처음 배포할 때는 당연히 1.0.0으로 배포되는데요, 동일한 버전으로의 재배포는 불가능합니다. 즉, 수정하고 배포하는 과정을 반복할 때마다 package.json 파일의 version도 수정해야 합니다.

"version": "1.0.0"

description

NPM에서 해당 Organization 페이지에 들어가면 보이는 패키지 리스트입니다. 패키지명 밑에 적혀 있는 간략한 설명이 바로 description입니다. 간결하게 패키지에 관한 설명을 적으면 됩니다.

 "description": "React Hook to prevent user from leaving page"

main

패키지의 메인 파일, 가장 먼저 실행되는 파일을 정할 수 있습니다. 기본값은 index.js인데요, 다른 파일을 메인 파일로 정하고 싶다면 그 파일의 이름으로 바꿔주면 됩니다.

"main": "index.js"

keywords

NPM에서 해당 패키지 페이지에 들어가면 keywords 부분에서 보입니다. 또한 다른 사용자들이 패키지를 검색할 때도 유용하게 사용됩니다. 리스트 형태로 키워드 문자열을 넣으면 됩니다.

"keywords": [
    "React",
    "Hook",
    "Before leave",
    "useBeforeLeave"
  ]

author

패키지를 배포한 사람을 뜻합니다. 본인의 NPM usename을 적어주시면 됩니다.

"author": "soonitoon"

license

패키지의 사용 범위, 권한 등을 정의하는 라이선스입니다. MIT라고 적어주시면 됩니다.

"license": "MIT"

peerDependencies

package.json 파일에는 dependencies라는 이름으로 설치한 패키지들이 들어있는데요,

"dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }

dependencies를 peerDependencies로 바꿔줍니다.

"peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }

peerDependencies는 만약 의존성 패키지가 다운 받는 프로젝트의 node_modules 안에 존재한다면 아무것도 하지 않습니다. 그러나 존재하지 않거나 버전이 맞지 않다면 사용자에게 경고를 띄우게 됩니다. 리액트 후크는 대부분 리액트 환경 안에서 다운받기 때문에 peerDependencies를 사용하는 것이 적절합니다.

package.json 추가 옵션

repository, homepage

NPM에서 해당 패키지 페이지에 홈페이지 주소, 저장소 주소를 추가할 수 있습니다.

"homepage": "https://github.com/soonitoon/React_Hooks#readme"

"repository": {
    "type": "git",
    "url": "git+https://github.com/soonitoon/React_Hooks.git"
  }

README.md 추가📎

깃허브 저장소처럼 패키지의 첫 페이지에 들어갈 설명을 작성할 수 있습니다. 아직은 제목 한 줄밖에 없는데요, 패키지 하나하나 README 파일을 업데이트 할 예정입니다.😉 패키지 폴더 안에 README.md 마크다운 문서를 만들어줍니다.

이렇게 파일을 위치시켜주면 됩니다. README 파일에 들어가는 내용으로는,

  • 패키지 사용법
  • 알려진 버그
  • 사용 예시 코드

등을 적어주시면 됩니다.

NPM 배포

드디어 배포할 차례입니다. 작업 디렉토리를 배포하고자 하는 패키지의 폴더로 설정해주세요.

$ npm publish --access=public 명령어를 사용해 배포합니다. 스코프로 설정된 패키지이기 때문에 --access=public 옵션을 통해 공개 엑세스로 설정합니다.

이제 NPM 배포가 모두 끝났습니다!🎉 리액트 앱을 생성하고(혹은 클라우드 공간에서) $ npm i 패키지명 명령어를 통해 모듈을 설치할 수 있습니다. 배포한 모듈이 잘 작동되는지 확인하면 됩니다.

드디어 <유용하게 쓸 수 있는 React Hook 만들기> 시리즈를 마쳤는데요, 후기를 마지막으로 포스팅을 마치겠습니다.

<참고 문서>

profile
Hyuno Choi
프론트엔드 웹 개발자를 목표로 하고 있습니다.
이전 포스트

유용하게 쓸 수 있는 React Hook 만들기 4

다음 포스트

유용하게 쓸 수 있는 React Hook 만들기 - 후기

0개의 댓글