🗓️ Calendar & DatePicker 라이브러리

🤔 왜 직접 구현하지 않고 라이브러리를 사용했는지?

달력 UI와 DatePicker는 단순히 날짜를 보여주는 컴포넌트가 아니라, 다음과 같은 복잡한 로직을 포함한다.

윤년 처리
월별 일수 계산
날짜 범위
월/주/일 뷰 전환
locale(ko) 처리
시각적 강조/비활성 날짜 렌더링

이러한 기능을 직접 구현하면 오류 가능성 증가, 개발 일정 지연 등의 리스크가 있기 때문에
검증된 라이브러리를 활용하는 것이 안전하고 효율적이라고 판단했다.

스케줄 캘린더 - `React Big Calendar`

📌 선택 이유

월 단위 일정 시각화에 최적화된 라이브러리
React 기반으로 설계되어 컴포넌트 단위 커스터마이징이 용이
FullCalendar도 고려했으나, JS 기반이라 React용 패키지가 래퍼 형태라 구조가 복잡
자체적으로 날짜 계산을 지원하지 않아서, date-fns와 함께 사용 (공식 문서 참고)
date-fns 사용한 이유와 적용
- 함수 단위 import → 필요한 기능만 번들됨
- TypeScript 지원 우수
- locale(ko) 지원
- 시간 계산/포맷팅이 직관적
유틸 분리:
ts
```
const locales = { ko };

export const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
});
```
localizer 캘린더 적용:
tsx
```
<Calendar
localizer={localizer}
...
/>
```

💩 아쉬운 점

Docs - showAllEvents

📚 Reference

DatePicker - `react-day-picker`

📌 선택 이유

Caption, Chevron, Footer 등을 컴포넌트 단위로 교체 가능 → Tailwind 커스터마이징 최적
Disabled 날짜, 날짜 선택, locale(ko) 등 프로젝트 요구사항 충족

📚 Reference

요약

기준	React Big Calendar	react-day-picker
역할	스케줄 시각화	날짜 선택
적합성	월간 일정 UI	일정 생성 모달 입력폼
커스터마이징	Tailwind 기반 스타일링 용이	Tailwind 커스터마이징 최적

라이브러리 도입 시 기준 (From. 멘토님)

번들 크기
트리 셰이킹 지원 여부
필수 기능 충족 여부
커스터 마이징 난이도

VS 나의 기준..

커스터 마이징 난이도
공식 문서 가독성
구글링 최신 블로그 날짜와 문제 발생 시 구글링으로 해결 가능한지
깃허브 검색 타 부트캠프 프로젝트 염탐

고려하지 못한 점 🙂🔫

실제 번들 크기 비교 부재
선택 시, 가볍다/무겁다는 정보를 블로그 기준으로만 판단했다.
Tree-Shaking 영향 확인 부족
ESM(공식 모듈 방식) 여부만 확인하고 넘어갔고, 내부 모듈이 실제로 tree-shake되는 구조인지까지는 파악하지 못했다. 이는 장기적으로 사용하지 않는 코드가 번들에 누적되는 문제를 일으켜 성능 저하로 이어질 가능성이 있다.
접근성 검토 부족
특히 DatePicker는 키보드 조작과 aria 속성이 중요한데, 두 라이브러리의 접근성 수준을 확인하지 못함. 프로젝트에서 접근성이 중요해지면 추가 검토 필요