Moment.js를 Day.js로 대체하기

2019-03-31

JavaScript에서 날짜/시간을 표현할 때 Date 객체를 사용하여 표현하거나 moment.js, date-fns등의 라이브러리를 사용해서 표현할 수 있습니다.

Date 객체를 사용해서 표현하면 작성할 코드의 양도 많아지고 ‘YYYY년 MM월 DD일’과 같은 형식으로 날짜를 표현하려면 직접 함수를 만들어 처리 해야 하기 때문에 보통 moment.js 라이브러리를 많이 사용합니다.

moment.js를 사용하면 편리하지만, 단점으로는 moment.js의 용량이 무겁습니다 2.24.0버전 기준 235.4KB(gzipped: 66.3KB)으로 react-dom의 약 2.3배 vue의 약 3.6배만큼 큽니다.

그렇기 때문에 moment.js의 API 형식은 유지하면서 용량을 줄인 라이브러리들이 추후에 출시가 됐는데 그중에 이 글에서 다룰 라이브러리는 day.js입니다.

Day.js란?

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

Day.js의 용량은 7.1KB(gzipped: 2.9KB)이기 때문에 moment.js보다 약 33배 더 가벼우며 moment.js와 API 형식이 매우 유사하여 기존에 moment.js를 사용해보셨다면 쉽게 사용하실 수 있습니다.

또한 Day.js는 모든 브라우저를 지원하며 ie는 9 이상부터 지원됩니다.

사용하실 때 유의하실 점은 day.js는 moment.js와 달리 변경 불가능(immutable)하기 때문에 이미 변수에 할당된 day.js객체의 날짜를 add, subtract와 같은 메소드를 사용해서 변경할 시 다시 변수에 할당해줘야 합니다.

import moment from 'moment'
import dayjs from 'dayjs'

// moment
const momentDate = moment('2019-03-01') // 2019-03-01일자 moment 객체 할당
momentDate.add(1, 'day') // 1일 추가
console.log(momentDate.format('YYYY-MM-DD')) // '2019-03-02'

// dayjs
let dayjsDate = dayjs('2019-03-01') // 2019-03-01일자 dayjs 객체 할당
dayjsDate.add(1, 'day') // 1일 추가(반영 X)
console.log(dayjsDate.format('YYYY-MM-DD')) // '2019-03-02'가 아닌 '2019-03-01'가 출력됨
dayjsDate = dayjsDate.add(1, 'day') // 1일 추가
console.log(dayjsDate.format('YYYY-MM-DD')) // '2019-03-02'

변수에 할당된 moment.js객체에서 add메소드를 사용하여 1일을 더할 경우 add메소드를 호출한 moment.js객체의 날짜가 변경되지만 day.js객체 에서 add메소드를 사용하여 1일을 더할 경우 add메소드를 호출한 day.js객체의 날짜를 변경하지 않고 날짜가 변경된 day.js객체를 반환합니다.

날짜 표시

import dayjs from 'dayjs'

const date = dayjs('2019-03-01T18:00:00+09:00')
console.log(date.year()) // 2019 (연도)
console.log(date.month()) // 2 (월)
console.log(date.date()) // 1 (일)
console.log(date.hour()) // 18 (시)
console.log(date.minute()) // 0 (분)
console.log(date.second()) // 0 (초)
console.log(date.format('YYYY년 MM월 DD일 HH시 mm분')) // '2019년 03일 01일 18시 00분'

API는 moment.js와 동일합니다.

format 메소드에서 사용할 수 있는 더 많은 포맷들은 링크를 참고해주세요.

날짜 변경

import dayjs from 'dayjs'

let date = dayjs('2019-03-01T18:00:00+09:00')
date = date
  .set('year', 2020) // 연도를 2020으로 변경
  .set('month', 10) // 월을 11월로 변경
  .set('date', 11) // 일을 11일로 변경
console.log(date.format('YYYY년 MM월 DD일')) // '2020년 11일 11일'
date = date
  .subtract(1, 'year') // 연도 1년 빼기
  .add(1, 'month') // 월 1개월 더하기
  .add(1, 'date') // 일 1일 더하기
console.log(date.format('YYYY년 MM월 DD일')) // '2019년 12일 12일'

set메소드를 사용해서 날짜를 변경할 수 있고 add, subtract메소드를 사용해서 기존 날짜를 더하거나 뺄 수 있습니다. set 메소드의 첫 번째 인자로 넣을 수 있는 더 많은 unit들은 링크를 참고해주세요.

I18n

dayjs 또한 i18n을 지원합니다. 현재 약 100여 개의 언어를 지원하며 지원하는 locale 목록은 링크를 참고해주세요.

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

dayjs.locale('ko') // global로 한국어 locale 사용
const date = dayjs('2019-03-01')
console.log(date.format('ddd')) // '금요일'
const date2 = dayjs('2019-03-01').locale('en') // 해당 인스턴스에서만 영어 locale사용
console.log(date2.format('ddd')) // 'Fri'

이렇게 day.js에 대해 간단하게 알아봤습니다. 거의 대부분의 API가 moment.js와 동일하기때문에 moment.js를 사용해보셨다면 쉽게 day.js도 사용하실 수 있으실 겁니다 day.js에 대한 더 자세한 내용은 dayjs 공식문서를 참고해주세요.

Reference

comment

Comments