🐧 Goose module

📦 A guide to creating and publishing your first npm package.

jotai | theme | funnel | goostate | pinterest

* Illustration created by 沢庵

npm :	KO | EN | JA
Creation guide:	KO | EN | JA

1. 패키지 생성

먼저, npm init 명령어를 통해 새로운 패키지를 생성해요.

> npm init

모든 설정을 지금 완료할 필요는 없습니다. 패키지 생성 후 package.json 파일을 직접 수정하여 필요한 설정을 추가할 수 있기 때문이지요! :)

Typescript 사용

Typescript를 패키지에 적용하려면, 아래와 같이 개발 의존성으로 Typescript와 Node.js 타입 정의를 설치해줘요!

> npm install --save-dev typescript @types/node

2. package.json 설정

package.json 파일은 패키지의 정보와 의존성을 정의해요. 아래의 예시를 참조하세요!

"build": "tsc"는 Typescript를 사용하는 경우에만 package.json에 추가되는 옵션이에요! :)

{
  "name": "module-name",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js",
  "files": ["lib"],
  "types": "lib/index.d.ts",
  "private": false,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "author": "pengoose",
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^20.3.3",
    "typescript": "^5.1.6"
  }
}

---

tsconfig설정 (Typescript 사용 시)

Typescript 프로젝트에서 tsconfig.json 파일을 통해 컴파일러 옵션을 설정할 수 있어요. :)

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./lib",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

3. 코드 작성

본인의 아이디어를 코드로 구현하는 단계에요! :) "라이브러리"나 "모듈"을 만든다고 너무 겁을 먹을 필요는 없어요!

모듈을 만든다는 것은, 자주 사용하는 코드를 재사용 가능하게 만들고, 이를 어느 프로젝트에서든 누구나 쉽게 사용할 수 있도록 배포하는 행위를 의미해요.

평소에 자주 쓰는 커스텀 훅이나, 유틸리티 코드, 그리고 아래와 같은 다양한 예시들 모두가 멋진 모듈이 될 수 있답니다!

• 데이터 검증 라이브러리: 입력값이 특정 조건을 만족하는지 검증하는 함수들의 집합
• 자주 사용하는 알고리즘: 정렬, 탐색 등의 알고리즘을 모아 놓은 모듈
• API 요청 래퍼: 특정 API에 대한 요청을 쉽게 보낼 수 있도록 래핑한 함수
• UI 컴포넌트: 버튼, 폼, 다이얼로그 등 재사용 가능한 UI 컴포넌트

생각보다 간단하고 멋있는 일이죠? 🥳

4. readme 작성

이제 모듈의 사용법을 문서화 할 시간이에요! 당신이 만든 멋진 코드를 다른 사람들이 쉽게 이해하고 사용할 수 있도록 친절하고 명확하게 작성하는 것이 중요해요.

readme 파일은 다음과 같은 내용을 포함하는 것이 좋아요!

• 모듈의 설명: 이 모듈이 어떤 문제를 해결하거나 어떤 기능을 제공하는지 간략하게 설명해주세요. 사용자가 이 모듈이 어떤 역할을 하는지 쉽게 이해할 수 있답니다!
• 설치 및 사용 방법: 이 모듈을 어떻게 설치하고 사용하는지 상세하게 설명해주세요!
• 예제 코드: 실제로 이 모듈을 어떻게 사용하는지 보여주는 예제 코드는 사용자가 이해하는데 많은 도움이 될 거에요. :)
• API 문서: 모듈이 제공하는 함수나 메소드, 그리고 이들의 인자와 반환값 등을 상세하게 문서화해주세요!

이렇게 문서를 잘 작성하는 연습은 당신의 코드가 얼마나 사용자 친화적인지를 결정하며, 개발자로서 "협업 능력"을 키우는데도 큰 도움이 될 거에요. 너무 겁먹지 말고 시작해볼까요? :)

5. build

Typescript 또는 Babel을 사용하는 경우, 이를 컴파일하는 과정(build)을 거쳐 소스 코드를 빌드해야 해요!

> npm run build

이 명령어는 위에서 작성한 tsconfig.json에 따라, 빌드된 파일들이 프로젝트 루트의 lib 폴더 내에 생성되게 되어있어요.

6. 배포 🚀

npm 모듈을 배포하기 위해서는, npm에서 계정을 생성해야 해요!

계정 생성을 마쳤다면, 터미널에서 npm login 명령어를 입력하여 로그인합니다 :)

npm 로그인

> npm login

npm 패키지 배포

로그인이 완료되면, npm publish 명령어를 사용하여 패키지를 배포해요.

> npm publish

단, package.json의 version 필드가 이전에 배포된 version보다 높아야 배포가 가능해요!

{
  "version": "1.0.0" // 이전에 배포된 version
}

{
  "version": "1.0.1" // 새로운 version (문서를 수정한 경우에도)
}

---

🎉 축하해요! 여러분의 멋진 패키지가 npm에 공개되었어요! 🥳 이제 다른 개발자들이 여러분의 패키지를 설치하고 사용할 수 있어요.

앞으로는 여러분이 만든 멋진 패키지에 대한 피드백을 받고, 그 피드백을 바탕으로 패키지를 개선하는 과정이 시작될거에요. :) (두근거리지 않나요?)

예를 들어, 깃허브의 issue 탭에서 사용자들의 문제점을 들을 수 있고, feature 요청을 받을 수 있어요! 또한, Pull Request(PR)를 통해, 다른 개발자들의 도움을 받아 더 멋진 코드로 성장시킬 수 있어요.

여러분들의 첫 패키지 배포를 축하하며, 끊임없이 배우고 성장하는 개발자의 길을 항상 응원해요! :)

첫 배포 과정을 함께하게 되어 영광이었어요! 🥰

---

추가 팁!

yarn 배포 추가하기

package.json의 "private"라는 filed를 false로 설정하면 yarn으로도 해당 모듈을 설치할 수 있어요 :)

{
  "private": false
}

"private": false,

모듈 이름에 "@" 넣기

모듈에 "@"가 들어간채로 npm publish를 진행하게되면, npm이 해당 패키지를 비공개 패키지로 인식해 유료 결제를 하라는 에러가 발생해요.

해당 저장소가 공개되어있는 패키지라는 것을 알려주는 명령어를 사용해서 배포를 진행해요.

> npm publish --access=public

---

TS 모듈 명시하기

package.json의 "type"라는 filed를 "index.d.ts"로 설정하면 해당 모듈이 TS를 지원한다는 것을 알릴 수 있어요. :)

{
  "types": "index.d.ts"
}

---

npm 페이지 저장소 연동하기

package.json의 "repository"라는 field를 다음과 같이 설정하면 저장소를 연동할 수 있어요.

"repository": {
  "type": "git",
  "url": "repositoryURL"
}