구현 목표

https://www.reby24.com/apply

• 라이브러리를 이용해서 캘린더를 불러온다.
• 청약 접수 마감일을 캘린더에 표시해준다.

캘린더 라이브러리

react-calendar

1. 처음에는 가장 유명한 react-claendar를 사용하려고 했다.
2. 그러나 패키지를 설치하고 실제로 이용해 보는 과정에서 에러가 발생했다.

<aside> 🚫 Text content does not match server-rendered HTML. Server: “February 2023” Client: “2023년 2월”

</aside>

Next.js에선 이를 ‘React Hydration Error’라고 명시하였는데, 해당 문서를 살펴보면, 애플리케이션을 렌더링하는 동안 사전에 렌더링된 React 트리(SSR/SSG)와 브라우저에서 랜더링된 React 트리 간에 차이가 존재하여, React 트리가 DOM과 동기화되지 않고 예기치 않은 콘텐츠/속성이 나타날 수 있다고 합니다.

1. 해당 에러를 해결할 방법을 찾을 수 없었고, react-calendar가 Next.js와 잘 맞지 않는다는 생각에 다른 캘린더 라이브러리를 찾아보기로 했다.

FullCalendar

1. next.js와 calendar 키워드로 검색했을 때 추천 받았던 캘린더 라이브러리이다.
2. 직접 사용해 본 결과 next.js와 충돌이 일어나지 않았다.
3. 기본적으로 제공하는 캘린더 템플릿이 이번 프로젝트에서 요구하는 형식과 부합했다.
4. 공식 문서가 잘 정리되어 있고, css도 커스텀할 수 있는 점을 확인했다.