[Java Script] Date-fns와 Moment js중에 무엇을 쓸까?

Moment와 date-fns 중에서 무엇을 사용할까하며 찾아본 자료

https://blog.bitsrc.io/date-fns-vs-momentjs-9833f7463751

Date-fns vs MomentJS: Choosing the Right Date Utility Library

이 블로그를 번역한 글입니다.

 

---

Moment.js는 자바스크립트에서 날짜 라이브러리로 가장 많이 사용된 라이브러리이다.

하지만 몇년 전부터 이것을 대체할 만한 새로운 라이브러리가 나타났다.

이것은 바로 data-fns이다. 

 

Date-fns가 뭐야?

자바스크립트에서 날짜를 핸들링하는 것은 쉽지 않은 일이다.

MomentJS를 사용하더라도 Moment 객체를 생성하고 해당 객체에 대한 메소드를 사용해야 한다.

date-fns는 다양한 함수를 제공해서 자바스크립트 데이터를 단순화 한다. 

200개가 넘는 함수들을 제공하고 , momentjs와 다르게 필요한 것만 import 해서 사용할 수 있다. 

 

 

예를들어서 format 메소드가 필요하면 그것만 뽑아서 사용하면 된다.

import { format } from 'date-fns';

 

 

 

[1. Funtion per file]

위에서 말한 듯이 date-fns는 필요한 함수만 따로 빼서 사용할 수 있다. 

import { formatDistance, subDays } from ‘date-fns’ 
formatDistance(subDays(new Date(), 3), new Date())

 

하지만 moment를 쓰면 처음에 다 import를 하고 와야한다. 

그래서 date-fns를 쓰면 import 를 더욱 쉽게 해줄 뿐만 아니라 어플리케이션의 패키지 사이즈를 줄여준다. 

 

 

 

[2. Date-fns are immutable]

momentjs에서 어려운 것 중에 하나는 변경가능 하다는 것이다. 

때때로 moment js 날짜 객체가 자체 상태를 변경하기 때문에 날짜 값이 예기치 않게 변경될 수 있다. 

Date-fns는 우리가 실행하는 각 함수에서 새로운 JavaScript 날짜 개체 인스턴스를 제공하여 이 문제를 해결하며, 

이는 원치 않는 수정을 방지하는 데 확실히 도움이 될 수 있다. 

 

 

[3. Supports more than 50 locales]

date-fns는 글로벌 서비스를 하려는데에 적합하다.

50개가 넘는 locale을 제공하고 쉽게 언어를 import하여 사용할 수 있다.

import { formatDistance } from ‘date-fns’
import { es }from 'date-fns/locale'
const result = formatDistance(   
   new Date(2020, 8, 1),   
   new Date(2021, 8, 1),   
   {locale: es} 
)

 

[4. It is Fast and Compact]

퍼포먼스를 고려하고 있다면 , moment는 복잡한 api와 패키지 사이즈 때문에 중요한 퍼포먼스 이슈가 있기 때문에 적합하지 않다. 

모멘트는 232kb인 반면 date-fns는 300byte 밖에 안된다.

 

 

 

[5. Other Features]

- 타입스크립트 지원

- 항상 같은 타임존의 날짜를 리턴함

- 코드가 클린하고 안전하다

- 독스가 잘되어있다. docs

 

 

 

 

결론

이번에는 왜 moment 대신에 date-fns를 사용해야하는지 말해보았다.

moment가 오랫동안 사람들이 사용해왔고, 좋은 기능이 있다는 것은 맞지만 

현대의 새로운 요구사항들을 충족하기에는 무리가 있었다. 

 

date-fns에는 moment의 기능이 모두 들어있으면서 빠르고 사이즈가 작기까지 하니까

date-fns를 사용하는 것을 추천한다. 

 

 

 

 

 

 

 

 

 

 

 

https://blog.bitsrc.io/date-fns-vs-momentjs-9833f7463751