[사람별_Day3] 캘린더 라이브러리 비교📆

최종 프로젝트 핵심 기능 분석을 통해 정해진 주제는 '사람 별 일정 관리 서비스'

핵심되는 기능 중 '캘린더'를 구현하게 되었다.

캘린더를 구현하는 방법은 라이브러리와 직접 구현하기 로 나눌 수 있다.

 

 

캘린더 구현 방법 2가지 비교

라이브러리는 비교적 쉽고 빠르게 구현이 가능하지만 커스터마이징이 어렵다.

직접 구현하는 방법은 커스터마이징이 자유롭지만 구현이 오래 걸린다.

 

캘린더 라이브러리와 직접 구현하는 방식을 비교해보았다.

캘린더 구현 방법 정리

 

시간 안에 진행해야 하는 협업 프로젝트이기에 라이브러리를 사용하기로 만장일치 !

 

 

캘린더 라이브러리 비교

아래는 공식 문서에서 볼 수 있는 달력들이다.

1. Toast UI Calendar

 

2. React-Calendar

 

3. React-Big- Calendar

 

4. FullCalendar

 

5. DayPicker

총 다섯 개의 라이브러리 중 구현하고자 하는 UI와 가까운 것은 Toast UI Calendar, React Big Calendar, FullCalendar.

풀 캘린더는 리액트에서 사용하기에 부적합할 것 같아 탈락.

참고로 풀 캘린더에서 영감을 받아 만든 것이 리액트 빅 캘린더!

 

나머지 두 라이브러리를 비교하였다.

비교 항목	Toast UI Calendar	React Big Calendar
번들 크기	무거움 (~250KB)	가벼움 (~120KB)
렌더링 속도	일정이 많을 경우 느려질 수 있음	빠름
멀티데이 이벤트 (연속 일정)	기본 제공	지원하지만 직접 스타일 조정 필요
드래그 & 드롭 기능	기본 제공	직접 구현해야 함
반응형 (Responsive) 지원	직접 CSS 조정 필요	일부 지원 (레이아웃 깨질 수 있음)
적응형 (Adaptive) 지원	모바일/PC 자동 적용	직접 CSS 조정 필요
커스터마이징 자유도	커스텀 가능하지만 스타일 조정 어려움	Tailwind 등으로 쉽게 커스텀 가능
Supabase 연동	가능	가능

 

추가로 토스트 ui 캘린더는 2.0으로 업데이트 되면서

'모던 자바스크립트 개발 환경에 발맞추면서 애플리케이션 대부분을 새로운 코드로 재구성' 되었다고 한다.

 

주요 변경 사항

• 바닐라 JS -> Preact X + TypeScript 기반으로 재구성
• 번들 사이즈 대폭 감소
• 문서 개선

 

React Big Calendar 선정 이유

그럼에도 결국 고른 라이브러리는 React Big Calendar !

그 이유로는

 

1. 점유율이 높다.

npm다운로드 트렌드를 비교해보면 빅 캘린더가 월등히 높은 것을 확인할 수 있다.

 

2. 번들 용량이 적다.

협업을 진행하는 이번 프로젝트에는 번들 용량을 고려해볼만 하다.

번들 용량이 무겁다면 다음과 같은 문제가 발생할 수 있다.

• 초기 로딩 속도가 저하된다.
• 클라이언트의 성능이 저하된다.(렌더링 속도 저하)
• 협업 및 배포 속도가 저하된다.
• 모바일 및 저속 네트워크에서 불리하다.(페이지 로딩 지연)

 

3. 다양한 레퍼런스가 있다.

구글에 '리액트 빅 캘린더' 를 검색하면 많은 활용 사례들을 확인할 수 있다.

라이브러리 특성상 커스터마이징이 자유롭다는 점에서 다양한 레퍼런스가 있는 듯 하다.

4. 공식 문서에서 반응형을 직접 확인할 수 있다.

모바일 환경에서 달력을 어떻게 구현하느냐가 큰 고민이었다.

적응형도 고려를 했으나, 리액트 빅 캘린더는 모바일 화면에서도 자연스럽게 반응형이 적용된다.

 

리액트 빅 캘린더 공식문서에서 개발자도구를 통해 반응형을 확인할 수 있다.

 

5. 커스터마이징이 번거롭지만 프로젝트에 적합한 디자인으로 구현 가능하다.

리액트 빅 캘린더를 하나하나 뜯어보진 않았지만 components 옵션이 굉장히 다양하다고 한다.

일일이 설정해주어야 하기 때문에 번거롭지만, 프로젝트에 맞는 디자이너님의 요구사항을 적용하기에는 필요하다고 생각이 들었다!

 

 

생각 정리

라이브러리를 사용한다고 해서 대충하고, 직접 구현한다고 해서 꼭 좋은 방법이 아니라는 것은 알고 있다.

물론 하나하나 만들어가면 더욱 좋겠지만, 상황에 맞는 선택을 하고 그 선택에 최선을 다하면 되는 것!

 

그리고 그 선택에는 항상 이유와 근거를 말할 수 있어야 한다.

단지 편해서, 빨라서, 예뻐서는 이유가 될 수 없듯이 선택지에 대해 알아보고 각각의 장단점을 파악해서 현재 상황에 적절한 선택을 해야한다.

그렇기 때문에 내 선택에 신중해야 하며 그 선택에는 책임이 따른다..!

 

토스트 ui 캘린더의 공식 문서가 한글화 되어있고, 커스터마이징에 비교적 큰 힘이 들어가진 않지만,

내가 구현하고자 하는 바를 실현하기 위해 ..! 더욱 열심히 리액트 빅 캘린더를 파헤쳐봐야겠다!!