moment.js (날짜관련 작업을 위한 자바스크립트 라이브러리)

들어가며

calendar 프로젝트를 진행하면서 날짜 관련정보를 다루었다(Date 객체). 프로젝트 중에 날짜 관련 data를 쉽게 다룰수 있는 라이브러리를 발견하여 이에 대해서 간단히 정리해보고자 한다. Moment.JS 는 날짜(Date)형식의 데이터의 파싱, 검증, 조작 그리고 화면에 출력하는 작업을 위해 만들어진 아주 유용한 라이브러리이다.

프로젝트를 통해 느낀 Date object의 불편함 & Moment.JS의 편리함

Date object와 관련된 method를 사용하면서 불편한점이 많았다. 한가지 예를 들면 ISO 포맷형태의 날짜data(ex. 2017-01-25)를 얻기 위해서, 시간이 까지 포함된 ISOString형태(ex. 2017-01-25T12:25:00.000z)에서 T를 기준으로 split method를 사용하여 ISO 포맷형태의 날짜를 얻을수 있었다. 코드는 아래 와 같다.(바로 구하는 method는 없는것 같다.)

var d= new Date(); // 출력형태 Tue Feb 07 2017 23:25:32 GMT+0900 (KST) var ISOData = d.toISOString(); // 출력형태 2017-02-07T13:39:45.148Z var ISODate = ISOData.split("T",1); // 출력형태 2017-02-07

Date object를 사용하면서 부분적인 시간과 날짜 정보를 얻기 위해서 위와 같이 문자열을 쪼개어서 얻는것이 나이스(?)하지 못하다고 느꼈다. 위와 같은 코드를 Moment.js를 사용하여 구하려면 어떻게 하면 될까?

var ISODate = moment().format('YYYY[-]MM[-]DD');

위와 같이 보다 직관적인이고 간단한 코드를 통해서 ISO 포맷 형태의 날짜 정보를 얻을수 있다.

다른 예를 들자면 ISO 포맷형태의 TimeString간의 시간차이를 구하기 위해서는 내가 아는바로는 시간차이를 바로 구할수있는 method는 없었고, 역시 문자열 조작과 기존 Date object를 통해서 시간차이를 계산할수 있었다.

 

var time1 = "2017-02-01T12:25:00Z"

var time2 = "2017-02-04T12:20:00Z"

 

function dateFromISO(isostr) {

var parts = isostr.match(/\d+/g);

return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]);

};

 

var ParsedTime1= dateFromISO(time1);

var ParsedTime2= dateFromISO(time2);

var timeDifference = parsedTime2-parsedTime1 ; // 출력 단위 밀리초(ms)

 

위와 같이 정규표현식을 사용하여 기존ISOString 형태 시간 데이터를 쪼개어 배열에 저장하고, Date object를 통해서 시간정보로 가공하였다. 시간차이를 계산하기 위해서 이와같이 시간정보로 바꿔서 계산해야 한다.(이 역시 곧바로 구하는 method는 없는것 같다.) 위와 같은 함수를 생각해내지 못하면 해결(?)하지 못할수도 있다. 나이스(?)하지 못하다..

위와 같은 코드를 역시 Moment.JS를 사용하여 구하면 어떻게 될까?

 

var time1 = "2017-02-01T12:25:00Z"

var time2 = "2017-02-04T12:20:00Z"

var ms = moment(time2,"YYYY-MM-DDTHH:mm:ssZ").diff(moment(time1,"YYYY-MM-DDTHH:mm:ssZ")); // 출력 단위 밀리초(ms)

 

ISOstring형태의 시간정보를 다른 시간형태의 시간정보로 가공하지 않아도 되고, diff라는 method를 통해서 시간차이를 구하였다. 얼마나 직관적이고 간편한가!

나는 Javascript를 배우는 중이라서 다른 라이브러리를 사용하지 않은채 개발하였지만, 시간 관련 정보를 다루는 프로젝트를 개발하는 사람들에게 Moment.JS를 적극 추천한다.

Moment.JS의 method에는 많은것들이 있다. 이중에서 몇가지만 간단히 정리하고자 한다.

현재시간

현재시간을 얻기 위해서는 매개변수 없이 아래와 같이 호출하면 된다.

 

var now = moment();

 

문자열(String)을 통한 시간정보 생성

문자열(ex. "1989-03-15")을 통해서 시간을 생성하고자 할때는 아래와 같이 호출하면 된다.

 

var time = moment("2017-01-01");

 

위와 같이 " YYYY-MM-DD "형태의 string 외에도 " YYYY-MM-DD HH:MM:SS "등과 같은 형태의 시간문자열이 있을수 있다. 가능한 문자열 형태는 이 링크에서 확인하기를 바란다. 만약불가능한 형태의 시간 string이라면 아래 method를 사용하여 true , false 값으로 확인할수 있다.

 

var time = momnet("시간문자열").isValid(); //return true or false

 

정형화된 시간정보(Format Dates)

아래코드와 같이 자신이 원하는 형태의 시간정보를 생성할수 있다.

 

moment().format('MMMM Do YYYY, h:mm:ss a'); // February 8th 2017, 6:30:39 pm

moment().format('dddd'); // Wednesday

moment().format("MMM Do YY"); // Feb 8th 17

moment().format('YYYY [escaped] YYYY'); // 2017 escaped 2017

moment().format(); // 2017-02-08T18:30:39+09:00

 

상대적인 시간(Relative Time)

특정시간정보가 지금으로부터 어느정도의 시간거리를 가지고 있는지 알수 있다.

 

moment("20111031", "YYYYMMDD").fromNow(); // 5 years ago

moment("20120620", "YYYYMMDD").fromNow(); // 5 years ago

moment().startOf('day').fromNow(); // 19 hours ago

moment().endOf('day').fromNow(); // in 5 hours

moment().startOf('hour').fromNow(); // 34 minutes ago

 

달력관련 날짜 및 시간정보

 

moment().subtract(10, 'days').calendar(); // 01/29/2017

moment().subtract(6, 'days').calendar(); // Last Thursday at 6:36 PM

moment().subtract(3, 'days').calendar(); // Last Sunday at 6:36 PM

moment().subtract(1, 'days').calendar(); // Yesterday at 6:36 PM

moment().calendar(); // Today at 6:36 PM

moment().add(1, 'days').calendar(); // Tomorrow at 6:36 PM

moment().add(3, 'days').calendar(); // Saturday at 6:36 PM

moment().add(10, 'days').calendar(); // 02/18/2017

 

배열(Array)를 이용한 시간정보 생성

배열을 통해서 시간정보를 생성할수도 있다.

배열은 입력된 배열의 길이 만큼 앞에서부터 길이만큼 아래 배열에서 끊어서 의미를 확인하면된다.

[year, month, day, hour, minute, second, millisecond]

 

예제코드

moment([2010, 1, 14, 15, 25, 50, 125]); // February 14th, 3:25:50.125 PM

moment([2010]); // January 1st

moment([2010, 6]); // July 1st

moment([2010, 6, 10]); // July 10th

 

시간차이 계산

월차이를 구하는 코드 예제를 보자. 간편하다

 

moment('2016-06','YYYY-MM').diff('2015-01','month'); //17

 

여러가지 메소드와 경우의 수가 존재하므로 설명없이 예제코드들을 나열해보록 하겠다. 필요한 예제들만 골라서 사용하면 되겠다.(설명이 필요할것 같은 부분만 주석으로 설명하겠다.)

 

moment().format() //2017-02-08T18:44:10+09:00

moment().toString() //Wed Feb 08 2017 18:44:10 GMT+0900

moment('2013-11-16') - moment('2013-11-15') //86400000

moment().endOf('day') //1486565999999

 

var now = moment('2013-11-22'); //finish와 같은날로 지정

var start = moment('2013-11-10');

var finish = moment('2013-11-22');

var event = moment('2013-11-16').endOf('day'); //2013년 11월 16일의 끝나는 시점. 2013년 11월 16일 11시 59분 59초

 

event.diff(start) //604799999 event시점에서 start시점을 뺀 시간 단위 밀리초 (시간정보는 시간이 흐를수록 값이 커진다.)

event.diff(finish) //-432000001

 

moment().format('YYYY-MM-DD') //2017-02-08

moment().format('YYYY') //2017

moment().format('MM-DD') //02-08

moment(start).add('years',1).calendar() //11/10/2014 start시점에 1년을 더한다.

 

now.diff(start) > 0 && now.diff(finish) < 0 //false now시점이 start와 finish 사이에 있는지

 

moment('Tue Dec 23 12:02:08 EST 2014').format() //2014-12-24T02:02:08+09:00

moment().format('MMMM Do [at] h:mm:ss a') //February 8th at 6:44 pm [] 괄호로 감싸서 데이터 중간에 문자나 특수문자 입력가능

moment('2015/04/02 12:00').subtract('hours',9).format('YYYY/MM/DD hh:mm') // 2015/04/02 03:00 시점에서 9시간을 빼고 정해진 포맷대로 출력

 

moment('1/1/0001').format() // 2001-01-01T00:00:00+09:00

moment('0001-01-01').format() //0001-01-01T00:00:00+09:00

moment().format('MMMM D, YYYY') // February 8, 2017

 

now.isBetween(start, finish, '(]')) //true start 시점 < now시점 <= finish시점인지

 

위와 같이 몇가지만 간단히 정리해보았지만 여러가지 조합과 method가 있으니 더 많은 정보를 얻고자 하는 사람은 아래 사이트를 참고하길 바란다.

 

https://momentjs.com

Moment.js | Home

출처: 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)