[사람별_Day10] 월별로 데이터 캐싱하기

오전 스크럼 시간에 캘린더 구현 기능을 이야기 나누던 중, 튜터님의 한 마디

"약속 데이터는 한 번에 다 받아오나요? 월별로 넘어갈 때마다 데이터를 가져오는 건 어떨까요?"

 

테스트 단계인 지금은 임의의 값 두어 개만 넣어놓고 전체를 가져오기 때문에 크게 문제가 안 되겠지만,

실제로 이 서비스가 활성화된다면..

여러 유저가 약속 일정을 추가하게 되고, 시간이 지나 아주 예전 데이터까지 다 불러오게 된다면...

 

안 되겠다. 매 달마다 데이터를 가져오고 캐싱해두어야겠다.

 

월별 데이터 캐싱하기

 

간단히 설명하자면 캘린더 컴포넌트 - useQuery 커스텀 훅 - supabase 데이터 페칭 함수 세 로직의 관계를 수정하면 된다.

 

캘린더 컴포넌트

캘린더 컴포넌트의 역할은 다음과 같다.

• 해당 달의 상태 관리 - Date 객체 : Wed Apr 09 2025 23:37:00 GMT+0900 (한국 표준시)
• 해당 달의 현재 년도 - number : 2025
• useQuery 커스텀 훅에 년도와 달의 값 넘겨주어 데이터 받아오기 : 약속 일정 데이터

  const [month, setMonth] = useState(new Date()); //해당 달 
  const calendarYear = month.getFullYear(); // 해당 달의 년도
  const { data: events, isPending, isError, error } = useGetCalendarPlans(calendarYear, month);

 

 

useQuery 커스텀 훅

useQuery 커스텀 훅의 역할은 다음과 같다.

• supabase에 숫자로 전달해주기 위해 타입 전환
• 해당 년도의 달마다 캐싱 (staleTime은 1일)
• supabase 페칭 로직에 년도와 달 넘겨주어 값 가져오기
• 받아온 데이터를 캘린더에 적용하도록 가공하기

export const useGetCalendarPlans = (year: number, monthDate: Date) => {
  const month = monthDate.getMonth() + 1; // Date 객체 -> 숫자 전환
  return useQuery<CalendarEventType[]>({
    queryKey: [QUERY_KEY.CALENDAR_PLANS, year, month], //달마다 캐싱
    queryFn: async () => {
      const plans: PlansType[] = await getPlans(year, month); // supabase에서 plans 데이터 가져오기

      // 캘린더에 적용되도록 데이터 가공하기
      const events: CalendarEventType[] = plans.map((plan) => ({
        id: plan.plan_id,
        title: plan.title,
        start: new Date(plan.start_date),
        end: new Date(plan.end_date),
      }));
      return events;
    },
     staleTime: 24 * 60 * 60 * 1000, // 1일
  });
};

 

 

 

supabase 데이터 페칭 함수

supabase 데이터 페칭 함수의 역할은 다음과 같다.

• 매 달의 첫 날과 마지막 날 만들기
• 약속 추가할 때 1시간 추가한 이유
  • DnD 시 단일 일정 늘어남 (end-start = 0 일 때 자동처리)
  • 연속 일정 시 마지막 날 달력에 적용시키기
• 월말~월초 이어지는 약속도 나타내기 위해 setHours 적용
• lte: 작거나 같다 / gte: 크거나 같다

export const getPlans = async (year: number, month: number): Promise<PlansType[]> => {
  const startOfMonth = new Date(year, month - 1, 1); //첫 날
  const endOfMonth = new Date(year, month, 0); //마지막 날 (4/30 00:00:00)
  // 현재 start_date가 4/30 01:00 이기 때문에 연속 일정의 첫 날도 함께 포함시키기 위함
  endOfMonth.setHours(23, 59, 59, 999);

  const { data: plans, error } = await supabase
    .from(PLANS)
    .select('plan_id, user_id, contacts_id, title, detail, priority, start_date, end_date')
    //해당 달의 데이터만 가져오기(넘어가는 연속 일정 포함)
    .lte('start_date', endOfMonth.toISOString()) // 일정이 달의 마지막 날과 같거나 이전에 시작
    .gte('end_date', startOfMonth.toISOString()); // 일정이 달의 첫 날보다 같거나 이후에 끝
  if (error) {
    throw new Error(error.message);
  }
  return plans;
};