TwentyTwentyOne

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 10편: 플러그인 배포 및 문서화 – NPM 패키지로 배포하는 방법이제까지 우리는 캘린더 플러그인의 모든 기능을 구현하고, 유지보수가 쉬운 구조로 리팩토링했습니다.이번 편에서는 우리가 만든 캘린더 플러그인을 NPM 패키지로 배포하는 과정을 다룹니다.이제 누구나 npm install my-calendar-plugin 명령어로 우리의 플러그인을 사용할 수 있게 됩니다! 🚀🎯 목표플러그인을 NPM 패키지로 배포TypeScript 타입을 포함한 패키지 설정배포 전 코드 정리 및 테스트사용자를 위한 README 문서 작성📦 1. package.json 수정먼저 NPM 패키지로 배포할 수 있도록 package.json을 설정..

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 9편: 코드 리팩토링 – 플러그인 구조화 및 유지보수 최적화이제 캘린더 플러그인의 주요 기능이 모두 구현되었습니다.📅 기능 요약:✅ 월 이동 🔄✅ 날짜 선택 🎯✅ 일정 추가 ➕✅ 일정 저장 & 불러오기 💾✅ 일정 수정 & 삭제 📝하지만 코드가 점점 복잡해지고 관리가 어려워지고 있습니다.이번 편에서는 코드를 구조화하여 유지보수가 쉽고 확장 가능한 모듈화된 플러그인 구조를 만들어 보겠습니다.🎯 목표캘린더 기능을 모듈화하여 관리Calendar 클래스를 만들어 플러그인 방식으로 개선이벤트 바인딩 및 상태 관리를 깔끔하게 정리📦 1. 캘린더 클래스로 변환✅ 기존 index.ts → Calendar.ts 클래스로 리팩..

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 8편: 일정 삭제 및 수정 기능 추가하기 – 인터랙션 강화지난 글에서는 LocalStorage 연동을 통해 일정 데이터를 저장하고 유지하는 기능을 추가했습니다.이번 글에서는 사용자가 입력한 일정을 수정하거나 삭제할 수 있는 기능을 구현합니다.지금까지 일정은 추가만 가능했지만,실제 사용 가능한 캘린더가 되려면 삭제 및 수정 기능도 필수적으로 필요합니다.🎯 목표일정 목록에서 특정 일정을 삭제일정 클릭 시 수정 가능LocalStorage 업데이트로 새로고침 후에도 반영📦 1. 일정 수정 및 삭제 로직 만들기✅ handleEditEvent() 함수 추가// src/components/EventUtils.tsimport { ..

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 7편: 일정 데이터 영구 저장 – LocalStorage 연동으로 새로고침에도 유지하기지난 편에서는 사용자가 일정을 추가하고, 선택한 날짜에 맞춰 렌더링하는 기능을 구현했습니다.하지만 새로고침하면 데이터가 모두 날아가는 불편한 현실이 있었죠.이번 글에서는 브라우저에서 데이터를 지속적으로 유지할 수 있도록LocalStorage와 연동하여 일정 데이터를 저장하고 복원하는 기능을 구현합니다.🎯 목표LocalStorage에 일정 데이터를 저장앱 시작 시 LocalStorage로부터 데이터를 불러오기저장/불러오기 로직을 TypeScript로 구조화📦 1. LocalStorage 유틸리티 함수 만들기✅ EventStorage...

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈 - 사용자 이벤트 처리 – 날짜 선택과 월 이동 기능 구현지난 편에서 우리는 기본 달력 UI를 구성하고 현재 월의 날짜를 화면에 표시하는 기능을 만들었습니다.이제는 실제로 동작하는 캘린더, 즉✅ 날짜를 클릭하면 이벤트가 발생하고,✅ 좌우 버튼을 누르면 이전/다음 달로 이동할 수 있는기능들을 추가하겠습니다.🎯 목표날짜 클릭 이벤트 처리이전/다음 달 이동 버튼 추가 및 상태 관리클릭된 날짜의 시각적 강조🧠 사용자 이벤트 설계 흐름✅ 필요한 동작 목록동작 설명날짜 클릭해당 날짜를 강조하고, 이후 기능과 연결이전 달 클릭현재 월에서 -1 이동다음 달 클릭현재 월에서 +1 이동🛠️ 1. 상태를 관리할 수 있는 구조 만들기✅ ..

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈 - 일정 데이터 관리하기 – 이벤트 추가 및 저장 구조 설계이번 편에서는 캘린더 플러그인에 꼭 필요한 기능인“일정(Event)”을 등록하고, 저장하며, 렌더링하는 데이터 흐름을 설계합니다.이제 달력을 넘기고, 날짜를 선택할 수 있게 되었으니,각 날짜에 일정을 추가하고 확인할 수 있어야겠죠?🎯 목표일정(Event) 데이터 구조 정의 및 저장 방식 설계날짜를 클릭하여 일정을 추가하는 기능 구현각 날짜별로 등록된 일정이 캘린더에 표시되도록 처리🧠 데이터 설계✅ CalendarEvent 타입 다시 확인// src/types.tsexport interface CalendarEvent { id: string; title: s..

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 4편: 캘린더 플러그인 구조 설계 – 날짜 렌더링을 위한 UI 기본 구성이번 편에서는 드디어 본격적으로 캘린더 플러그인의 UI 구조를 설계하고,기본 날짜 렌더링 기능을 구현해보겠습니다.우리는 이미 TypeScript 기반의 개발 환경과 Webpack 설정을 완료했으므로,이번 글부터는 **“화면에 달력을 출력하는 실질적인 기능 구현”**에 집중할 수 있습니다.🎯 목표한 달 달력 구조를 설계하고 렌더링하는 함수 만들기Date, TypeScript, DOM 조작을 활용해 UI 구성캘린더 데이터를 화면에 그릴 수 있는 최소 기능 완성🧠 캘린더 기본 구조 이해하기✅ 필요한 구성 요소요소 설명연/월 헤더현재 표시 중인 날짜요일..

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 3편: Webpack 제대로 이해하기 – 번들링 개념과 설정 파일 완전 분석이번 글에서는 Webpack의 핵심 개념인 번들링, 모듈, 의존성 그래프, 로더, 플러그인을 실제 코드와 함께 이해하고,우리가 작성한 TypeScript 코드가 어떻게 브라우저에서 실행 가능한 자바스크립트로 변환되는지Webpack이 어떤 역할을 수행하는지를 체계적으로 설명하겠습니다.🎯 목표Webpack의 역할과 작동 방식 이해webpack.config.js의 주요 속성 분석Webpack에서 ts-loader, dev-server, output 구조 설정 완전 정복🧠 Webpack이란?Webpack은 모듈(Module)을 하나의 번들로 묶어주는..

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈 - TypeScript 제대로 이해하기 – 타입 시스템과 캘린더 데이터 모델링이번 글에서는 TypeScript의 핵심 개념을 배우고, 이를 바탕으로 캘린더 플러그인의 데이터 구조를 타입으로 설계해보겠습니다.특히 TypeScript를 처음 접하는 개발자라면 “왜 TS를 써야 하는가?”에 대한 감을 잡는 데 중점을 두겠습니다.🎯 목표TypeScript의 기본 개념(타입 지정, interface, enum 등) 이해캘린더에서 사용될 데이터 타입 정의하기실제 코드에서 TypeScript가 제공하는 안전성과 개발 편의성 체감하기💡 TypeScript란?TypeScript는 JavaScript에 타입 시스템을 추가한 언어입니다...

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 1편: 개발 환경 설정과 프로젝트 구조 이해하기웹앱에서 활용할 수 있는 커스터마이징 가능한 캘린더 플러그인을 직접 만들어보는 시리즈의 첫 번째 글입니다.이 시리즈는 Webpack, TypeScript, JavaScript, Node.js 환경을 처음 접하는 사람들을 위해 개념 설명 + 예제 코드 + 실습 중심으로 작성됩니다.이번 글에서는 프로젝트의 기초 환경을 설정하고, 플러그인의 구조를 설계하는 데 초점을 맞춥니다.🎯 목표Node.js 기반 TypeScript 프로젝트 초기 설정Webpack을 위한 기본 설정 파일 구성향후 캘린더 플러그인 개발을 위한 폴더 구조 설계🛠️ 1. 개발 도구 사전 설치✅ Node.js ..