날짜 편리하게 계산하기(feat. dayjs)

 💡 자바스크립트를 이용하여, 직접 날짜와 시간을 계산하는 코드를 짤 수도 있지만 보다 편리하게 dayjs를 이용하여 날짜에 대한 처리를 하는 방법에 대해 정리해보자.

 

---

 

WHY dayjs?

사실, Moment.js라는 날짜와 관련된 유명한 라이브러리가 있음에도 왜 요즘 다들 dayjs를 쓰는 걸까?

1. moment.js의 API형식은 그대로유지
2. 용량은 33배 가볍다

즉, 성능은 거의 차이가 나지 않지만 훨씬 가볍다!

 

---

 

How to use

[설치]

1. npm i dayjs 명령어를 통해, 설치
2. import하기

참고링크: https://github.com/iamkun/dayjs/issues/475

//처음에는 아래와 같은 방식을 사용했지만, import가 되지 않았다.
//js파일에서는 정상적으로 import되었지만, ts파일에서는 작동하지 않는다는 것을 위 참고링크를 통해 확인 할 수 있다.
import dayjs from 'dayjs' // not worked in ts
const dayjs require('dayjs') // not worked in ts

//따라서, ts파일에서는 아래와 같이 import해온다.
import * as dayjs from 'dayjs'; 

 

---

 

[dayjs 사용법]

참고링크: https://jsikim1.tistory.com/196?category=899136

1. API 사용한 날짜 출력

...
const now = dayjs() //오늘 날짜가 객체 형태로 저장
const stringDate = now.format("YY-MM-DD") //2021-12-23 과 같은 모습으로 string타입 출력
...

 

---

 

2. dayjs 날짜 및 시간 더하기

...
const date = dayjs();

const after3day = date.add(3, "day"); //|| 'd'
const after3month = date.add(3, "month"); // || 'M'
const after3year = date.add(3, "year"); // || 'y'
const after3hour = date.add(3, "hour"); // || 'h'
const after3min = date.add(3, "minute"); // || 'm'
const after3sec = date.add(3, "second"); // || 's'
const after3mil = date.add(3, "millisecond"); // || 'ms'

// ** 더하는 숫자에 음수를 넣어, 빼기로도 사용할 수 있다. **

 

---

 

3. 날짜 및 시간 차이 구하기

const date1 = dayjs("2021-10-11 10:30:25.495", "YYYY-MM-DD HH:mm:ss.SSS");
const date2 = dayjs("2020-04-08 13:25:30.000", "YYYY-MM-DD HH:mm:ss.SSS");

date1.format("YYYY-MM-DD HH:mm:ss.SSS"); // 2021-10-11 10:30:25.495
date2.format("YYYY-MM-DD HH:mm:ss.SSS"); // 2020-04-08 13:25:30.000

date1.diff(date2); // 47595895495

date1.diff(date2, "year"); // 1
date1.diff(date2, "y"); // 1
date1.diff(date2, "y", true); // 1.5077376883898348

date1.diff(date2, "month"); // 18
date1.diff(date2, "M"); // 18
date1.diff(date2, "M", true); // 18.09285226067802

date1.diff(date2, "week"); // 78
date1.diff(date2, "w"); // 78
date1.diff(date2, "w", true); // 78.69691715443122

date1.diff(date2, "day"); // 550
date1.diff(date2, "d"); // 550
date1.diff(date2, "d", true); // 550.8784200810185

date1.diff(date2, "hour"); // 13221
date1.diff(date2, "h"); // 13221
date1.diff(date2, "h", true); // 13221.082081944445

date1.diff(date2, "minute"); // 793264
date1.diff(date2, "m"); // 793264
date1.diff(date2, "m", true); // 793264.9249166667

date1.diff(date2, "second"); // 47595895
date1.diff(date2, "s"); // 47595895
date1.diff(date2, "s", true); // 47595895.495

date1.diff(date2, "millisecond"); // 47595895495
date1.diff(date2, "ms"); // 47595895495
date1.diff(date2, "ms", true); // 47595895495