[Library] day.js - 날짜 라이브러리

많은 JavaScript 날짜 관련 라이브러리중 가장 가벼운 라이브러리

업데이트가 중단된 moment.js 보다 약 33배 가벼우며, immutable 한 구조라서 굉장히 많이 사용되고 있는 라이브러리

moment.js VS day.js

일반적인 use case의 범위를 초과하는 광범위한 Date 연산을 지원하기 때문 Moment.js는 사이즈가 매우 큰 라이브러리

➡ 사용하지도 않는 기능들 때문에 네트워크 비용은 오르고, 다운로드 속도는 느려지고, 페이지 렌더링 시간은 늘어난다.

Moment.js의 공식 문서에 Moment.js를 대체하기에 좋은 라이브러리들이 소개되어 있는데, 그 중에 Day.js를 선택

• Moment.js와 똑같은 인터페이스
• 기본적인 기능만 포함하여 매우 작은 사이즈, 플러그인을 사용한 확장
• 프론트엔드 코드 내의 모든 Moment.js use case들을 커버 가능

설치하기

npm install dayjs

사용하기

import dayjs from "dayjs";

or

const dayjs = require("dayjs");

현재 날짜 및 시간 객체 생성

dayjs() 함수를 사용해 현재 날짜와 시간 객체를 생성

var now = dayjs();
now.format();

날짜 및 시간 지정 객체 생성

dayjs() 함수를 사용해 원하는 날짜 및 시간을 입력하여 객체를 생성

var date = dayjs("2021-10-10");
date.format(); // 2021-10-09 T00:00:00+09:00

var date = dayjs("2021.10.10", "YYYY.MM.DD");
date.format(); // 2021-10-09 T00:00:00+09:00

var date = dayjs("10/10/21", "MM/DD/YY");
date.format(); // 2021-10-09 T00:00:00+09:00

var date = dayjs("2021-10-10 10:30:25", "YYYY-MM-DD HH:mm:ss");
date.format(); // 2021-10-09 T10:30:25+09:00

포맷 지정 - format()

format() 함수를 사용하여 원하는 형태를 입력하고 원하는 형태의 문자열로 변경

var date = dayjs("2021-10-11 10:30:25", "YYYY-MM-DD HH:mm:ss");

date.format(); // 2021-10-11T10:30:25+09:00
date.format("YY-MM-DD"); // 21-10-11
date.format("DD/MM/YY"); // 11/10/21
date.format("YYYY.MM.DD HH:mm:ss"); // 2021.10.11 10:30:25

날짜 객체의 원하는 시간 단위 값 구하기 - get()

get() 함수를 사용하여 날짜 객체에서 원하는 시간 단위의 값 구함

var now = dayjs();

now.format(); // 2021-10-10T19:03:02+09:00

now.get("year"); // 2021 (년)
now.get("y"); // 2021 (년)

now.get("month"); // 9 (월 - 0~11)
now.get("M"); // 9 (월 - 0~11)

now.get("date"); // 10 (일)
now.get("D"); // 10 (일)

now.get("day"); // 0 (요일 - 일요일 : 0, 토요일 : 6)
now.get("d"); // 0 (요일 - 일요일 : 0, 토요일 : 6)

now.get("hour"); // 19 (시)
now.get("h"); // 19 (시)

now.get("minute"); // 3 (분)
now.get("m"); // 3 (분)

now.get("second"); // 2 (초)
now.get("s"); // 2 (초)

now.get("millisecond"); // 179 (밀리초)
now.get("ms"); // 179 (밀리초)

날짜 및 시간 차이 구하기 - diff()

diff() 함수를 사용하여 두 날짜의 차이를 구할 수 있음

diff() 함수를 사용할 때 3번째 인수로 true 를 입력해주면 소수점까지 볼 수 있음

const date1 = dayjs("2021-10-11 10:30:25.495", "YYYY-MM-DD HH:mm:ss.SSS");
const date2 = dayjs("2020-04-08 13:25:30.000", "YYYY-MM-DD HH:mm:ss.SSS");

date1.format("YYYY-MM-DD HH:mm:ss.SSS"); // 2021-10-11 10:30:25.495
date2.format("YYYY-MM-DD HH:mm:ss.SSS"); // 2020-04-08 13:25:30.000

date1.diff(date2); // 47595895495

date1.diff(date2, "year"); // 1
date1.diff(date2, "y"); // 1
date1.diff(date2, "y", true); // 1.5077376883898348

date1.diff(date2, "month"); // 18
date1.diff(date2, "M"); // 18
date1.diff(date2, "M", true); // 18.09285226067802

date1.diff(date2, "week"); // 78
date1.diff(date2, "w"); // 78
date1.diff(date2, "w", true); // 78.69691715443122

date1.diff(date2, "day"); // 550
date1.diff(date2, "d"); // 550
date1.diff(date2, "d", true); // 550.8784200810185

date1.diff(date2, "hour"); // 13221
date1.diff(date2, "h"); // 13221
date1.diff(date2, "h", true); // 13221.082081944445

date1.diff(date2, "minute"); // 793264
date1.diff(date2, "m"); // 793264
date1.diff(date2, "m", true); // 793264.9249166667

date1.diff(date2, "second"); // 47595895
date1.diff(date2, "s"); // 47595895
date1.diff(date2, "s", true); // 47595895.495

date1.diff(date2, "millisecond"); // 47595895495
date1.diff(date2, "ms"); // 47595895495
date1.diff(date2, "ms", true); // 47595895495```

이외의 더 다양한 함수들이 많지만, 프로젝트에 직접 적용한 함수들만 정리합니다.

공식문서 https://jsikim1.tistory.com/196
참고한 문서 https://jsikim1.tistory.com/196