[Javascript] Moment.js

자바스크립트에서는 날짜/시간을 다루기 위해 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);

날짜 계산

add() 함수를 이용하여 간단하게 날짜 계산을 할 수 있습니다.

1. console.log(moment(d.getTime()).add("-1", "y").format("YYYY/MM/DD")); //1년 전
2. console.log(moment(d.getTime()).add("1", "M").format("YYYY/MM/DD")); //1개월 후
3. console.log(moment(d.getTime()).add("2", "d").format("YYYY/MM/DD")); //2일 후
4. console.log(moment(d.getTime()).add("-3", "h").format("HH시 mm분 ss초")); //3시간 전
5. console.log(moment(d.getTime()).add("4", "m").format("HH시 mm분 ss초")); //4분 후
6. console.log(moment(d.getTime()).add("-5", "s").format("HH시 mm분 ss초")); //5초 전

출력)

1. 2018/05/13
2. 2019/06/13
3. 2019/05/15
4. 08시 27분 45초
5. 11시 31분 45초
6. 11시 27분 40초

날짜 차이 구하기

연애를 하실때 사귄지 몇 일인지 계산한적이 있으실 것입니다. 요즘에야 스마트폰 어플을 설치하면 간단하게 계산하지만 오래전엔 일일이 날짜 셌던 경험이 있으셨을 겁니다.
함수 하나로 간단하게 계산할 수 있습니다!

1. var a = moment(d);
2. var b = a.clone().add('-1', 'M');
3. console.log(a.format("YYYY.MM.DD"));
4. console.log(b.format("YYYY.MM.DD"));
5. console.log(a.diff(b, 'days')); //일 단위로 날짜 차이 계산
6. console.log(a.diff(b, 'weeks')); //주 단위로 날짜 차이 계산
7. console.log(a.diff(b, 'months')); //월 단위로 날짜 차이 계산
8. console.log(a.diff(b, 'years', true)); //연 단위로 날짜 차이 계산

정리

moment.js는 작은 용량에 굉장히 유용한 기능을 제공합니다. 때문에 많은 오픈소스, 특히 달력 관련 라이브러리에서도 많이 사용하고 있습니다. 웹사이트를 만들때 moment.js는 이제 필수 라이브러리 입니다.

최종 샘플

샘플은 node.js 로 제작하였지만 라이브러리 로딩 부분만 바꾸면 브라우저에서도 동작하는 코드 입니다.

1. const moment = require("moment");
3. var d = new Date();
4. var second = 1000 * 60;
5. var fmt1 = 'YYYY.MM.DD HH:mm:ss';
6. var fmt2 = 'YY.MM.DD hh:mm:ss a';
8. var now = moment(d).format(fmt1); //Date 객체를 파라미터로 넣기
9. console.log(now);
10. console.log(moment(d.getTime() + second).format(fmt1)); //밀리초를 파라미터로 넣기
11. console.log(moment(now.replace(/[.:]/g, '')).format(fmt2)); //문자열로된 날짜를 파라미터로 넣기
13. console.log('-------------------------------');
14. console.log(moment(d.getTime()).add("-1", "y").format("YYYY/MM/DD")); //1년 전
15. console.log(moment(d.getTime()).add("1", "M").format("YYYY/MM/DD")); //1개월 후
16. console.log(moment(d.getTime()).add("2", "d").format("YYYY/MM/DD")); //2일 후
17. console.log(moment(d.getTime()).add("-3", "h").format("HH시 mm분 ss초")); //3시간 전
18. console.log(moment(d.getTime()).add("4", "m").format("HH시 mm분 ss초")); //4분 후
19. console.log(moment(d.getTime()).add("-5", "s").format("HH시 mm분 ss초")); //5초 전
21. console.log('-------------------------------');
22. var a = moment(d);
23. var b = a.clone().add('-1', 'M');
24. console.log(a.format("YYYY.MM.DD"));
25. console.log(b.format("YYYY.MM.DD"));
26. console.log(a.diff(b, 'days')); //일 단위로 날짜 차이 계산
27. console.log(a.diff(b, 'weeks')); //주 단위로 날짜 차이 계산
28. console.log(a.diff(b, 'months')); //월 단위로 날짜 차이 계산
29. console.log(a.diff(b, 'years', true)); //연 단위로 날짜 차이 계산