Date.toISOString() 로 인한 -9시간 되돌리기 (@date-fns)

캘린더를 추가하기 전, 투두리스트만 있었을 때는 저장한 날짜(created_at)를 기준으로 태스크를 보여주고 있었는데, 캘린더를 추가하면서 저장 날짜 따로, 태스크 기준일 따로 나누게 되어서 다음과 같이 due_date 컬럼을 추가했습니다.

ALTER TABLE tasks
ADD COLUMN due_date DATE;

 

이후 createTask하는 함수에 props로 due_date를 추가하고, 이외의 필요한 부분에 작성해서 Calendar 페이지에서 모달로 태스크를 작성할 수 있도록 수정했습니다. 그런데 DB를 확인하니 due_date가 -1일 되는 것처럼 보이는 것입니다.

그래서 timestamptz로 타입을 바꾸고 시분초까지 보니까 -9시간이 되어있는 것을 보니 UTC 기준으로 날짜가 저장된 것을 확인할 수 있었습니다.

 

다음 사진을 보면 08/12자 태스크에 due_date로 08/11 15시로 되어 있는 것을 확인할 수 있습니다.

 

찾아보니 JavaScript의 toISOString 함수가 UTC를 기준으로 반환하기 때문에 KST와 비교하면 생긴 9시간의 시차로 인한 문제였습니다.

다른 분들의 코드를 보니 현재 시간을 기준으로 차이를 계산해서 그만큼을 현재 시간에서 빼서 시간을 설정하는 방식이 많이 보였는데, 저는 props로 받은 due_date를 변환해서 KST로 저장하는 방식으로 createTask 함수를 수정해서 일자가 밀리는 문제를 해결했습니다.

 

import { addHours } from 'date-fns'
...
createTask: async (title, detail, userId, dueDate) => {
    const kstDueDate = addHours(new Date(dueDate), 9)
    const supabase = createClient()
    const { data, error } = await supabase
      .from('todolist')
      .insert([{ todo_title: title, todo_detail: detail, user_id: userId, due_date: kstDueDate.toISOString() }])
      .select()

    if (error) {
      console.error('Error adding task: ' + error.message)
    } else {
      set(state => ({ tasks: [...state.tasks, ...data] }))
    }
  },
  ...

 

 

그런데 위에서 due_date의 타입을 date → timestamptz로 바꿨었는데, Today 페이지에서 태스크를 추가하고 새로고침하면 작성한 내용이 날아가는 현상을 목격했습니다.

 

...
    const startDayTime = new Date(selectedDate)
    startDayTime.setHours(0, 0, 0, 0)

    const endDayTime = new Date(selectedDate)
    endDayTime.setHours(23, 59, 59, 999)

    const supabase = createClient()
    const { data, error } = await supabase
      .from('todolist')
      .select('*')
      .gte('due_date', startDayTime.toISOString())
      .lte('due_date', endDayTime.toISOString())
...

 

Supabase에서 데이터를 가져올 때 위와 같은 기준으로 가져왔기 때문에 기존의 예상한 타임라인에 문제가 생겼다고 판단하고 다시 date 타입으로 변경해주니 다시 정상적으로 태스크를 확인할 수 있었습니다.