시간 계산에 유용한 Moment.js 사용법

프로젝트를 만들다 보면, 시건을 계산해야하는 경우가 발생한다.

이럴때 사용하면 정말 유용한 라이브러리가 바로 Moment.js이다.

1. install방법(npm)

npm install moment --save

2. 한국어 사용 방법

Moment.js는 한국어를 지원하는 라이브러리이다.

쓰면 바로 한국어가 나오는건 아니고, 기초 설정을 해줘야 한다.

import moment from "moment";
import "moment/locale/ko";

이런식으로 "moment/locale/ko"를 콤포넌트에 import하면 기본 언어가 한국어로 바뀐다.

3. 한국 시간 사용법

Moment.js를 그냥 바로 사용하면 Moment.js기준 시간으로 나온다,

즉 한국시간 기준으로 사용하고 싶다면, 똑같이 기초설정을 해줘야 한다.

import moment from "moment";
import "moment/locale/ko";
import "moment-timezone";

// 한국 시간대 설정
const koreanTime = moment.tz("Asia/Seoul");

console.log(koreanTime.format("YYYY년 MM월 DD일 HH시 mm분 ss초"));
// "2024년 12월 13일 14시 30분 00초"

4. format() - 형식 지정자

Moment.js는 날짜와 시간을 지정된 형식의 문자열로 변환할 수 있다.

이를 가능하게 하는방법은, "moment().format(...)" 즉 format( )함수를 사용하면 된다.

예:

moment().format(YYYY) -> 4자리 연도 -> 결과: 2024
moment().format(YY) -> 2자리 연도 -> 결과: 24
moment().format(MM) -> 2자리 월 (01~12) -> 결과: 13
moment().format(DD) -> 2자리 일 (01~31) -> 결과: 2024
moment().format(ddd) -> 3자리 요일 축약형 (Mon, Tue 등) -> 결과: Thu
moment().format(dddd) -> 전체 요일 (Monday, Tuesday 등) -> 결과: Thursday
moment().format(HH) -> 24시간제 시간 (00~23) -> 결과: 14
moment().format(hh) -> 12시간제 시간 (01~12) -> 결과: 02
moment().format(mm) -> 분 (00~59) -> 결과: 30
moment().format(ss) -> 초 (00~59) -> 결과: 00
moment().format(A) -> 오전/오후 (AM/PM) -> 결과: PM

사용:

const formattedDate = moment().format("YYYY-MM-DD"); //"2024-12-13"

const formattedDateTime = moment().format("YYYY년 MM월 DD일 HH시 mm분 ss초"); // "2024년 12월 13일 14시 30분 00초"

기본 기능 뿐만 아니라, format( )을 사용해서 바로 사용자 로컬 시간을 불러올 수도 있다.

예:

moment().format('LT');   // 오후 4:15
moment().format('LTS');  // 오후 4:15:09
moment().format('L');    // 2024.12.13.
moment().format('LL');   // 2024년 12월 13일
moment().format('LLL');  // 2024년 12월 13일 오후 4:15
moment().format('LLLL'); // 2024년 12월 13일 금요일 오후 4:15

5. isAfter( ) - 비교 함수

Moment.js에서는 어느 날짜와 또 다른 날짜를 비교해서, 비교되는 날짜보다 이후인지 확인할 수 있다.

방법은 바로 isAfter( )를 사용하는 것이다.

사용:

console.log(moment('2024-12-13').isAfter(moment('2024-12-14'))); //false
console.log(moment('2024-12-14').isAfter(moment('2024-12-13'))); //true

이렇게 사용할 수 있을 뿐만 아니라, 특정 단위(연도, 월, 일, 시간, 분, 초 단위)를 지정해서 비교도 가능 하다.

단위는 "year, month, day, hour, minute, second"으로 설정 할 수 있다.

사용:

console.log(2025-12-14.isAfter(2024-12-14, 'year')); // true

6. isBefore( ) - 비교 함수

isBefore( )는 isAfter( )와 반대로 비교되는 날짜보다 이전인지 확인할 수 있다.

사용:

console.log(moment('2024-12-13').isBefore(moment('2024-12-14'))); //true
console.log(moment('2024-12-14').isBefore(moment('2024-12-13'))); //false

7. diff( ) - 날짜 차이를 구하는 함수

사용방법:

moment(시간1).diff(moment(시간2), 비교단위, 정밀 여부);
(1)비교단위: 'years': 년, 'months': 월, 'days': 일, 'hours': 시간, 'minutes': 분, 'seconds': 초, 'milliseconds': 밀리초
(2)정밀 여부: 기본값: false. true로 설정하면 정밀한 차이 (소수점 포함)로 반환함.

예:

const date1 = moment('2024-12-13');
const date2 = moment('2024-12-14');

const diffInDays = date2.diff(date1, 'days');
console.log(diffInDays); //1