[🐾 Jelly Diary] React + Typescript 캘린더 라이브러리 이용하기

 

반려동물의 하루 일지를 기록하는 웹 서비스를 기획중인 JellyDiary 젤리 다이어리 줄여서 젤다 에서는

매일 작성 되는 일지를 달력 형식으로 보여줄 필요성이 있었다.

프론트엔드 멘토링을 통해

직접 구현하는 것을 추천하지만

실무에서는 이미 만들어진 라이브러리를 가져다 쓰는 경우가 대부분이라고 한다.

그래서 이번 프로젝트에서도 잘 맞는 라이브러리가 있으면 사용해 보고자 여러 레퍼런스들을 찾아보았다.

 

리액트와 타입스크립트로 캘린더 라이브러리 사용해 보기

우선 아래와 같이 와이어 프레임을 짜 보았다.

 

내가 필요 한 기능은

 

1. 월(Monthly) 형식의 달력 포멧을 제공할 것

2. 일 별로 추가되는 일지를 달력에 리스트로 보여줄 수 있을 것

3. 일지 추가 버튼을 생성하고 일지를 추가하면 달력에 추가 할 수 있을 것

4. 오늘 날짜는 배경 색을 다르게 처리하여 시각적으로 표현 가능할 것

5. 월 달력 페이지를 넘길 수 있을 것

6. 이전/ 이후 월의 달력도 보여줄 것

 

정도였고 추가기능으로,

추후 구현하고자 하는 UI는 드래그앤 드롭으로 이동 가능할것,

라이브러리를 파악하는데 시간을 많이 쏟지 않게 캘린더 커스텀이 간편할 것, 

몇개 이상의 일지를 생성하면 'more..'버튼이나 스크롤로 처리가 가능할 것 정도로

 

레퍼런스들을 찾아보게 되었다.

 

1.  react-calendar

npm i react-calendar

https://www.npmjs.com/package/react-calendar

react-calendar

 

가장 많이 알려진 라이브러리다.

커스텀이 가능하고 제공하는 기능들이 많은 장점이 있다.

다만 내가 적용하고 싶은 UI와 달라서 좀 더 월 별 디테일을 살릴 수 있는 라이브러리를 다시 찾아보았다.

 

2. moment.js 

npm install moment

https://momentjs.com/docs/#/-project-status/

Moment.js | Docs

 

Moment.js 또한 타입스크립트를 지원하고 커스텀이 가능했다.

하지만 제공하는 Docs 가 불친절 하여 선택하지는 않았다.

3. TostCalendar

npm install --save @toast-ui/calendar

https://ui.toast.com/tui-calendar

TOAST UI :: Make Your Web Delicious!

 

무려 한국어를 Docs 에서 기본 제공하는 NHN 사에서 만든 라이브러리이다.

 

기획하였던 UI와 가장 유사하여

마지막 까지 고려하였던 라이브러리인데

타입스크립트로 작성되었고 문서도 한글로 작성되어 있는점이 좋았다.

그리고 원하는 기능을 모두 가지고 있었다.

선택하지 않은 이유는

가장 최신 업데이트 일자가 2년 전이고, 실제 참고할 수 있는 코드들이 한정되어있다는 점이었다.

하지만 UI가 예뻐서 언젠간 꼭 써봐야지

 

4. Full Calendar

npm install --save \
  @fullcalendar/core \
  @fullcalendar/daygrid

https://fullcalendar.io/docs/month-view

Month View - Docs | FullCalendar

 

마지막으로 찾아보았던 Full Calendar 라이브러리다

무료와 유료 버전으로 나뉘긴 하지만 무료 버전에서도 원하는 기능들을 사용할 수 있다는 점에 선택하게 되었다.

특히 Docs가 잘 되어있고 타입스크립트에서도 사용 가능하며

커스텀이 가능하다는 점에서 선택하게 되었다.

 

사용법은 추가로 정리해 보고자 한다.