[package] 나 뭘 알고 있을까?

🐾들어가며

리액트 UI 스터디를 하는 목적은 UI를 구현할 때 라이브러리 의존을 낮추고 직접 구현해보는 연습을 하는 것이며, 이렇게 구현한 UI를 라이브러리(패키지)로 배포하여 다른 프로젝트에 사용하기 위함입니다.

이를 위해 알고 있는 내용에 대해 정리합니다.

• 패키지란 무엇인가?
  • package.json
  • 패키지 매니저
• 패키지 사용하기
• 패키지 배포하기

✨본격적으로

✅패키지란 무엇인가?

npm init을 하면 만들어지는 파일 package.json 파일.

일종의 문서로 npm에 패키지를 배포하거나 의존 패키지를 관리하기 위해 사용하는 일종의 문서입니다.
여기에서 말하는 패키지는 쉬운 사용을 위해 일부 코드를 모듈화한 것으로, 특정 패키지를 사용하여 프로젝트를 만들 때 해당 패키지에 의존하고 있다고 표현합니다. 그래서 package.json에 dependencies나 devdependencies를 확인하면 어떤 패키지를 사용하고 있는지 버전까지 정확하게 나와 있습니다. 이제 프로젝트를 만든 개발자 뿐만 아닌 다른 개발자가 와도 package.json을 보고 어떤 패키지를 사용했는지 쉽게 확인할 수 있습니다.

package.json을 구성하는 문법 : https://docs.npmjs.com/cli/v10/configuring-npm/package-json#description

패키지를 설치할 수 있는 명령어로 npm, yarn, 또는 pnpm을 사용할 수 있습니다. 이를 패키지 매니저라고 부릅니다. npm이 가장 먼저 시작한 패키지 매니저이며, 이를 각자의 방법에 맞게 보완한 것이 yarn, pnpm이며 각각의 장단점이 있습니다. 기본적으로 npm을 사용하는 이유는 거대한 커뮤니티 입니다. yarn은 npm에서 보완과 빠른 속도를 보장하며, pnpm은 효율적인 부분을 강조합니다.

✅패키지 사용하기

npm을 통해 다른 패키지 매니저를 설치합니다. 그 후 해당 패키지 매니저의 명령어를 통해 여러 패키지들을 추가, 삭제, 관리할 수 있습니다.

단, 패키지를 추가하기 전에 해당 패키지가 설치하려고 하는 것이 맞는지 npm, yarn 등의 각각의 패키지 매니저 공식 사이트를 통해 확인해야 합니다. types와 type의 철자 차이로도 다른 패키지가 추가될 수 있습니다.

또한 해당 패키지를 배포 후에도 영향이 가는 것인지 판단하고 dependencies에 추가할지 -D혹은 --dev를 사용하여 devDependencies에 추가할지 결정할 수 있습니다.

✅패키지 배포하기

package.json를 토대로 직접 만든 패키지를 배포할 수 있습니다. 패키지로 배포하고 싶은 부분을 lib 폴더에 넣고 로컬의 CLI를 이용해 npm에 로그인 후 배포할 수 있습니다. 과정은 비교적 쉬우나, 배포 후 지속적인 관리와 업데이트 등이 이뤄져야 합니다.

이에 대해선 아직 시도해 본 적이 없고 잘 정리된 글이 있어 이를 공유합니다.
https://velog.io/@seonye-98/npm-라이브러리-배포-React-컴포넌트-라이브러리-배포전-테스트-및-배포하기

✔️결론

패키지에 대한 정의, 사용, 배포 모두 글 하나로는 모자랄 정도로 많은 내용을 담고 있습니다. 그래서 알고 있는 내용에 대해서만 정리를 했고, 이후 직접 시도해보면서 좀 더 깊이 있는 글을 쓸 예정입니다(언젠가...)