js date 객체를 사용하다 겪은 삽질 경험기

최근 프로젝트에서 날짜와 관련된 비즈니스 로직을 구현하는 중에 예상하지 못한 오류를 마주쳐 삽질을 하게 되었는데요, 이에 대해 기록해보려합니다.

queryString에서 날짜 값을 가져와 작업하는 부분에서 발생했는데요, use-query-params라는 라이브러리를 통해서 원하는값을 가져오는 형태였습니다.

해당 라이브러리의 사용법을 간단히 설명하자면 아래와 같습니다.

import { useEffect } from "react";
import { DateParam, useQueryParam } from "use-query-params";

function App() {
  const [dateFromUseQueryParams] = useQueryParam<>("startDate", DateParam);
  // 이런 방법으로 queryString에서 startDate를 가져 올 수 있습니다.
  // date는 Date, undefined, null로 추론이 됩니다.
}

삽질의 시작

저는 특정 날짜, 예를 들어 startDate가 2024-01-01과 같은지 확인하는 로직을 아래와 같이 구현했습니다.

const [dateFromUseQueryParam] = useQueryParam("startDate", DateParam);

const isToday = dateFromUseQueryParam === new Date('2024-01-01')

 

하지만, queryString에 startDate=2024-01-01이 설정되어 있음에도 불구하고 isToday는 false를 반환했습니다. 이에 따라 디버깅을 시작했습니다.

보통 yyyy-MM-DD 형식의 날짜 문자열을 Date 객체로 변환하면 UTC+9 시간대가 적용되어 Sun Jan 01 2024 09:00:00 GMT+0900와 같은 결과가 나옵니다.

그런데, dateFromUseQueryParam은 제가 예상한 것과는 달리 Mon Jan 01 2024 00:00:00 GMT+0900 형태였습니다.

처음에는 이 부분을 간과하고 다른 원인을 찾느라 삽질을 했지만, 결국 문제의 원인은 dateFromUseQueryParam의 값이 예상과 다르게 시간이 00:00:00으로 처리된 데 있음을 알게 되었습니다.

원인 분석

그럼 왜 dateFromUseQueryParam은 시간이 00:00:00이 되었을까요?

이를 알기 위해 use-query-params의 깃헙을 살펴보았습니다.

날짜의 경우 use-query-params의 decodeDate함수를 통해 원하는 값을 얻게 됩니다.

구현체를 보면 아래와 같은데요, new Date(number, numer, number)와 같은 형태로 Date객체를 만들어줍니다.

이 때문에 시간이 00:00:00으로 나오게 된 것입니다.

const decoded = new Date(...(parts as [number, number, number]));

  if (isNaN(decoded.getTime())) {
    return null;
  }

  return decoded;

결론

v8의 경우 해당 부분에서 날짜들이 어떤 기준에 따라 변환이 되는지 알 수 있습니다.

이번 일을 계기로 Date객체를 다룰 때 어떻게 Date 객체를 만드는지에 따라 시간값이 달라질 수 있다는것을 알게 되었습니다.

특히, Date 객체는 브라우저와 JavaScript 엔진(V8 등)에 따라 처리 방식이 다를 수 있고, Invalid Date가 되는 기준도 다르기 때문에 언제나 변환 과정에서의 세부 사항을 면밀히 살펴볼 필요가 있다고 느꼈습니다.