Vanilla Calendar Pro를 만든 방법 — TypeScript를 사용한 가볍고 유연한 JavaScript 달력

안녕하세요, 개발자 커뮤니티!

솔직히 이 글을 쓰기까지 오랜 시간 망설였습니다. "또 다른 불필요한 날짜 선택기입니다."라는 댓글이 있을 수 있다는 점은 이해합니다. 하지만 오늘날 Vanilla Calendar Pro는 GitHub에서 별 480개 이상을 획득하고 월별 17,000회 다운로드를 기록하고 있습니다.

, 제 이야기를 공유하기로 했어요.

먼저 분명히 말씀드리지만 저는 최고의 달력이나 날짜 선택기 개발자라고 주장하는 것이 아닙니다. 이 글은 오픈소스에 대한 나의 첫 경험, 처음부터 어떻게 프로젝트를 만들었는지, 그리고 그것이 다른 개발자들에게 어떻게 유용하게 되었는지에 대한 것입니다.

---

모든 것이 어떻게 시작되었는지

2022년 여름, 프로젝트의 이벤트 캘린더를 구현해야 했습니다. 요구 사항은 간단했습니다.

모달 창에서 원활하게 작동해야 했습니다.
디자인에 어울리는 커스텀 스타일링을 지원해야 했습니다.
날짜를 클릭하면 이벤트 페이지로 이동합니다.

얼핏 보면 간단한 작업처럼 보였습니다. 하지만 적절한 해결책을 찾지 못했습니다. 대부분의 기존 달력은 필요한 기능이 부족하거나 너무 부피가 커서 프로젝트 디자인에 적응하기 어려운 스타일이었습니다.

물론 디자이너에게 레이아웃을 단순화하도록 요청하거나 사소한 형식 문제만 받아들일 수도 있었습니다. 그런데 솔직히 궁금했어요. 나만의 달력을 만들면 어떨까?

그래서 바닐라 캘린더 프로의 첫 번째 버전이 탄생했습니다. "바닐라"

라는 용어는 외부 종속성이 없는 기본 JavaScript를 나타냅니다. 다른 프로젝트에 더 쉽게 통합할 수 있도록 API 문서와 예제가 포함된 README를 작성하여 NPM에 게시했습니다.

---

첫 번째 사용자 — 그리고 첫 번째 별

얼마 지나지 않아 저장소의 첫 번째 문제에 대한 알림을 받았습니다. 노르웨이의 한 개발자가 예상치 못한 질문을 했습니다.

"캘린더에 주 번호를 추가할 계획이 있나요? 이곳 노르웨이에서는 주 번호를 사용하는 것이 매우 흔한데 유용한 기능이 될 것입니다."

이 순간 달력이 나뿐만 아니라 다른 사람들에게도 유용할 수 있다는 것을 깨달았습니다. 하지만 저는 스스로에게 이렇게 물었습니다. 이 모든 노력으로 내가 얻을 수 있는 것은 무엇인가? 노르웨이에 있는 어떤 남자가 내 달력을 사용할 수 있도록 여가 시간을 보내야 하는 이유는 무엇입니까? 대답은 다음과 같습니다. 눈에 띄는 것은 없습니다!

하지만 누군가가 내 캘린더를 다운로드하고 개발 시간을 절약하며 더 중요한 작업에 집중할 수 있다는 정말 도움이 되는 무언가를 만들었다는 생각은 정말 고무적이었습니다. 비록 물질적인 보상은 없었지만, 제가 만든 프로젝트가 다른 사람들에게 도움이 되고 있다는 사실에 깊은 만족감을 느꼈습니다.

그래서 저는 캘린더를 보다 보편적이고 유연한 솔루션으로 전환하기 위해 적극적으로 개선하기 시작했습니다. 기능적일 뿐만 아니라 사용자 친화적인 인터페이스를 목표로 인터페이스도 직접 디자인했습니다.

---

Vanilla Calendar Pro를 차별화하는 요소는 무엇입니까?

• 유연한 레이아웃: 필요에 따라 사용자 정의 버튼이나 요소를 추가하여 캘린더의 HTML 구조를 완전히 사용자 정의하세요.
• 전체 스타일 제어: 모든 CSS 클래스를 쉽게 재정의하여 Tailwind CSS와 같은 프레임워크와 원활하게 통합할 수 있습니다.
• 접근성(a11y): 모든 요소에는 아리아 라벨이 탑재되어 있으며 키보드 탐색을 지원합니다.
• 대화형 팝업: 특정 날짜를 강조표시하고 달력에 직접 추가 정보를 표시합니다.
• 주 번호: 많은 국가에서 널리 사용되는 주 기반 날짜 형식을 지원합니다.
• 시간 선택: 슬라이더 또는 수동 입력을 통해 12시간 형식과 24시간 형식을 모두 제공합니다.
• 테마: 밝은 테마와 어두운 테마를 자동으로 전환하고 사용자 정의 테마를 지원합니다.
• 현지화 및 국제화: 모든 지역에 맞게 주의 첫날, 주말, 공휴일을 쉽게 조정할 수 있습니다.
• 프레임워크 호환성: 기본 JavaScript 기반 덕분에 React, Vue, Angular 및 기타 모든 프레임워크와 작동합니다.

그게 다가 아닙니다! 사실상 모든 요구 사항에 맞게 달력을 사용자 정의할 수 있는 유틸리티, 방법, 작업 및 광범위한 구성 옵션에 대해서는 언급하지 않았습니다.

---

숫자와 문서

Vanilla Calendar Pro는 외부 종속성 없이 완전히 TypeScript로 작성되었습니다. 축소된 파일의 크기는 ~49.33KB(또는 13.52KB gzip)입니다.

다음이 포함된 자세한 문서도 준비했습니다.

• API 참조.
• 대화형 샌드박스가 포함된 학습 페이지

? 프로젝트 홈페이지

? GitHub 저장소

---

결론

아니요, 이것은 혁신적인 제품이 아닙니다. 그것은 또 다른 달력/날짜 선택기일 뿐입니다. 하지만 나에게는 이것이 오픈 소스 여정에서 중요한 이정표가 되었습니다. 다른 개발자들에게 도움이 될 수 있는 유용한 것을 만들어서 기쁘네요.

바닐라 캘린더 프로가 여러분에게도 도움이 되기를 바랍니다. 읽어주셔서 감사합니다!

위 내용은 Vanilla Calendar Pro를 만든 방법 — TypeScript를 사용한 가볍고 유연한 JavaScript 달력의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!