[Next] dayjs UTC시간 -> 현지시간 적용

UTC (협정 세계시)

UTC는 협정 세계시를 나타내는 국제 표준 시간이다. UTC는 그리니치 평균 시간 (GMT)과 동일한 값을 나타낸다. UTC는 고정된 시간대로, 시간대 변환 또는 일광 절약 시간(DST) 적용이 없으므로 시간 관리와 데이터 동기화를 훨씬 더 쉽게 만들어 준다.

서버에서 UTC 시간 사용

• 국제적인 일치성: UTC는 국제적인 시간 표준으로 사용되며, 서버에서 UTC 시간을 사용하면 모든 지역의 사용자에게 일관된 시간을 제공할 수 있다.
• 데이터 분리: 서버에서 UTC 시간을 사용하면 데이터를 지역 또는 시간대에 따라 구분하기가 더 쉽다.

서버 측에서는 위와 같은 이유로, UTC 시간을 기본으로 사용한다.

내가 진행하고 있는 프로젝트의 경우 다국어를 지원하는 웹사이트로, 숙박 예약 시설이라 Date 값이 매우 중요하게 작용했다.

문제

사실 dayjs의 format() 함수만 써줘도 dayjs 내에서 현재 서버/클라이언트의 현지 시간을 계산하여 반환해 준다.

let date = new Date().toISOString();
console.log("ISO date->", date)
// ISO date-> 2023-09-05T12:10:27.289Z

console.log("formated Date ->", dayjs(date).format('YYYY. MM. DD HH:mm:ss'))
// formated Date -> 2023. 09. 05 21:10:27

문제는 로컬 개발 환경에서는 브라우저의 현지시간('Asia/Seoul')이 잘 출력 됐었는데,
배포 환경에서는 현지시간이 적용이 안되어 있었다.

원인

원인은 server side fetch 때문이었다.
detail 페이지를 server side로 호출했었는데, server 쪽에서는 UTC시간이 사용되기 때문에, UTC시간이 반영된 페이지가 적용되어
현지시간이 적용된 시간이 나오지 않는 것이었다..

해결방법

해결방법은 간단하다. 'use client'를 사용해 client side로 불러주면 된다.

server side로 fetch를 해왔어도 보여줄 때 client side로 렌더링 해주면 client 쪽 현지시간이 적용된다.

'use client'

import {PropsWithChildren} from 'react'

interface DateProps {
  className: string
}

function Date({className, children}: PropsWithChildren<DateProps>) {
  return <span className={className}>{formatDate(children)}</span>
}

export default Date

client side에서 동작하는 컴포넌트를 만든 뒤

interface PostPageProps {
  searchParams: {id: string}
}

export default async function PostPage({searchParams}: SignInPageProps) {
  const {data} = await getPost(id)
  return (
    <section>
        {...}
        <Date>{data.createAt}</Date>
    </section>
  )
}

date값을 chilren에 넣어 정상 동작 하도록 해주었다.

utc시간대에 대해 이해하고, 서버사이드의 동작 방식에 대해 다시 한번 깨닫게 되었다.