[해결]moment.js deprecated이슈로 인해 datetime 라이브러리 교체 (feat. day.js)

moment.js의 deprecated소식을 접하고 나서 이걸 이제야 알았다니 자존심이 상했다.

그렇지만 그럴 시간이 없어 빠르게 프로젝트가 완성되기 전 교체작업을 진행하려 한다.

 

원인

• 느린속도
• 무거운 용량
• 가변성
• 예측이 어려운 디버깅

여러 Datetime 라이브러리들과 비교해보았을때 크게는 3배까지 차이가 날정도로 느린경우도 발생한다.

용량 또한 2배~5배정도는 차이가 있는 것으로 보인다.

사실 가장 큰문제는 mutable이라는 점과 디버깅이 어렵다는 점이다.

  const now = moment();

  console.log('변경 전 now : ',now.toLocaleString());

  const targetDay = now.add(10, "day");

  console.log('변경 후 now : ',now.toLocaleString());
  console.log('변경 후 targetDay : ',targetDay.toLocaleString());

결과

이 처럼 now자체를 변경해버리는 상황.. 불변성을 지키지 못한다는 소리다.

 

  console.log(moment().format()); // 2023-08-29T10:14:50+09:00
  console.log(moment({}).format()); // 2023-08-29T10:14:50+09:00
  console.log(moment([]).format()); // 2023-08-29T10:14:50+09:00
  console.log(moment(0).format()); // 1970-01-01T09:00:00+09:00
  console.log(moment(undefined).format()); // 2023-08-29T10:14:50+09:00
  console.log(moment(null).format()); // Invalid date
  console.log(moment(NaN).format()); // Invalid date
  console.log(moment("").format()); // Invalid date

undefined 는 작동하지 않아야할 것 같지만 작동하고

그렇다고 null, NaN, "" 값은 작동하지 않는다.

 

이 문제들은 예측이 어려운 상황이 발생할 우려가 높고 단점이 많아 현재는 deprecated 된 상황이다.

 

대안

새로운 라이브러리

1. Date-fns
2. Luxon
3. day.js
4. js-joda

각 장단점을 살펴보고 사용성과 적합성 등 여러 조건을 정리해보자.

 

Date-fns

기존 JavaScript의 Date객체를 이용하며 포멧을 변경하거나 자주 사용하는 기능을 제공한다.

다만 개인적으로 느낀점은 사용성이 좋지 못하다.

코드를 작성하고 출력을 봤을때 왜 이런 결과를 도출해냈는가 유추하기 힘들다.

const formatDate = format(new Date(), "EEEEEE");
console.info(formatDate); // Tu

// ?? 왜 EEEEE가 Tu인거야?

 

Luxon

Immutable, Chainable, Unambiguous, parsing, formatting 등 여러가지 기능을 지원한다.

애초에 moment의 단점을 보완하고자 하는 라이브러리이며 비교적 최신라이브러리다.

 

day.js

2kb의 매우 작은 사이즈

moment.js와 유사한 사용성과 불변성을 지킬 수 있으며 사용성이 편리해보인다.

브라우저 간 호환성도 높고 사용자도 많아 신뢰하기 좋다.

console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')); // 2021-02-04 20:58:05

 

@js-joda/core

기존 js-joda 라이브러리가 있었지만, 현재는 deprecated 되었고 현재는 @js-joda/core로 대체되었다.

문제점을 파악하고 새로운 버전의 라이브러리를 선보일 수 있을만큼 꾸준히 업데이트 되고있다

용량은 moment보다 적지만 4가지 패키지를 상황별로 설치해야하는 경우도 있다.

 

패키지

 

결론

결국 프로젝트 특성상 ms -> date로 변형하거나 yyyy-mm-dd와같은 포멧팅을 많이 사용하기에

가볍고 사용성이 괜찮다고 판단되는 day.js를 사용하기로 했다.

https://www.npmjs.com/package/dayjs'

dayjs

 

먼저 기존 프로젝트의 moment사용파일들을 파악해 하나씩 고쳐나가보자.

moment 사용중인 파일 검색 결과

라이브러리 교체과정 #1

라이브러리 교체과정 #2

기존 moment.js와 문법이 비슷하면서 불변성을 가져갈 수 있는 dayjs로 라이브러리 교체가 완료되었다.

라이브러리를 선정할때 좀더 신중할 필요가 있는 것 같다.