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
