[npm] 리액트 패키지를 만들어 npm에 배포해보자 - 1

개인적인 웹 프로젝트를 개발하고 있던 도중, 평소 관심이 많았던 스크롤 이벤트에 대해 상당히 열이 받아 있었다...

다양한 스크롤 이벤트들이 많고, 특히 꽤나 Fancy 한 (앱x 이라든지...) 웹들은 다양한 스크롤 이벤트를 바탕으로 새로운 패러다임을 보여주기도 하는데, 이러한 이벤트들을 직접 구현하려니 꽤나 복잡하였다...

하지만 레퍼런스를 안보며 직접 창조한다 생각하고 개발하면 재미가 있기에? 이어가던 도중, 꽤나 괜찮은 아이디어라 판단 된 컴포넌트를 구상하게 되었다.

하나의 프로젝트만을 위해 이 컴포넌트를 만들어? 하기엔 너무 아까워 생각하던 와중, 오픈소스에 기여도 할 수 있고, 공부도 될겸 npm 패키지를 배포해보자라는 생각을 하게 되었다!

서론이 길었지만, 천리길도 한걸음 부터, 우선 React Package를 npm에 배포하는 방법을 알아보자... (

필자는 React 신봉자기 때문에 React를 사용한다

)

---

1. CRA

해당 글은 React를 당연 어느정도 활용해본 사람을 위한 글이다. create-react-app을 통해 프로젝트를 생성해주자!

 

npx create-react-app my-unique-pkg-name

 

그 후 파일 정리는 기본, 다만 이때 src 아래에 src/components 폴더와 src/index.js 파일을 생성해주자.
폴더는 배포 될 컴포넌트를, 파일은 컴포넌트들을 묶고 다중으로 export 할 수 있도록 한다.

 

2. 임의의 컴포넌트 생성

src/components/TestComponents/index.js에 임의의 컴포넌트를 생성하였다.

import React from 'react';

const TestComponent = () => {
    return (
        <div>Test Component</div>
    )
};

export default TestComponent;

다음과 같이 임의적인 컴포넌트는 기존 생성해두었던 src/index.js에

import TestComponent from './TestComponent/index';

export { TestComponent };

과 같이 export 된다.

3. 컴포넌트 패키징 및 배포

트랜스파일러인 babel을 빌드를 위한 의존성으로 설치,

npm install cross-env @babel/cli @babel/preset-env @babel/preset-react --save-dev

package.json 과 같은 경로에 babel.config.js을 작성해준다.

module.exports = function (api) {
  api.cache(true);

  const presets = ['@babel/preset-env', '@babel/preset-react'];
  const plugins = ['macros'];

  return {
    presets,
    plugins,
  };
};

package.json은 다음과 같이 설정

"name": "react-scroll-by-component",
  "version": "0.1.0",
  "main": "dist/index.js",
  "private": false,
  "files": [ "dist", "README.md" ],
  "repository": {
      "type": "git",
      "url": "URL_OF_YOUR_REPOSITORY"
  },
  ...
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "clean": "rimraf dist",
    "compile": "npm run clean && cross-env NODE_ENV=production babel src/components --out-dir dist --copy-files"
  },

그 후 npm run compile을 진행한다!

여기까지 문제가 없었다면 npm run publish를 진행하면 되지만, npm adduser를 통해 계정을 설정하지 않았다면 실패할 것... npm에서 우선 회원 가입 후, npm adduser를 통해 접근을 해주면 된다.

 

Tip! 403 에러가 뜬다면, 프로젝트 명을 의심해보자! 필자도 너무 당연히 있을 것이라 생각한 프로젝트명을 선택하여 다음과 같은 에러메세지를 받았다.

npm ERR! code E403 npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/react-scroll-component - You do not have permission to publish "react-scroll-component". Are you logged in as the correct user?

아무것도 없는 놈이지만 올리고 나름 기분이 좋았다... ㅎㅎ 

 

해당 패키지는 https://github.com/EJKim3191/react-scroll-by-component 에 계속 push될 예정이다.

 

참고 자료:

https://tecoble.techcourse.co.kr/post/2021-07-13-react-component-npm-publishing/

리액트 컴포넌트 npm publish