npm/yarn 패키지 배포 및 사용해 보기

간단히 body의 background색상이 변경되는 샘플코드를 작성하고 npm packages로 배포하는 방법을 알아보자.

 

1. 샘플코드 작성

1.1. 리액트 프로젝트 생성

# 리액트 프로젝트 생성
$ npx create-react-app test-npm
$ cd test-npm
$ cd src/npms

 

1.2. background 변경하는 use hook 생성

export const useClickBgColor = (e) => {
  const {
    target: { value }
  } = e;

  document.body.style.background = value;
}

 

1.3. 사용코드 작성

import React from 'react';
import ReactDOM from 'react-dom/client';
import { useClickBgColor } from './npms/hook/commonHook';

function App() {
  return (
    <>
    <h1>background test</h1>
    <button value="red" onClick={useClickBgColor}>
      red
    </button>
    <button value="blue" onClick={useClickBgColor}>
      blue
    </button>
    <button value="yellow" onClick={useClickBgColor}>
      yellow
    </button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />)

 

2. npm 설정

2.1. npm 가입

https://www.npmjs.com/

npm | Home

 

2.2. Organization 추가

 

2.3. 추가된 Organization 확인

 

3. NPM 등록

3.1. npm/yarn init : package.json 생성

프로젝트 폴더에서 npm/yarn init

$ npm init

    package name : (npms) -> @djgundam/npm-test
    version: (1.0.0)
    description: npm test
    entry point (index.js)
    test command:
    git repository:
    keywords: react, react hooks, npm test
    author: deokjoon Kang
    license: (ISC) MIT

    IS this OK? (yes)

 

3.2. npm/yarn 배포

# npm
$ npm publish

# Yarn 1 (Classic)
$ yarn publish

# Yarn 2+
$ yarn npm publish

npm ERR! code E404 발생 : npm login 후 진행

$ npm login

 

npm ERR! code E402 발생 : npm publish --access=public

$ npm publish
$ npm publish --access=public
$ yarn publish
$ yarn publish --access=public

 

npm ERR! code E403 발생 : package.json의 version up

 

3.3. npm/yarn 배포 성공

 

4. npm package 받아서 사용해 보기

4.1. npm 사이트 확인

 

4.2. npm/yarn 설치

$ npm i @djgundam/test-npm
$ yarn add @djgundam/test-npm

 

4.3. npm/yarn 설치된 module로 변경

 

4.4. 성공

 

 

https://github.com/dchkang83/test-npm

GitHub - dchkang83/test-npm: npm test

 

https://www.npmjs.com/package/@djgundam/test-npm

@djgundam/test-npm