본문 바로가기
기술 개발/React

날짜 라이브러리 비교(Day.js, Moment.js, date-fns, Luxon)

by 쪼짱 2023. 2. 10.
728x90
반응형
SMALL

Date 라이브러리 대표 4가지를 비교해보았다.

Day.js, Moment.js, date-fns, Luxon

npm trends

  Stars Issues Version Updated Created Size
date-fns
30,883 529 2.29.3 5 months ago 8 years ago 26.8 KB
dayjs
42,151 675 1.11.7 2 months ago 5 years ago 2.9 KB
luxon
13,539 127 3.2.1 a month ago 6 years ago 21.4 KB
moment
47,214 255 2.29.4 7 months ago 11 years ago 72.1 KB

 

1. Day.js

Day.js 특징

  • JavaScript 날짜 관련 라이브러리 중 가장 가벼운 라이브러리
  • moment.js 보다 약 33배 정도 가벼움 → moment.js 대체로 많이 사용됨
  • immutable 구조

day.js 사용 방법

  • dayjs() - 현재 날짜 및 시간 객체 생성
  • fornat() - 포맷 지정
  • get() - 날짜 객체의 원하는 시간 단위 값 구하기
  • set() - 날짜 객체의 원하는 시간 단위 값 변경
  • startOf() / endOf() - 날짜 객체에서 지정 시간 단위의 시작, 마지막으로 설정
  • add() - 날짜 및 시간 더하기
  • subtract() - 날짜 및 시간 빼기
  • diff() - 날짜 및 시간 차이 구하기
  • isSame() - 날짜가 지정한 시간 단위에서 특정 날짜와 일치하는지 구하기
  • isBefore() / isSameOrBefore() - 날짜가 지정한 시간 단위에서 특정 날짜보다 이전, 이전이거나 같은지 구하기
  • isAfter() / isSameOrAfter() - 날짜가 지정한 시간 단위에서 특정 날짜보다 이후, 이후이거나 같은지 구하기
  • isBetween() - 날짜가 지정한 시간 단위에서 특정 날짜들 사이에 있는지 구하기

 

2. Moment.js

Moment.js 특징

  • JavaScript에서 timezone, summerTime, Loop Year 처리 가능
  • 용량이 많이 무거움, immutable하지 않음 → Luxon 라이브러리를 만듦

Moment.js 사용방법

  • fornat() - 포맷 지정
  • new Date() - 날짜 및 시간 객체 생성
  • add() - 날짜 및 시간 더하기
  • subtract() - 날짜 및 시간 빼기
  • diff() - 날짜 및 시간 차이 구하기

 

3. Luxon

Luxon 특징

  • moment.js의 단점을 없애준 라이브러리
  • Moment 진화판같은 느낌
  • Locales: Intl 제공
  • Time Zones: Intl 제공

Luxon 사용 방법

  • get() - 날짜 객체의 원하는 시간 단위 값 구하기
  • set() - 날짜 객체의 원하는 시간 단위 값 변경
  • startOf() / endOf() - 날짜 객체에서 지정 시간 단위의 시작, 마지막으로 설정
  • add() - 날짜 및 시간 더하기
  • subtract() - 날짜 및 시간 빼기

 

4. date-fns

date-fns 특징

  • JavaScript 날짜 관련 라이브러리 중 Tree shaking을 지원
  • Functional Pattern으로 동작
  • immutable 구조
  • coverage가 넓음

date-fns 사용 방법

  • 시간 단위: Year, Month, Date, Day, Hours, Minutes, Seconds, Milliseconds
  • new Date() - 날짜 및 시간 객체 생성
  • format() - 포맷 지정
  • get시간단위() - 날짜 객체의 원하는 시간 단위 값 구하기
  • set() - 날짜 객체의 원하는 시간 단위 값 변경
  • add() - 날짜 및 시간 더하기
  • sub() - 날짜 및 시간 빼기
  • differenceIn시간단위() - 날짜 및 시간 차이 구하기

 


참고

https://day.js.org/

https://date-fns.org/

https://momentjs.com/

https://jamie95.tistory.com/187

https://moment.github.io/luxon/#/moment

 

728x90
반응형
LIST

'기술 개발 > React' 카테고리의 다른 글

React의 state와 props  (0) 2023.04.05
Data Fetching Library: React-Query, SWR  (0) 2023.01.31
컴포넌트 성능 최적화  (0) 2023.01.10
React hooks (useRef)  (0) 2023.01.08
React hooks (useCallback)  (0) 2023.01.08