본문으로 바로가기

[JavaScript] DayJS Timezone 다루는 방법

dayjs 라이브러리에서 타임존 다루기

dayjs를 사용하여 날짜 관련 작업을 하고 있습니다.
타임존 작업을 하는 방법과 제가 실수하거나 헷갈렸던 부분을 정리하여 공유하려고 합니다.

공통

dayjs.extend(utc)
dayjs.extend(timezone)

위 코드는 기본적으로 작성해주시면 됩니다.

dayjs.tz.setDefault 주의점

dayjs.tz.setDefault 함수는 타임존을 변경할 때 사용합니다.
타임존이 변경된 객체는 dayjs 객체가 아닌 dayjs.tz의 객체입니다.
dayjs로 생성하는 것과 dayjs.tz를 이용하여 생성하는 것의 차이를 확인해보겠습니다.

const utc = require("dayjs/plugin/utc");
const timezone = require("dayjs/plugin/timezone");
const dayjs = require("dayjs");

dayjs.extend(utc);
dayjs.extend(timezone);

dayjs.tz.setDefault("America/New_York");

const date1 = dayjs.tz().format("YYYYMMDD HH:mm");
const date2 = dayjs().format("YYYYMMDD HH:mm");

console.log("뉴욕 시간 :", date1);
console.log("서울 시간 :", date2);

다시 클라이언트의 타임존으로 변경하고 싶은 경우 dayjs.tz.setDefault 함수만 실행하면 됩니다.

const utc = require("dayjs/plugin/utc");
const timezone = require("dayjs/plugin/timezone");
const dayjs = require("dayjs");

dayjs.extend(utc);
dayjs.extend(timezone);

dayjs.tz.setDefault("America/New_York");

const date1 = dayjs.tz().format("YYYYMMDD HH:mm");
const date2 = dayjs().format("YYYYMMDD HH:mm");

dayjs.tz.setDefault();
const date3 = dayjs.tz().format("YYYYMMDD HH:mm");

console.log("뉴욕 시간 :", date1);
console.log("서울 시간 :", date2);
console.log("서울 시간 :", date3);

dayjs, dayjs.tz 를 이용하여 타임존 변경

타임존을 변경할 때 2가지 방법이 있습니다.

  • Date 값을 해당 타임존 시간에서 생성했다고 생각하고 변경하기 (현재 시간이 해당 타임존)
  • Date 값을 원하는 타임존 시간으로 변경하기 (시간을 해당 타임존으로 변경)

위 2가지를 잘 구분해야지만 타임존을 다룰 때 문제가 없습니다.

const utc = require("dayjs/plugin/utc");
const timezone = require("dayjs/plugin/timezone"); 
const dayjs = require("dayjs");

dayjs.extend(utc);
dayjs.extend(timezone);

// 현재 'Asia/Ho_Chi_Minh' 타임존 기준으로 날짜를 계산
const date1 = dayjs.tz("1975-12-31T17:00:00.000Z", "Asia/Ho_Chi_Minh");

// 날짜를 'Asia/Ho_Chi_Minh' 타임존으로 계산
const date2 = dayjs("1975-12-31T17:00:00.000Z").tz("Asia/Ho_Chi_Minh");

console.log("호치민 날짜 :", date1.format("YYYYMMDD HH:mm"));
console.log("서울 날짜   :", date2.format("YYYYMMDD HH:mm"));

이 부분은 한번에 이해하기 힘들 수 있습니다.
여러번 읽어보고 직접 해보시면 바로 이해가 되실 것입니다.

참고문헌

• dayjs timezone

반응형