JavaScript 날짜 쉽게 다루기

2023/08/01 카테고리 Daily

자바스크립트에서 날짜는 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한테 물어볼 수도 없고 ..ㅎㅎ

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

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

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메서드만 알아보자.

// 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초가 나온다.

댓글 공유

JavaScript 날짜 쉽게 다루기

date-fns

loco9939