JavaScript/라이브러리

[JavaScript]Moment.js 사용 방법

DevStory 2021. 12. 16.

Moment.js란?

Moment.js는 JavaScript에서 날짜 및 시간을 조작하고 작업하는데 도움이 되는 JavaScript 라이브러리입니다. Moment.js는 JavaScript에서 날짜 및 시간과 관련된 라이브러리 중에서 가장 오래되었지만, 현재 다음 두 가지 이유로 개발이 중단되었습니다.

Moment.js의 용량 문제
너무 오래되어 신규 기능 추가가 어려움

Moment.js 개발자 중 한 명은 Moment.js의 단점을 극복하기 위해 Luxon.js라는 라이브러를 만들었으며, 날짜 및 시간을 조작하는 라이브러리는 Luxon.js 외에도 Day.js, date-fns.js 등 여러 가지가 존재합니다.

Moment.js의 단점을 극복하기 위해 다른 라이브러리 사용을 권장하지만, Moment.js는 날짜 및 시간 관련 라이브러리 중 가장 오래되었고 자료가 많기 때문에 지금도 많이 사용하는 라이브러리입니다.

이번 포스팅에서는 Moment.js를 유용하게 사용하는 방법을 소개합니다.

날짜 Format
moment 객체에 날짜 또는 시간 빼기
moment 객체에 날짜 또는 시간 더하기
이전 날짜인지 이후 날짜인지 체크
두 날짜가 동일한지 체크
해당 월의 일수를 구하는 경우
moment 객체의 시작 시간 또는 시작 날짜
moment 객체의 마지막 시간 또는 마지막 날짜
moment 객체의 년, 월, 일, 시, 분, 초 가져오기
시간 또는 날짜 차이를 계산

날짜 Format

2021-12-16(목) 기준입니다.

moment().format('DD/MMM/YY');  // 16/Dec/21
moment().format('DD/MM/YY');   // 16/12/21
moment().format('MM-DD-YYYY'); // 12-15-2021
moment().format('YYYY-MM-DD'); // 2021-12-16
moment().format('M');   // 12
moment().format('DDD'); // 350
moment().format('YYYY-MM-DD hh:mm:ss'); // 2021-12-16 11:28:04

moment 객체에 날짜 또는 시간 빼기

moment 객체의 substract() 함수를 사용합니다.

moment().subtract(1, 'second').format('YYYY-MM-DD hh:mm:ss');
moment().subtract(1, 'minute').format('YYYY-MM-DD hh:mm:ss');
moment().subtract(1, 'hour').format('YYYY-MM-DD hh:mm:ss');
moment().subtract(1, 'day').format('YYYY-MM-DD');
moment().subtract(1, 'month').format('YYYY-MM-DD');
moment().subtract(1, 'year').format('YYYY-MM-DD');

첫 번째 인수

moment 객체에 뺄 값을 입력합니다.

두 번째 인수

몇 초 전

's', 'second', 'seconds' 중 하나를 입력합니다.

몇 분 전

'm', 'minute', 'minutes' 중 하나를 입력합니다.

몇 시간 전

'h', 'hour', 'hours' 중 하나를 입력합니다.

며칠 전

'd', 'day', 'days' 중 하나를 입력합니다.

몇 월 전

'month' 또는 'months'를 입력합니다.

☞ 'm'은 분(minute)의 약자입니다.

몇 년 전

'y', 'year', 'years' 중 하나를 입력합니다.

moment 객체에 날짜 또는 시간 더하기

moment 객체의 add() 함수를 사용합니다.

add() 함수의 두 번째 인수는 substract() 함수와 동일합니다.

moment().add(1, 'second').format('YYYY-MM-DD hh:mm:ss');
moment().add(1, 'minute').format('YYYY-MM-DD hh:mm:ss');
moment().add(1, 'hour').format('YYYY-MM-DD hh:mm:ss');
moment().add(1, 'day').format('YYYY-MM-DD');
moment().add(1, 'month').format('YYYY-MM-DD');
moment().add(1, 'year').format('YYYY-MM-DD');

이전 날짜인지 이후 날짜인지 체크

isAfter() 함수를 사용하여 moment 객체의 날짜가 특정 날짜 이후인지 체크하며, 시간도 체크할 수 있습니다.

moment('2021-01-15').isAfter('2021-01-01'); // true
moment('2021-01-15').isAfter('2021-01-31'); // false
moment('2021-01-15 12:00:00').isAfter('2021-01-15 12:00:01'); // false

isBefore() 함수를 사용하여 moment 객체의 날자가 특정 날짜 이전인지 체크하며, 시간도 체크할 수 있습니다.

moment('2021-01-15').isBefore('2021-01-01'); // false
moment('2021-01-15').isBefore('2021-01-31'); // true
moment('2021-01-15 12:00:00').isBefore('2021-01-15 12:00:01'); // true

두 날짜가 동일한지 체크

isSame() 함수를 사용하여 두 날짜가 동일한지 체크할 수 있습니다.

moment('2021-01-15').isSame('2021-01-01'); // false
moment('2021-01-15').isSame('2021-01-31'); // false
moment('2021-01-15 12:00:00').isSame('2021-01-15 12:00:01'); // false

moment('2021-01-15').isSame('2021-01-15'); // true
moment('2021-01-15 00:00:00').isSame('2021-01-15'); // true
moment('2021-01-15 12:00:00').isSame('2021-01-15 12:00:00'); // true

해당 월의 일수를 구하는 경우

해당 월의 일수를 구하는 경우 daysInMonth() 함수를 사용합니다.

moment('2021-01').daysInMonth();    // 31
moment('2021-01-15').daysInMonth(); // 31
moment('2021-02-15 12:00:00').daysInMonth(); // 28
moment('2020-02-15 12:00:00').daysInMonth(); // 29

2020년 2월은 윤년이므로 일수는 29입니다.

moment 객체의 시작 시간 또는 시작 날짜

startOf() 함수는 moment 객체의 시작 시간 또는 날짜를 반환합니다.

moment('2021-02-05 06:20:50').startOf('year').format('YYYY-MM-DD hh:mm:ss');
// 2021-01-01 12:00:00 

moment('2021-02-05 06:20:50').startOf('month').format('YYYY-MM-DD hh:mm:ss');
// 2021-02-01 12:00:00

moment('2021-02-05 06:20:50').startOf('day').format('YYYY-MM-DD hh:mm:ss');
// 2021-02-05 12:00:00

moment('2021-02-05 06:20:50').startOf('hour').format('YYYY-MM-DD hh:mm:ss');
// 2021-02-05 06:00:00

moment('2021-02-05 06:20:50').startOf('minute').format('YYYY-MM-DD hh:mm:ss');
// 2021-02-05 06:20:00

moment('2021-02-05 06:20:50').startOf('second').format('YYYY-MM-DD hh:mm:ss');
// 2021-02-05 06:20:50

moment 객체의 마지막 시간 또는 마지막 날짜

endOf() 함수는 moment 객체의 마지막 시간 또는 날짜를 반환합니다.

moment('2021-02-05 06:20:50').endOf('year').format('YYYY-MM-DD hh:mm:ss');
// 2021-12-31 11:59:59

moment('2021-02-05 06:20:50').endOf('month').format('YYYY-MM-DD hh:mm:ss');
// 2021-02-28 11:59:59

moment('2021-02-05 06:20:50').endOf('day').format('YYYY-MM-DD hh:mm:ss');
// 2021-02-05 11:59:59

moment('2021-02-05 06:20:50').endOf('hour').format('YYYY-MM-DD hh:mm:ss');
// 2021-02-05 06:59:59

moment('2021-02-05 06:20:50').endOf('minute').format('YYYY-MM-DD hh:mm:ss');
// 2021-02-05 06:20:59

moment('2021-02-05 06:20:50').endOf('second').format('YYYY-MM-DD hh:mm:ss');
// 2021-02-05 06:20:50

moment 객체의 년, 월, 일, 시, 분, 초 가져오기

년도는 year() 또는 years() 함수를 사용합니다.

moment('2021-02-05 06:20:50').year();  // 2021
moment('2021-02-05 06:20:50').years(); // 2021

월은 month() 또는 months() 함수를 사용합니다. JavaScript에서 월은 0부터 시작이므로 + 1을 해주어야 합니다.

moment('2021-02-05 06:20:50').month() + 1;  // 2
moment('2021-02-05 06:20:50').months() + 1; // 2

일은 day() 또는 days() 함수를 사용합니다.

moment('2021-02-05 06:20:50').day();  // 5
moment('2021-02-05 06:20:50').days(); // 5

시간은 hour() 또는 hours() 함수를 사용합니다.

moment('2021-02-05 06:20:50').hour();  // 6
moment('2021-02-05 06:20:50').hours(); // 6

분은 minute() 또는 minutes() 함수를 사용합니다.

moment('2021-02-05 06:20:50').minute();  // 20
moment('2021-02-05 06:20:50').minutes(); // 20

초는 second() 또는 seconds() 함수를 사용합니다.

moment('2021-02-05 06:20:50').second();  // 50
moment('2021-02-05 06:20:50').seconds(); // 50

시간 또는 날짜 차이를 계산

diff() 함수를 사용하여 시간 또는 날짜 차이를 구할 수 있습니다.

※ 계산식이 어떻게 되는지 모르겠는데, diff() 함수는 문제가 많습니다. 사용하지 않는 것을 권유합니다.

moment('2021-02-10').diff('2021-02-05', 'day'); // 5

첫 번째 인수

moment 객체와 비교할 날짜를 입력합니다.