npm에 react 컴포넌트 배포해보기

1. create-react-app으로 react 앱을 만들어줍니다

npx create-react-app reallyawesome-jennyrousel
cd reallyawesome-jennyrousel

2. 필요한 babel을 다운받아야합니다

npm install -D @babel/cli @babel/preset-react --save 

3. src 디렉토리 안에 lib 디렉토리를 하나 만들어줍니다.

그리고 lib폴더 안에서 만들고싶은 컴포넌트를 생성하고, 배포하고싶은 내용을 토대로 코드를 작성합니다.

4. npm에 가입하고 로그인을 합니다

npm 가입 사이트: https://www.npmjs.com/signup

가입을 완료하면, npm에서 등록한 이메일에 verification 메일이 하나 갑니다.

나중에 npm publish 할 때 아래의 오류가 뜰 수 있으니 미리 verification메일을 확인해주세요.

verification 메일을 받고 확인을 눌렀으면, npm login을 해줍니다.

npm login

5. .gitignore 에 배포시 제외할 내용 추가하기

#others
src
demo
.babelrc
webpack.config.js
public

6. package.json 파일 아래와 같이 수정하기

{
  "name": "reallyawesome-jennyrousel", //자신의 패키지 이름을 써야함
  "version": "0.1.0",
  "private": false,
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.13.16",
    "@babel/preset-react": "^7.13.13"
  }
}

여기에서 주의해서 볼 부분은, "scripts" 의 "publish:npm" , devDependencies , babel 부분 입니다~

또한 private:false 설정을 하지 않으면 아래와 같은 오류가 뜹니다.

자세한 이유는 모르지만... private 하게 배포를 하려면 돈을 내야한다고 알고있습니다.

7. npm run publish:npm

package.json의 "scripts"에 "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files" 를 추가해줍니다.

publish 하기 전에 build를 해야겠죠.

npm run publish:npm

루트 디렉토리에 dist라는 폴더가 생깁니다.

😫참고로 powershell에서는 rm -rf 명령어를 쓸 수 없습니다! 저는 git bash를 사용했습니다~

8. npm publish 하기

이제 npm에 등록해봅니다.

npm publish

정상적으로 등록됩니다 ~~👍

그럼 이제 잘 다운 되나 테스트 해봅시다.

test 해보기

npx create-react-app package-tester
cd package-tester
npm install `등록한 패키지명`

node-modules 에 가보면 등록한 패키지명의 폴더를 찾을 수 있습니다!

저같은 경우는 코드스쿼드 프로젝트를 하면서 만든 패키지명인 reallyawesome-jennyrousel 이라는 폴더가 생성됐습니다~

이제 자신이 만든 패키지를 불러올 컴포넌트에 가서 import를 해줍니다~

그 후 아래와 같이 사용하시면 됩니다!

<JennyCarousel />

😢참고로 이미 cra로 만들어진 프로젝트에서 추가하신다면, install을 하시고 npm i 를 한번 더 해서 갱신시켜줘야합니당~

😫마주했던 지독한 에러...

저는 이상하게 배포하면서 너무.. 자잘한 에러들을 많이 만났습니다.

1. 바보같이 powershell에서 rm -rf 명령어가 작동하지 않아 생긴 문제
2. Inavalid Hook Call 에러

두번째 에러가 정말....괴로웠습니다 ㅜㅜ

제가 배포한 패키지가 잘 작동하는지 테스트하기위해 install을 한 이후 npm start 를 해봤는데, 자꾸 아래와 같은 오류가 떴습니다.

이유를 알지 못해서 인터넷에 엄청 찾아보고, 다시 배포도 해보고..등등 엄청난 삽질을 했지만.....

제 경우에서 이 오류의 원인은 리액트 중복때문이였습니다...ㅠㅠ

https://ko.reactjs.org/warnings/invalid-hook-call-warning.html

"실수로 react 패키지의 두 복사본이 있는 경우" 이런 오류가 발생할 수 있다고 하더라구요..

제가 세번째 배포 시도할때 install 하면서 뭐가 문제였는지 모르겠지만...

npm ls react

위 명령어를 치고 두개의 react, react-dom이 뜨면 안된다고 합니다ㅎㅎ

node_modules가 제가 배포한 파일 안에 하나 더 생겨서 다운로드 되어있더라구요... 그냥 저 node_modules를 삭제했더니 해결됐습니다! ㅎㅎ..😢