Nuxt 3 에서 더이상 Moment.js 말고 Day.js 사용하자

지금까지 Nuxt 2를 사용하면서 날짜시간을 처리하기 위해 Moment.js를 사용하였다. 하지만 Nuxt 3로 프로젝트를 시작하면서 Nuxt3에서 Moment를 통합가능한 모듈을 찾을 수가 없었고, 대안으로 Day.js를 찾게 되었다. 이에 관련해서 자세한 내용을 정리하였다.

 

 

 

Moment.js 개발 종료

 

충격적이게도 Moment.js가 legacy project 상태로 바뀌었다. 아니 이미 3년전 버전인 2.29.0부터 legacy project 였었다. 그동안 이 사실을 모르고 @nuxtjs/moment 라는 Nuxt 2에서 간단하게 moment를 통합할 수 있는 모듈이 있어서 당연한 듯이 사용했었다.

 

Nuxt 3로 프로젝트를 만들고 Moment.js 모듈을 Nuxt에 통합하기 위해 nuxt-moment 모듈을 열심히 찾다가 Moment.js가 현재 Maintenance mode로 돌입했다는 것을 알게 되었다. 다른 라이브러리를 사용하라고 친절히 안내까지 되어있다.

 

Moment Project Status

 

 

이게 언제부터 이렇게 바뀐건지 버전 히스토리를 보니까 2.29.0 버전부터 이미 Maintenance mode가 시작이 되었고 legacy 프로젝트가 되었다. 무려 3년전 부터였다. 이후로도 2.29.4 버전까지 버전업은 되었으나 크게 바뀐건 없는 것 같다.

 

Moment Version History

 

 

 

@nuxtjs/moment 

그동안 Nuxt2 프로젝트에 통합해서 사용해오던 @nuxtjs/moment 모듈도 3년 전을 마지막으로 버전업이 없다. 

@nuxtjs/moment Version History

 

그래서 @nuxtjs/moment를 Nuxt 3 에서 적용할 수 있는 가이드도 없고 구글링을 해봐도 Nuxt3 통합에 대한 명확한 답이 없다.

 

---

 

여기까지 알고나니 그동안 날짜/시간 라이브러리는 Moment.js 라고 거의 고정관념처럼 사용해 왔어가지고 갑자기 멘탈이 흔들렸다.

 

 

그럼 Nuxt 3에서 날짜/시간 관련 라이브러리를 뭘 써야되지?

 

 

 

해답은 Moment.js 사이트의 Project Status 문서에 나와있다. 문서 내용을 간단히 정리하면 아래와 같다.

 

 

---

Moment Project Status

 

이유

아래와 같은 이유로 Moment 개발팀은 라이브러리를 유지보수 모드로 변경하고 새로운 기능 개발을 중단하였다.

 

◆ 디자인 변경이 어려움

2011년에 개발되었고 현재까지도 일주일에 1,200만 다운로드라는 엄청난 사용량을 가지고 있다. 그래서 API 디자인 변경이 어렵다.

Moment 객체는 mutable 이지만 immutable 로 변경하고 싶어도 그렇게 되면 완전히 다른 라이브러리가 되기 때문에 변경이 쉽지 않다.

 

 

◆ Size

일단 Moment 라이브러리의 크기가 크다라는 문제가 있다. tree shaking 에 대한 동작도 잘 이루어지지 않는다. 

그리고 만약 Time zone과 internationalization 기능까지 필요하다고 하면 라이브러리 사이즈가 굉장히 커진다. 하지만 최근 모던웹 브라우저에서 Time zone과 internationalization 기능을 Intl 객체를 통해 지원한다. 그래서 Luxon 같은 라이브러리에서는 내부적으로 Intl 객체를 이용하여 라이브러리 크기를 대폭 줄일 수 있다.

 

Chrome Dev Tools에서 Size 때문에 Moment 교체를 권장한다.

 

 

 

Recommendations

Moment 대신 아래의 라이브러리를 추천한다.

이름	특징
Luxon	- Locales: Intl - Time Zones: Intl
Day.js	- Locales: Custom data files that can be invidually imported - Time Zones: Intl provied, via a plugin
date-fns	- Locales: Custom data files that can be invidually imported - Time Zones: Intl provided, via a seperate companion library
js-Joda	- Locales: Custom data files via add-on module - Time Zones: Custom data files via add-on module

 

---

 

Day.js

 

위의 4가지 라이브러리 중에서 Nuxt 커뮤니티에서 지원하고 Nuxt 3.x 버전에서 사용가능한 모듈이 있는 것은 Day.js 밖에 없다.

그래서 Nuxt 3 프로젝트에 Day.js를 사용하기로 하였다.

 

Nuxt 커뮤니티 지원 모듈은 아래 사이트에서 확인 가능하다.

https://nuxt.com/modules

Modules · Nuxt

 

dayjs-nuxt

dayjs-nuxt 를 설치해서 사용하면 된다.

 

설치

$ npm i dayjs-nuxt

 

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'dayjs-nuxt'
  ]
})

 

API

Day.js API 는 공식 문서를 확인하고 사용하자. Moment와 API 형태가 거의 동일하다. 단지 moment는 mutable 객체 였다면, Day.js는 immutable 객체이다. 즉, 모든 API가 객체의 값을 바꾸는 것이 아닌, 값이 변경된 새로운 인스턴스를 리턴한다.

 

 

https://day.js.org/

Day.js · 2kB JavaScript date utility library

 

 

---