자바스크립트에서 날짜는 Date 객체로 다루곤 한다.

1
2
3
const date = new Date();

console.log(date); // Tue Aug 01 2023 22:32:45 GMT+0900 (Korean Standard Time)
  • 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타낸다.

Date 객체도 다양한 메서드를 제공하는데, 개발자가 이를 다루기에 직관적이지 못하여 다루기가 까다롭다.

매번 chatGPT한테 물어볼 수도 없고 ..ㅎㅎ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const date = today.getDate();
const day = today.getDay();
const month = today.getMonth();
const hours = today.getHours();
const minutes = today.getMinutes();
const ms = today.getMilliseconds();
const sec = today.getSeconds();

console.log(today); // Tue Aug 01 2023 22:32:45 GMT+0900 (Korean Standard Time)
console.log(date); // 1
console.log(day); // 2 (0~6) 일 ~ 토
console.log(month); // 7 (0~11)
console.log(hours); // 22
console.log(minutes); // 32
console.log(ms); // 122
console.log(sec); // 45
  • day를 숫자로 표현해주고 있으니 직관적이지 못하다. 우리나라는 월요일부터 시작으로 세는 사람이 많은데 일요일부터 시작하니…
  • month도 왜 0부터 시작하는 것인지.. ㅋㅋ

그래서 날짜를 좀 더 쉽게 다루기 위해 다양한 날짜 라이브러리가 나왔다.

오늘은 그 중 date-fns 라이브러리를 알아볼 것이다.

date-fns

1
npm install date-fns --save

설치는 다음 명령어로 설치하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { format, compareAsc } from "date-fns";

format(new Date(2014, 1, 11), "MM/dd/yyyy");
//=> '02/11/2014'

const dates = [
  new Date(1995, 6, 2),
  new Date(1987, 1, 11),
  new Date(1989, 6, 10),
];
dates.sort(compareAsc);
//=> [
//   Wed Feb 11 1987 00:00:00,
//   Mon Jul 10 1989 00:00:00,
//   Sun Jul 02 1995 00:00:00
// ]
  • format 메서드를 사용하여 날짜를 원하는 형식으로 바꿀 수 있다.

그 외에도 날짜를 서로 비교하여 우선순위를 매기거나 날짜를 더하고 뺄 수 있는 등 다양한 메서드를 사용하여 자유자재로 날짜를 다룰 수 있다.

예시로 날짜를 빼주는 메서드인 sub메서드만 알아보자.

1
2
3
4
5
6
7
8
9
10
11
// Subtract the following duration from 15 June 2017 15:29:20
const result = sub(new Date(2017, 5, 15, 15, 29, 20), {
  years: 2,
  months: 9,
  weeks: 1,
  days: 7,
  hours: 5,
  minutes: 9,
  seconds: 30,
});
//=> Mon Sep 1 2014 10:19:50
  • 2017년에서 2년을 뺀다.
  • 6월에서 9개월을 뺀다.
  • 15일에서 1주일(7일)을 뺀다
  • 나머지 8일에서 7일을 뺀다.
  • 15시간에서 5시간을 뺀다.
  • 29분에서 9분을 뺀다.
  • 20초에서 30초를 뺀다.

결과값은 2014년 9월 1일 월요일 10시 19분 50초가 나온다.