[javascript] moment.js 사용하기

관련지식
node.js, date, moment.js

어떤 기능을 하는 사이트를 만들던지 반드시 필요한 기능이 있다면 그것은 바로 날짜/시간과 관련된 기능일 것입니다. 숫자로 이루어진 timestamp 값을 형식에 맞게 포맷팅을 하거나, 날짜와 날짜 사이의 기간을 계산하는 기능은 사이트 특징과 상관없이 대부분 사용될 것입니다.

때문에 과거에는 날짜/시간과 관련된 공통 함수를 만들어야만 했습니다. 하지만 지금은 간단하게 moment.js 를 사용하면 됩니다!

경로 : https://momentjs.com/
api : https://momentjs.com/docs/
설치 : npm, yarn, bower 등 다수 지원
버전 : 2.24.0

날짜 포맷팅

보통 자바스크립트에서 날짜와 관련된 값은 3가지 형태로 가지고 있을 것입니다. Date 객체나 밀리초 값으로만 가지고 있는 것이 가장 좋지만 화면에서 날짜를 입력하는 경우엔 문자열로 된 날짜를 쓸수 밖에 없죠.

1. Date 객체 타입
2. 밀리초 정수
3. 날짜 문자열

moment()는 파라미터로 Date 객체를 받을수도 있고 밀리초 값을 받을수도 있습니다. 문자열로 된 날짜도 가능합니다. 값을 함수에 전달하기 위해 매번 변환할 수고가 매우 적습니다.

const moment = require("moment");
var d = new Date();
var second = 1000 * 60;
var fmt1 = 'YYYY.MM.DD HH:mm:ss';
var fmt2 = 'YY.MM.DD hh:mm:ss a';
var now = moment(d).format(fmt1);  //Date 객체를 파라미터로 넣기
console.log(now);
console.log(moment(d.getTime() + second).format(fmt1));  //밀리초를 파라미터로 넣기
console.log(moment(now.replace(/[.:]/g, '')).format(fmt2));  //문자열로된 날짜를 파라미터로 넣기

출력)

2019.05.13 09:57:57
2019.05.13 09:58:57
19.05.13 09:57:57 am

날짜 계산

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

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

출력)

2018/05/13
2019/06/13
2019/05/15
08시 27분 45초
11시 31분 45초
11시 27분 40초

날짜 차이 구하기

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

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

정리

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

최종 샘플

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

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