JavaScript Moment.js 라이브러리

JavaScript Moment.js 라이브러리

 

Moment.js 라이브러리는 날짜와 시간에 관련된 데이터의 파싱, 검증, 조작 등을 위해 만들어진 유용한 라이브러리입니다. 이전에 Date 객체를 이용하여 날짜와 시간에 관련된 연산을 할 때는 별도의 공통 함수를 만들어 사용해야 했지만, Moment.js를 사용하면 내장된 함수를 이용하여 간단하게 처리할 수 있습니다. 

 

https://momentjs.com/docs/

 

 

1. Moment.js 라이브러리 사용하기

---

1.1. Node.js

 

Node.js에서 Moment.js 라이브러리는 다음과 같이 사용합니다.

 

npm install moment

 

var moment = require('moment'); // require
moment().format(); 

 

ES6에서 사용할 경우에는 다음과 같이 사용합니다.

 

import moment from 'moment';
moment().format();

 

 특정 시간대만 사용하려는 경우엔 다음과 같이 import 해줍니다. (2012년부터 2022년까지의 날짜만 사용하려는 경우)

 

import moment from 'moment-timezone/builds/moment-timezone-with-data-2012-2022';

 

1.2. Typescript

 

Typescript에서 Moment.js 라이브러리는 다음과 같이 사용합니다.

 

npm install moment

 

import moment = require('moment');
let now = moment().format('LLLL');

 

Typescript 2.x 버전에서 추가하는 경우 tsconfig.json 파일의 compilerOptions에 아래 항목을 추가해줍니다.

 

"moduleResolution": "node"

 

Typescript 1.x 버전에서 추가하는 경우 tsconfig.json 파일의 compilerOptions에 아래 항목을 추가해줍니다.

 

"allowSyntheticDefaultImports": true

 

ES6에서 사용할 경우에는 다음과 같이 사용합니다. 

 

import * as moment from 'moment';

 

locale 설정이 필요한 경우에는 다음과 같이 사용합니다.

 

import 'moment/locale/pt-br';
 
console.log(moment.locale()); // en
moment.locale('fr');
console.log(moment.locale()); // fr
moment.locale('pt-br');
console.log(moment.locale()); // pt-br

 

 

2. Moment.js 라이브러리 메서드

---

Moment.js 라이브러리에는 다양한 메서드들이 있는데 주로 사용되는 메서드들에 대해 알아보겠습니다.

 

2.1. moment()

 

moment() 메서드는 moment 인스턴스를 생성합니다. 파라미터로 특정 일자를 전달하면 해당 일자의 인스턴스를 생성하고 그렇지 않은 경우엔 현재 일자의 인스턴스를 생성합니다. 또한 다양한 날짜와 시간 형식의 파라미터를 전달하여 파싱할 수 있습니다.

 

// moment()
 
const a = moment();
const b = moment('2020-10-07 00:00:00');
 
console.log(a.format());  // 2020-10-07T18:36:20+09:00
console.log(b.format());  // 2020-10-07T00:00:00+09:00
 
console.log(moment('2020-10-07', ['YYYY-MM-DD', 'MM-DD-YYYY']).format());        // 2020-10-07T00:00:00+09:00
console.log(moment('07-10-2020', ['YYYY-MM-DD', 'MM-DD-YYYY']).format());        // 2020-07-10T00:00:00+09:00
console.log(moment('07-10', ['MM-DD']).format());                                // 2020-07-10T00:00:00+09:00
console.log(moment('2020-10-07T01:02:03Z', moment.ISO_8601).format());           // 2020-10-07T10:02:03+09:00
console.log(moment('2020-10-07T01:02:03Z', ['YYYY', moment.ISO_8601]).format()); // 2020-10-07T10:02:03+09:00

 

2.2. format()

 

format() 메서드는 moment 인스턴스의 날짜/시간 출력 형태를 변경할 때 사용하는 메서드입니다. 다양한 시간 포맷을 지원하며 다음과 같이 원하는 날짜/시간 데이터를 생성할 수 있습니다. 

 

format() 메서드에 파라미터가 없는 경우에는 moment.defaultFormat(YYYY-MM-DDTHH:mm:ssZ) 값이 적용됩니다. 

 

// moment().format()
 
console.log(moment().format());                                // 2020-10-06T11:05:30+09:00
console.log(moment().format('YYYYMMDDHHmmss'));                // 20201006110530
console.log(moment().format('YYYY-MM-DD HH:mm:ss'));           // 2020-10-06 11:05:30
console.log(moment().format('YYYY-MM-DDTHH:mm:ssZ'));          // 2020-10-06T11:05:30+09:00
console.log(moment().format('ddd, DD MMM YYYY HH:mm:ss ZZ'));  // Tue, 06 Oct 2020 11:05:30 +0900
console.log(moment().format("dddd, MMMM Do YYYY, h:mm:ss a")); // Tuesday, October 6th 2020, 11:05:30 am
console.log(moment().format("ddd, hA"));                       // Tue, 11AM
console.log(moment().format("[Today is] dddd"));               // Today is Tuesday
console.log(moment('gibberish').format('YYYY MM DD'));         // Invalid Date

 

2.3. fromNow()

 

fromNow() 메서드는 현재 시간을 기준으로 상대적인 시간을 반환합니다.

 

// moment().fromNow()
 
console.log(moment("20111031", "YYYYMMDD").fromNow()); // 9 years ago
console.log(moment("20120620", "YYYYMMDD").fromNow()); // 8 years ago

 

2.4. startOf() / endOf() 

 

startOf()와 endOf() 메서드는 현재 시간을 기준으로 경과한 시간 또는 남은 시간을 반환합니다.

 

// moment().startOf() / moment().endOf()
 
console.log(moment().format());                        // 2020-10-07T14:43:26+09:00
console.log(moment().startOf('day').fromNow());     // 15 hours ago
console.log(moment().endOf('day').fromNow());       // in 9 hours
console.log(moment().startOf('hour').fromNow());    // 43 minutes ago
console.log(moment().endOf('hour').fromNow());        // in 17 minutes

 

2.5. add() / subtract()

 

add()와 subtract() 메서드는 주어진 시간값을 더하거나 뺀 만큼의 시간을 반환합니다. 전달하는 파라미터에 따라서 년, 월, 일, 시, 분, 초, 밀리세컨드 등의 다양한 단위의 연산이 가능합니다.

 

// moment().add() / moment().subtract()
 
console.log(moment().format());    // 2020-10-06T17:27:40+09:00
 
console.log(moment().add(7, 'days').format());                  // 2020-10-13T17:27:40+09:00
console.log(moment().add(7, 'days').add(1, 'months').format()); // 2020-11-13T17:27:40+09:00
console.log(moment().add(1000000, 'milliseconds').format());    // 2020-10-06T17:44:20+09:00
console.log(moment().add({days:7, months:1}).format());         // 2020-11-13T17:27:40+09:00
 
console.log(moment().subtract(7, 'days').format());                  // 2020-09-29T17:35:41+09:00
console.log(moment().subtract(7, 'days').add(1, 'months').format()); // 2020-10-29T17:35:41+09:00
console.log(moment().subtract(1000000, 'milliseconds').format());    // 2020-10-06T17:19:01+09:00
console.log(moment().subtract({days:7, months:1}).format());         // 2020-08-30T17:35:41+09:00

 

2.6. diff()

 

diff() 메서드는 날짜/시간 차이를 구하여 반환합니다. 날짜나 시간 단위 파라미터가 없는 경우엔 기본적으로 milliseconds 단위로 차이를 구하여 반환합니다.

 

// moment().diff()
 
const a = moment([2020, 10, 29]);
const b = moment([2020, 9, 29]);
 
console.log(a.format());    // 2020-11-29T00:00:00+09:00
console.log(b.format());    // 2020-10-29T00:00:00+09:00
 
console.log(a.diff(b));              // 2678400000
console.log(a.diff(b, 'days'));      // 31
console.log(a.diff(b, 'months'));    // 1

 

2.7. isSame()

 

isSame() 메서드는 날짜/시간이 같은지 비교하여 true 또는 false를 반환합니다. month 단위로 비교할 때는 year, month를 모두 비교하고 day 단위로 비교할 때는 year, month, day를 모두 비교합니다.

 

// moment().isSame()
 
console.log(moment('2020-10-07').isSame('2010-10-07', 'year'));  // false
console.log(moment('2020-10-07').isSame('2010-10-07', 'month')); // false
console.log(moment('2020-10-07').isSame('2010-10-07', 'day'));   // false
 
console.log(moment('2020-10-07').isSame('2020-10-07', 'year'));  // true
console.log(moment('2020-10-07').isSame('2020-10-07', 'month')); // true
console.log(moment('2020-10-07').isSame('2020-10-07', 'day'));   // true
 
console.log(moment('2020-10-07 06:00:00').utc().format());  // 2020-10-06T21:00:00Z
console.log(moment('2020-10-07 06:00:00').format());        // 2020-10-07T06:00:00+09:00
console.log(moment('2020-10-07 06:00:00').utc().isSame(moment('2020-10-07 06:00:00'), 'day'));  // true

 

2.8.  isAfter() / isBefore()

 

isAfter()와 isBefore() 메서드는 파라미터로 전달된 날짜/시간을 비교하여 이전, 이후 여부를 판별하여 true 또는 false를 반환합니다.

 

// moment().isAfter() / moment().isBefore()
 
console.log(moment('2020-10-07').isAfter('2020-10-06'));         // true
console.log(moment('2020-10-07').isAfter('2020-10-07'));         // false
console.log(moment('2020-10-07').isAfter('2020-10-07', 'year')); // false
console.log(moment('2020-10-07').isAfter('2019-10-07', 'year')); // true
console.log(moment('2020-10-07').isAfter('2020-10-06', 'day'));  // true
console.log(moment('2020-10-07').isAfter('2019-10-06', 'day'));  // true
console.log(moment('2020-10-07').isAfter('2021-10-06', 'day'));  // false
 
console.log(moment('2020-10-07').isBefore('2020-10-08'));         // true
console.log(moment('2020-10-07').isBefore('2020-10-07'));         // false
console.log(moment('2020-10-07').isBefore('2020-10-07', 'year')); // false
console.log(moment('2020-10-07').isBefore('2021-10-07', 'year')); // true
console.log(moment('2020-10-07').isBefore('2020-10-08', 'day'));  // true
console.log(moment('2020-10-07').isBefore('2019-10-08', 'day'));  // false
console.log(moment('2020-10-07').isBefore('2021-10-08', 'day'));  // true

 

2.9. isBetween()

 

isBetween() 메서드는 파라미터로 전달된 날짜/시간이 시작일과 종료일 사이에 포함되는지 판별하여 true 또는 false를 반환합니다.

 

시작일 또는 종료일에 undefined를 사용하면 moment()로 동작하여 현재 날짜를 반환합니다.

 

괄호를 파라미터로 전달할 경우 시작일 또는 종료일에 대해 소괄호 '()' 는 대상 일자를  포함하지 않고, 대괄호 '[]' 는 대상 일자를 포함하여 비교합니다.

 

// moment().isBetween()
 
console.log(moment('2020-10-07').isBetween('2020-10-07', '2020-10-07')); // false
console.log(moment('2020-10-07').isBetween('2020-10-06', '2020-10-07')); // false
console.log(moment('2020-10-07').isBetween('2020-10-06', '2020-10-08')); // true
console.log(moment('2020-10-07').isBetween('2020-10-06', undefined));    // true
 
console.log(moment('2020-10-07').isBetween('2020-10-07', '2021-10-07', 'year')); // false
console.log(moment('2020-10-07').isBetween('2019-10-07', '2021-10-07', 'year')); // true
console.log(moment('2020-10-07').isBetween('2020-10-07', '2020-10-08', 'day'));  // false
console.log(moment('2020-10-07').isBetween('2020-10-06', '2020-10-08', 'day'));  // true
 
console.log(moment('2020-10-07').isBetween('2020-10-07', '2020-10-08', undefined, '()')); // false
console.log(moment('2020-10-07').isBetween('2020-10-07', '2020-10-08', undefined, '[)')); // true
console.log(moment('2020-10-07').isBetween('2020-10-07', '2020-10-07', undefined, '(]')); // false
console.log(moment('2020-10-07').isBetween('2020-10-07', '2020-10-07', undefined, '[]')); // true

 

이상으로 Moment.js 라이브러리에 대해 알아봤습니다.

 

 

※ Reference

 

• momentjs.com, Moment.js Documentation, https://momentjs.com/docs/
• velog.io/@wo0kgod, Moment js를 처음 사용할때 좋은 함수들, https://velog.io/@wo0kgod/Moment-js%EB%A1%9C-%EC%8B%9C%EA%B0%84%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A1%B0%EC%9E%91%ED%95%98%EA%B8%B0
• github.com/jinyowo, moment.js (날짜관련 작업을 위한 자바스크립트 라이브러리), https://github.com/jinyowo/JS-Calendar/wiki/**-moment.js-(%EB%82%A0%EC%A7%9C%EA%B4%80%EB%A0%A8-%EC%9E%91%EC%97%85%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC)
• shlee1990.tistory.com, [Java Script] 자바스크립트 추천 라이브러리 : Moment.js, https://shlee1990.tistory.com/792