자바스크립트에서는 날짜/시간을 다루기 위해 Date 객체를 사용합니다. 다양한 출력 함수를 지원하고 있지만 필요한 기능은 직접 만들어야 할때가 있습니다. ‘2016-06-19’ 이라던지 ‘07:40’같은 포맷을 출력하려면 별도 함수나 프로토타입 함수를 만들어야 합니다. 또한 서버, 브라우져의 시간대가 다를 경우 이를 고려하여 개발할 때는 여간 까다로운 일이 아니죠. moment.js는 이런 기능 뿐 아니라 자바스크립트 Date 객체를 좀 더 쉽게 다룰 수 있도록 도와 줍니다.

인스턴스

시간을 다루기 위해 Date 객체 대신 monent 객체를 사용합니다. moment 생성자는 다양한 문자열을 파라매터로 받을 수 있는데 두번 째 파라매터로 형식을 지정해 주면 됩니다.

moment('2015-06-15', 'YYYY-MM-DD')

날짜가 아닌 시간 문자열로도 생성할 수 있습니다.

moment('07:45', 'hh:mm')

moment 객체를 자바스크립트 date 갭체로 변환할 때는 toDate() 함수를 사용합니다.

moment().toDate()

포맷

이렇게 생성된 moment 객체는 다양한 형식으로 문자열을 얻을 수 있습니다.

var today = moment('2015-06-15', 'YYYY-MM-DD');

console.log(today.format()); // "2015-06-15T00:00:00+09:00"
console.log(today.format('YYYY-MM-DD')); // "2015-06-15"
console.log(today.format('YYYY')); // "2015"
console.log(today.format('MM')); // "06"
console.log(today.format('DD')); // "15"

쿼리

moment 객체간의 연산 기능도 제공합니다. 아래는 isSame() 함수를 사용하는 예제입니다.  객체의 일부분만 비교할 경우 두번째 파라매터를 설정합니다. (쿼리함수)

console.log(moment('2010-10-20').isSame('2010-10-21')); // false
console.log(moment('2009-10-20').isSame('2010-10-21', 'year')); // false
console.log(moment('2010-10-20').isSame('2010-10-21', 'month')); // true
console.log(moment('2010-10-20').isSame('2010-10-21', 'date')); // false

기간

setTimeout(), setInterval() 등은 타이머 설정시 마이크로초를 사용합니다. 이렇게 자바스크립트에서는 시간을 마이크로초로 표현하는 경우가 많은데 기간을 얻기 위해 이를 연산해서 사용합니다. 보통 이런식으로 코드를 작성할 것입니다.

var t1 = new Date(2016, 5, 18);
var t2 = new Date(2016, 5, 19);
var diff1 = {
  seconds: Math.floor((t2 - t1) / 1000), // 86400
  minutes: Math.floor((t2 - t1) / (1000 * 60)), // 1440
  hours: Math.floor((t2 - t1) / (1000 * 60 * 60)) // 24
};
console.log(diff1);

 moment는 duration() 함수를 통해 초, 분, 시간 값을 계산할 수 있습니다.

var diff2 = {
  seconds: moment.duration(t2 - t1).asSeconds(), // 86400
  minutes: moment.duration(t2 - t1).asMinutes(), // 1440
  hours: moment.duration(t2 - t1).asHours() //24
};
console.log(diff2);

 

데모: https://github.com/jeonghwan-kim/momentjs-study