Why Day.js??

항상 Moment.js 를 사용하다가 Day.js 를 사용해야지 라는 소리가 들려서 정리해 보았습니다.

Moment.js 의 단점들 😈😈
Moment.js의 용량은 2.24.0버전 기준으로 235.4KB로, react-dom의 약 2.3배, vue의 3.6배만큼 크기 때문에 번들에서 Moment.js가 30%를 차지하지만 실제로 사용되는 부분도 30% 정도밖에 되지 않는 극단적인 예시 상황이 발생하기도 합니다.
그리고 Moment.js 공식문서에서도 이 라이브러리를 레거시하다고 정의하고,
더 이상의 신규 개발 없이 유지보수만 하는 상태로 전환하며 앞으로의 계획을 다음과 같이 밝혔습니다. 새로운 성능이나 기능을 추가하지 않을 예정이라는 거죠.

Day.js

Moment.js와 호환되는 API를 가진 경량 라이브러리 입니다.

사이즈가 매우 작다.

Day.js에는 일반적으로 사용될 기본적인 기능들만 포함되어 있고 이외의 기능은 dayjs/plugin를 통해 확장하여 사용할 수 있다.
Day.js의 용량은 7.1KB(gzipped: 2.9KB)로, Moment.js보다 무려 33배 가량 더 가볍다.
실제로 자료들을 찾아본 결과 번들의 4% 정도만 차지할 정도로 용량 최적화에 유의미한 영향을 줌을 알 수 있었다.
Moment.js와 사용 방법이 유사하다.

새로운 라이브러리를 도입할 때, 추가로 공부해야 할 양이 얼마나 많은지도 중요하게 고민하는 요소 중 하나인데 Day.js의 경우 공식 문서에 이미 이렇게 언급하고 있다.
If you use Moment.js, you already know how to use Day.js.

즉 Moment.js 를 사용했던 개발자라면 Day.js 를 사용하기 엄청 쉽다는 이야기가 됩니다.

사용법

사용하기에 앞서 Day.js is immutable 입니다.

npm install dayjs

Moment.js와 달리 변경이 불가능(immutable)하기 때문에
이미 변수에 Day.js 객체의 날짜를 메소드로 변경할 경우 변수에 재할당해주어야 한다.

import dayjs from 'dayjs'

let dateWithDay = dayjs('2023-11-02');

dateWithDay.add(1, 'day') // 1일 추가
console.log(dateWithDay.format('YYYY-MM-DD')) // '2023-11-02' 그대로 출력

dateWithDay = dateWithDay.add(1, 'day') // 1일 추가 + 재할당
console.log(dateWithDay.format('YYYY-MM-DD')) // '2023-11-09'

특정 날짜 가져오기

const date = dayjs('2023-11-02T23:56:00+09:00')

console.log(date.year()) // 2023 (연도)
console.log(date.month()) // 11 (월)
console.log(date.date()) // 02 (일)
console.log(date.hour()) // 23 (시)
console.log(date.minute()) // 56 (분)
console.log(date.second()) // 0 (초)
console.log(date.format('YYYY.MM.DD (HH:mm)')) // '2023.11.02 (23:56)' 
console.log(date.format('YYYY년 MM월 DD일'))    // '2023년 11월 02일

set, add, subtract

날짜를 변경하거나 더하기, 빼줄 수 있습니다.

let date = dayjs('2023-11-02T23:56:00+09:00')
date = date
  .set('month', 12) // 12월로 달 변경
console.log(date.format('YYYY년 MM월 DD일')) // '2023년 12월 02일' 

let date = dayjs('2023-11-02T23:56:00+09:00')
date = date
  .add('day', 12) // 12일 더하기
console.log(date.format('YYYY년 MM월 DD일')) // '2023년 11월 14일' 

let date = dayjs('2023-11-02T23:56:00+09:00')
date = date
  .subtract('month', 6) // 6개월 빼기
console.log(date.format('YYYY년 MM월 DD일')) // '2023년 05월 02일' 

국제화

korea 에서 사용하는 웹 을 만들 생각이면 한국어로 바꾸어 주어야 하며 Day.js 는 이 기능을 지원해 줍니다.

import dayjs from 'dayjs'
import 'dayjs/locale/ko'

dayjs.locale('ko') // global로 한국어 locale 사용
const todayKor = dayjs('2023-11-02')
console.log(todayKor.format('ddd')) // '목요일'

duration

duration는 Day.js의 플러그인 중 하나입니다.
이 플러그인은 두 날짜 간의 시간 간격을 나타내는 Duration 객체를 생성하고 조작하는 데 사용됩니다.

import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);

// 함수 정의: 두 날짜 간의 차이를 계산하고 포맷하는 예시
const getDateDiff = (startDate, endDate) => {
  const start = dayjs(startDate);
  const end = dayjs(endDate);

  // 두 날짜 간의 시간 간격 계산
  const diff = dayjs.duration(end.diff(start));

  // 간격을 포맷하여 출력
  const years = diff.years();
  const months = diff.months();
  const days = diff.days();

  return `${years}년 ${months}달 ${days}일`;
};

// 예시: 두 날짜 간의 차이 계산 및 출력
const startDate = '2022-01-01';
const endDate = '2024-04-18';
const diffString = getDateDiff(startDate, endDate);
console.log(diffString); // 출력 예시: "2년 3달 17일"