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와 사용 방법이 유사하여 기존의 Moment.js 를 쓰던 개발자 분들에게도 접근성이 아주 좋습니다.

 

새로운 라이브러리를 도입할 때, 추가로 공부해야 할 양이 얼마나 많은지도 중요하게 고민하는 요소 중 하나인데

Day.js의 경우 공식 문서에 이미 이렇게 언급하고 있습니다.

If you use Moment.js, you already know how to use Day.js.

 

설치 및 사용법

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'

 

현재 날짜 가져오기

import React from 'react';
import dayjs from 'dayjs';

const CurrentDate = () => {
  // 현재 날짜를 가져오기
  const currentDate = dayjs().format('YYYY-MM-DD'); // 2024-07-26

  return (
    <div>
      <h1>현재 날짜: {currentDate}</h1>
    </div>
  );
};

export default CurrentDate;

 

특정 날짜도 가져올 수 있습니다.

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일

 

또한 날짜를 더하거나 뺄 수 도 있습니다.

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')) // '목요일'

const currentDate = dayjs().format('YYYY년 MMMM D일 dddd'); // 예: 2024년 7월 26일 금요일

 

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일"