📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈

✅ 10편: 플러그인 배포 및 문서화 – NPM 패키지로 배포하는 방법

---

이제까지 우리는 캘린더 플러그인의 모든 기능을 구현하고, 유지보수가 쉬운 구조로 리팩토링했습니다.
이번 편에서는 우리가 만든 캘린더 플러그인을 NPM 패키지로 배포하는 과정을 다룹니다.

이제 누구나 npm install my-calendar-plugin 명령어로 우리의 플러그인을 사용할 수 있게 됩니다! 🚀

---

🎯 목표

• 플러그인을 NPM 패키지로 배포
• TypeScript 타입을 포함한 패키지 설정
• 배포 전 코드 정리 및 테스트
• 사용자를 위한 README 문서 작성

---

📦 1. package.json 수정

먼저 NPM 패키지로 배포할 수 있도록 package.json을 설정해야 합니다.

반응형

✅ package.json 설정 추가

{
  "name": "my-calendar-plugin",
  "version": "1.0.0",
  "description": "간단한 웹 캘린더 플러그인",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "webpack --mode=production",
    "prepare": "npm run build"
  },
  "author": "Your Name",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/your-username/my-calendar-plugin.git"
  }
}

항목 설명

name	패키지 이름 (중복되지 않아야 함)
version	패키지 버전 (1.0.0, 1.1.0 등)
main	배포할 번들 파일 (dist/index.js)
types	TypeScript 타입 파일 (dist/index.d.ts)
scripts.prepare	npm install 후 자동으로 빌드 실행
repository	GitHub 주소 연결 (선택 사항)

💡 주의: name은 NPM 레지스트리에 유니크해야 합니다.
이미 사용 중인 패키지 이름이라면 my-calendar-plugin-xyz 같은 변형을 사용하세요.

---

🔧 2. 프로젝트 빌드

NPM 패키지로 배포하려면 dist/ 폴더에 빌드된 코드가 포함되어야 합니다.

 

npm run build

빌드 후 dist/ 폴더에는 아래와 같은 파일이 포함됩니다.

dist/
├── index.js      # 최종 번들 JS 파일
├── index.d.ts    # TypeScript 타입 정의 파일

---

🚀 3. NPM 로그인 및 배포

✅ NPM 계정 로그인

npm login

• 이메일, 비밀번호, OTP 입력 후 로그인 완료

✅ 패키지 배포

npm publish --access public

배포가 성공하면, 패키지가 NPM 레지스트리에 등록됩니다! 🎉

✅ 확인:

npm search my-calendar-plugin

---

📄 4. 사용자 가이드 문서 (README.md) 작성

패키지를 배포한 후, 다른 사용자가 쉽게 사용할 수 있도록 README.md 파일을 작성합니다.

✅ README.md 예제

# My Calendar Plugin 📅

간단한 웹 캘린더 플러그인입니다.  

## 설치 방법  

```sh
npm install my-calendar-plugin

사용법

import { Calendar } from "my-calendar-plugin";

const root = document.getElementById("calendar-root");
new Calendar(root);

기능

• 월 이동 (◀ ▶ 버튼)
• 날짜 선택
• 일정 추가/삭제/수정
• LocalStorage 연동

라이선스

MIT

---

## ✅ 5. 배포된 패키지 테스트  

배포가 정상적으로 되었는지 확인하려면 **새로운 프로젝트에서 패키지를 설치**하여 테스트합니다.  

### ✅ 테스트 프로젝트 생성  

```bash
mkdir calendar-test
cd calendar-test
npm init -y
npm install my-calendar-plugin

✅ index.ts 파일에서 플러그인 사용

import { Calendar } from "my-calendar-plugin";

const root = document.getElementById("calendar-root");
new Calendar(root);

브라우저에서 실행 시 캘린더가 정상적으로 표시되면 성공! ✅

---

📚 참고자료

• NPM 공식 문서 – 배포 가이드
• TypeScript 타입 배포

---

🔖 추천 태그

NPM 패키지 배포, TypeScript 라이브러리 개발, Webpack 빌드, 플러그인 배포, 오픈소스 프로젝트, 패키지 관리, JavaScript 캘린더 라이브러리, npm publish, README 작성, SEO 최적화 10개

---

🎉 시리즈 완결 🎉

이제 우리는 완전한 TypeScript 기반 캘린더 플러그인을 개발하고, 배포까지 완료했습니다.
다른 개발자들도 쉽게 설치하고 사용할 수 있도록 오픈소스 프로젝트로 발전시킬 수도 있습니다.

🚀 배운 것 정리

✅ TypeScript + Webpack을 활용한 모듈 번들링
✅ 캘린더 UI & 기능 구현
✅ 일정 저장 및 수정 기능
✅ 유지보수를 고려한 리팩토링 & 클래스로 구조화
✅ NPM 패키지 배포 및 README 문서화

👏 축하합니다! 이제 실전에서 직접 라이브러리를 배포하고 활용할 수 있습니다!

---

✨ 다음 단계 (심화 발전 가능성)

이제 캘린더 플러그인을 더욱 발전시켜 볼 수 있습니다.

1️⃣ React, Vue, Svelte 버전 제작
2️⃣ 날짜 선택 스타일 커스터마이징 기능 추가
3️⃣ Google Calendar API 연동하여 실제 일정 가져오기
4️⃣ 사용자 피드백 반영하여 새로운 기능 추가

🔥 배포된 패키지를 더 발전시키고 싶다면 GitHub 레포지토리를 만들어 오픈소스로 운영해 보세요!

---

📝 마지막으로!
이 시리즈를 따라 하며 궁금한 점이 있다면 언제든지 질문하세요!
다음에도 더 유용한 실전 프로젝트로 찾아오겠습니다. 🚀

🙏 감사합니다!