new Date()를 이용한 간단한 시간의 포맷 변경도 가능하지만 dayjs를 사용하면 더 높은 차원의 포맷 변경과 파싱이 가능하다. 꽤 자주 쓰게 되는 유틸리티지만 쓸 때마다 구글에 검색해보는 게 귀찮아서 블로그에 조금씩 정리해본다.
참고로 dayjs는 설치안해도 dayjs 공식문서 관리자도구 > console 에서 간단하게 테스트할 수 있다.
String을 Date로 파싱하기
오늘 일하면서 따끈하게 사용한 방법이다. 은행과 거래한 데이터를 저장하다보면 시간과 날짜 포맷이 엉망(?)인데 이걸 바로 잡는데에 dayjs가 한몫 해주었다.
1
2
const time = "221039"; //22시10분39초
const date = "20220926"; //2022년9월26일
시간과 날짜가 6자리 문자열로 DB에 저장된다. 이걸 2022.09.26 22:10:39 의 날짜형식으로 나타내고 싶다.
string을 Date 객체에 넣으면 파싱될까 했지만 역시나 실패했다.
1
2
console.log(new Date(date + time)); // Invalid Date
console.log(new Date(Number(date + time))); // Sat Jan 01 1977 09:23:41 GMT+0900
안되는게 당연한 것이 Date() 생성자는 매개변수로 타임스탬프 값을 받는다. 혹은 ,로 년월일을 구분해줘야 한다.
아래와 같이 -와 :를 이용해 날짜와 시간을 형식에 맞춰 넘기면 Date를 반환하긴 한다.
1
console.log(new Date("2022-09-26 22:10:39")); // Mon Sep 26 2022 22:10:39 GMT+0900
문자열을 조각조각 내고 형식에 맞춰서 Date() 생성자에 넘기는 것도 방법이지만 더 간단한 방법을 찾아보기로 했다. dayjs 객체로 다양하게 시간 포맷을 변경할 수 있고 플러그인을 사용하면 더 다양한 기능을 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
dayjs.extend(customParseFormat);
const time = "221039"; //22시10분39초
const date = "20220926"; //2022년9월26일
const datetime = dayjs(date + time, "YYYYMMDDHHmmss").toDate();
console.log(datetime); // Mon Sep 26 2022 22:10:39 GMT+0900
어느 자리가 연월일인지 시분초인지 지정하면 그대로 Date 객체로 반환하는 편리한 유틸리티!!
1
2
3
4
const datetimeFormatted = dayjs("20220926221039", "YYYYMMDDHHmmss")
.format("YYYY.MM.DD HH:mm:ss")
.toString();
console.log(datetimeFormatted); // '2022.09.26 22:10:39'
포맷을 지정하면 내가 원하는 형식의 문자열을 얻을 수 있다. 너무 간편하다!
UTC 타임존 변경하기
Date 객체 사용하기
Date 객체의 toLocaleString() 메소드를 사용해 UTC 시간을 한국 시간으로 바꿀 수 있다.
1
2
3
4
5
6
7
8
9
const koreanTimeInEnglish = new Date().toLocaleString("en-GB", {
timeZone: "UTC",
});
const koreanTimeInKorean = new Date().toLocaleString("ko-KR", {
timeZone: "Asia/Seoul",
});
console.log(koreanTimeInEnglish); // 27/09/2022, 13:30:42
console.log(koreanTimeInKorean); // 2022. 9. 26. 오후 10:30:42
UTC 시간이 13시, 한국 시간이 22시로 9시간 차이가 난다.
dayjs 유틸리티 사용하기
1
2
3
4
5
6
7
8
9
10
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
dayjs.extend(utc);
const utcTime = dayjs().utc().format();
const koreanTime = dayjs().utcOffset(9).format();
console.log(utcTime); // 2022-09-27T13:49:46Z'
console.log(koreanTime); // 2022-09-27T22:49:58+09:00'
utcOffset()에 -16 ~ 16 사이의 값을 넣으면 시간으로 인식한다.
1
dayjs().utcOffset(540).format(); // 2022-09-27T22:53:30+09:00'
분단위도 똑같이 인식한다.
날짜와 시간을 다양한 포맷으로 변경하기
1
2
3
4
5
6
7
8
9
const options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
};
const koreanTime = new Date().toLocaleString("ko-KR", { ...options });
console.log(koreanTime); // 2022년 9월 27일 화요일
1
2
3
4
5
6
const options = {
hour12: false,
};
const koreanTime = new Date().toLocaleString("ko-KR", { ...options });
console.log(koreanTime); // 2022. 9. 27. 22시 42분 34초
Date 객체를 사용해 다양하게 날짜와 시간을 표현할 수 있다.
dayjs 유틸리티를 사용해 무궁무진하게 이용할 수 있을 것 같은데.. 엄두가 안난다.