[앱 완성도 높이기2 - 날짜보기] 타임존 관련 설정 문제

23년 05월 9일 22시 32분에 게시글을 작성했지만,
아래 이미지를 보면 알 수 있듯이,

API로 가져온 createdAt은 UTC 기준 날짜로 DB에 저장되어 있습니다.

강의 영상대로 dateView 메소드를 구현한 후

게시글 작성날짜를 보면 다음과 같습니다.

위 결과를 보면 알 수 있듯이 상대시간 계산이 제대로 이뤄지지 않고 있음을 확인할 수 있습니다.

검색을 해보니 day.js에서 utc 플러그인을 사용할 때 timezone 플러그인을 함께 사용해야 하는 것 같습니다. (참고: Dayjs 로 타임존을 다룰 때 주의해야 할 사항 2가지 (velog.io))

위 내용을 참고하여 dateView 메소드를 다음과 같이 수정했습니다.

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import ko from "dayjs/locale/ko";

function dateView(date) {
  dayjs.extend(utc);
  dayjs.extend(timezone);
  dayjs.locale(ko);
  dayjs.extend(relativeTime);

  return dayjs().to(dayjs(date).tz().format("YYYY-MM-DD HH:mm:ss"));
}

export default dateView;

그리고 결과를 확인해보면,

한국 시간을 기준으로 상대시간이 올바르게 계산되는 것을 확인할 수 있었습니다.