📅 TOAST UI Calendar 2.0
2018년 4월 TOAST UI Calendar 1.0이 출시된 이래, 드디어 새로운 메이저 버전이 릴리즈 되었습니다.
이번 새 메이저 버전은 특별하고 새로운 기능이 많이 추가된 것은 아니지만, 모던 자바스크립트 개발 환경에 발맞추면서 애플리케이션 대부분을 새로운 코드로 재구성하는데 시간을 투자했습니다. 캘린더를 구성하는 컴포넌트는 이미 다른 TOAST UI 제품군도 애용하고 있는 Preact 기반으로 만들면서, 상태 전달 체계를 구축하기 위해 Zustand를 프로젝트에서 쓸 수 있도록 조사하고 포팅하기도 했습니다.
덕분에 앞으로 기능 추가를 하거나 버그를 고칠 때 이전 버전의 코드베이스를 이해하고 수정하는 것에 비해 더 수월한 작업을 할 수 있으리라 기대합니다.
주요 변경 사항
주요 변경 사항은 다음과 같습니다.
- Preact X + TypeScript 기반으로 재구성
- 번들 사이즈 대폭 감소
- 문서 개선
Preact X + TypeScript 기반으로 재구성
기존 버전은 최초에 바닐라 JS로 만들어져 오랜 시간동안 유지보수 되어왔지만, 코드가 점점 거대해지면서 코드의 흐름을 일관성있게 유지하거나 짧은 시간 안에 그 내용을 이해하는 것이 어려워졌습니다. 또한 템플릿 엔진으로 사용하는 HandlebarsJS의 한계 때문에 한 페이지에 캘린더가 여럿 들어가야하는 뷰의 경우 각 캘린더 인스턴스마다 다른 템플릿을 적용하기 어렵다는 문제도 있었습니다.
TOAST UI 팀은 오랜 고민과 조사 끝에 Preact X 기반으로 전체 애플리케이션을 다시 만들기로 결정했습니다. 다른 제품이 이미 Virtual DOM 기반으로 렌더링을 하거나(Editor), Preact 이전 버전을 사용하고 있어서(Grid) 적용을 하는 것이 아주 어렵지는 않으리라 생각했습니다.
덕분에 컴포넌트의 렌더링과 비지니스 로직을 함께 선언적으로 작성 및 관리할 수 있게 되었고, 컴포넌트 사이에 공유되는 로직은 Hooks API의 강력한 기능을 이용하여 쉽게 재사용할 수 있었습니다.
또한 다른 제품과 마찬가지로 TypeScript (타입스크립트)를 도입하였습니다. 요즘은 많은 자바스크립트 기반 프로젝트가 타입 시스템을 도입하고 있는 상황이고, 팀 내부에서도 충분히 그 유용함을 인지하고 있기 때문에 거부감 없이 프로젝트에 적용할 수 있었습니다.
하지만 Preact X를 도입하면서 브라우저의 지원 범위도 변경되었습니다. 이전 버전은 IE(Internet Explorer) 9까지 지원하지만, 새로운 버전은 IE 11부터 지원합니다. 또한 IE 11을 지원하기 위해서는 별도로 제공되는 레거시 브라우저용 번들을 사용해야 합니다.
지원 범위에 대한 자세한 내용은 이 문서를 참고해주시기 바랍니다.
번들 사이즈 대폭 감소
애플리케이션을 재구성하면서 일정 배치 및 레이아웃 계산 로직은 재활용할 수 있었지만 뷰와 관련된 코드는 모두 Preact 컴포넌트로 재작성되었습니다. 그 과정에서 번들 사이즈도 크게 줄었습니다.
[왼쪽이 신규 버전의 번들 사이즈, 오른쪽이 기존 버전의 번들 사이즈 - BundlePhobia 이용]
다만 위의 이미지에서 표시되는 용량은 IE 지원을 배제한 모던 브라우저용 번들의 크기이며, IE를 지원하기 위해 별도로 제공되는 번들은 Minified(gzip 제외) 기준 약 350kB의 크기를 가지고 있습니다.
// 모던 브라우저용 패키지
import Calendar from '@toast-ui/calendar';
// IE11 지원용 패키지
import Calendar from '@toast-ui/calendar/ie11';문서 개선
모든 TOAST UI 제품은 강력하고 다양한 기능을 가지고 있지만, 캘린더는 그 기능에 비해 적절한 문서를 제공하지 못하고 있었습니다. 기존 API 문서에 설명이 불분명한 부분이 있는데다, '시작하기' 와 같이 처음 사용하는 사용자를 위한 가이드가 업데이트되지 않아서 캘린더를 사용하려는 사용자들이 많은 어려움을 겪었으리라 생각합니다.
그래서 이번 버전을 개발하면서 최대한 처음 사용하는 사용자가 불편을 느끼지 않도록 문서를 밑바닥부터 다시 작성했습니다.
API 문서 페이지는 대략적인 API 소개와 예제 위주로 구성되어 있으니 자세한 내용을 살펴보시려면 저장소의 가이드 문서를 읽어주시기 바랍니다.
기타
Schedule이라는 용어가 일반적인 영어권 사용자들에게 혼란을 줄 수 있다는 의견이 있어, 다른 캘린더 애플리케이션을 참고하여Event라는 용어를 사용하기로 했습니다.- 역할이 불분명한 옵션을 제거하거나 통합하였습니다. 자세한 내용은 옵션 문서를 참고해주세요.
- 테마를 적용할 때도 중첩 객체를 사용하여 어디에 어떤 테마가 사용되는지 구분되기 더 쉽도록 만들었습니다. 자세한 내용은 테마 문서를 참고해주세요.
어떻게 사용하나 & 버그 제보
다음과 같이 프로젝트에 새로운 TOAST UI 캘린더를 사용해보실 수 있습니다.
npm install @toast-ui/calendarimport Calendar from '@toast-ui/calendar';
import '@toast-ui/calendar/dist/toastui-calendar.min.css';
const container = document.getElementById('calendar');
const calendar = new Calendar(container);사용 방법 및 API는 대부분 비슷합니다. 그래도 약간의 차이는 있기 때문에 버전을 업그레이드 하신다면 마이그레이션 가이드를 참고해주세요.
또한 새로이 프로젝트에 TOAST UI Calendar를 도입하신다면, 시작하기 가이드를 참고해주세요.
사용하면서 발견된 버그는 GitHub Issues에 2.0 레이블과 Bug 레이블을 붙여서 영문으로 제보해주시고, 질문은 GitHub Discussions의 Q&A 카테고리를 이용해주시기 바랍니다.