[사람별_Day4] RBC 파헤치기 2 - date-fns

RBC npm 문서를 읽던 중, 날짜 형식을 지정해야 한다는 점을 알았다.

RBC는 기본적으로 날짜 및 시간을 처리하지 않기 때문에

형식을 지정하기 위해 네 가지의 플러그인을 지원하고 있다.

나만의 생각 정리
RBC는 달력 형태를 만들어 줄 뿐,
해당 숫자가 날짜를 뜻하는 바임을 알게 해주는 것은 플러그인의 역할이다.
즉, 캘린더와 사용자 사이에서 캘린더에게는 문자열로 전달, 사람에게는 날짜로 전달해 주는 통역가 역할이다.

 

 

RBC에서 지원하는 네 가지 플러그인을 비교해보았다.

공식문서:
 Moment.js , Globalize.js , date-fns , Day.js

 

라이브러리	번들 크기	성능	Tree Shaking 지원	TypeScript 지원	타임존 지원
Moment.js	약 260KB	느림	X	O	(moment-timezone 필요)
Globalize.js	약 200KB	느림	X	X	(Intl 지원)
date-fns	약 20KB	빠름	O	O	X
Day.js	약 2KB	매우 빠름	O	O	(플러그인 필요)

 

나는 가벼운 번들 크기, 빠른 속도, 쉬운 접근성을 기준으로 두어 고려했다.

그에 적합하는 것은 date-fns로, 문서도 잘 정리되어 있는 듯 하다.

 

기준에 따르자면 Day.js가 가장 적합하지만,

타임존 지원에 대해 팀원들과 이야기를 나눈 결과 한국인 사용자만 고려하여 진행하기로 했다.

또한 샤드시엔에서 Day Picker를 사용하는 팀원분도 date-fns를 사용해야 했기에 최종 결정은 date-fns !

 

date-fns 사용하여 캘린더 나타내기

 

📍date-fns 설치

pnpm install date-fns

 

📍TypeScript 설치

• date-fns가 기본적으로 TS를 포함하지만,
  모듈 'react-big-calendar'에 대한 선언 파일을 찾을 수 없습니다. 오류로 인해 설치했다.
  • react-big-calendar 패키지가 TypeScript용 타입 정의 파일을 제공하지 않기 때문에 발생한 오류이다.
  • TypeScript는 .d.ts(타입 선언 파일)가 없는 경우, 해당 패키지를 알 수 없다고 판단한다.

📍설치 후 import

"use client";
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import { format, parse, startOfWeek, getDay } from "date-fns";
import { enUS } from "date-fns/locale/en-US";
import { ko } from "date-fns/locale/ko";

// 아래의 import는 해당 컴포넌트를 포함하는 페이지에 입력함
import "react-big-calendar/lib/css/react-big-calendar.css";

 

📍지역화 설정

// 로케일(지역화) 설정
const locales = {
  "en-US": enUS, //미국-영어 : 미국식 날짜
  "ko-KR": ko, //한국-한글 : 한국식 날짜
};

 

📍dateFnsLocalizer로 RBC와 연결

const localizer = dateFnsLocalizer({
  format, // 날짜를 문자열로 변환
  parse, // 문자열을 날짜 객체로 변환
  startOfWeek, // 한 주의 시작 요일 설정
  getDay, // 날짜의 요일 가져오기
  locales, // 다국어 설정 적용
});

 

📍RBC의 <Calendar /> 컴포넌트 props 설정

const MainCalendar = () => {
  return (
    <div>
      <Calendar
        localizer={localizer} // 날짜 및 시간 포맷을 지정(dateFnsLocalizer)
        events={[]} // 여기에 이벤트 추가 가능
        startAccessor="start" // 각 이벤트 객체에서 시작 시간
        endAccessor="end" // 종료 시간
        style={{ height: 500 }} // 캘린더의 높이(CSS 직접 지정)
      />
    </div>
  );
};

 

 

📍props 중 events 상세 설명

• events 배열의 각 객체는 title, start, end을 가짐
• 따라서 startAccessor="start"와 endAccessor="end"는 그 속성을 가져옴
• new Date의 인자가 3인데 왜 4월일까?
  • new Date(year, month, day, hour, minute, second) 
  • JS new Date()의 월 인덱스는 0부터 시작하는 제로 인덱스
    1월 = 0 / 2월 = 1 / 3월 = 2 / ... / 12월 = 11

// 일정 예시
const events = [
  {
    title: "회의",
    start: new Date(2024, 3, 10, 10, 0), // 4월 10일 10:00 AM
    end: new Date(2024, 3, 10, 12, 0),   // 4월 10일 12:00 PM
  },
];

 

 

📌전체 로직

// src > components > Calendar.tsx

"use client";
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import { format, parse, startOfWeek, getDay } from "date-fns";
import { enUS } from "date-fns/locale/en-US";
import { ko } from "date-fns/locale/ko";


const locales = {
  "en-US": enUS,
  "ko-KR": ko, 
};

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
});

const MainCalendar = () => {
  return (
    <div>
      <Calendar
        localizer={localizer}
        events={[]}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
      />
    </div>
  );
};

export default MainCalendar;