[Java Script] 자바스크립트 추천 라이브러리 : Moment.js

 정보

• 업무명     : 자바스크립트 추천 라이브러리 : Moment.js

• 작성자     : 이상호

• 작성일     : 2020-05-02

• 설   명      :

• 수정이력 :

 

 내용

[개요]

• 안녕하세요? 웹 개발 및 연구 개발을 담당하고 있는 해솔입니다.

• 프로그램에서는 날짜와 시간 데이터를 취급하는 것은 자주합니다.

• 자바스크립트에서 Date를 사용하여 날짜 및 시간 데이터를 처리 할 수 ​​있습니다.

var d = new Date('2012/10/20 15:30:50');
 
// 2012년
d.getFullYear();
 
// 9월 (0부터 시작)
d.getMonth();
 
// 20일
d.getDate();

 

• 이와 같이 Date를 사용하면 날짜의 데이터를 처리 할 수 ​​있으나 귀찮은 일이 몇 가지 있습니다.
  

• 예를 들어 API에서 취득한 2012/10/20 15:30:50이라는 날짜 문자열을 Date 객체를 만들고

• 2012년10월 20일 15시 30분과 같은 형식으로 출력할 경우 다양한 방법이 있으나 다음과 같이 사용합니다.

var d = new Date('2012/10/20 15:30:50');

var formatDate =
  d.getFullYear() + '년' +
  (d.getMonth() + 1) + '달' +
  d.getDate() + '일' +
  d.getHours() + '시' +
  d.getMinutes() + '분';

 

• 날짜를 위와 같이 포맷 출력할 수 있으나 매번 번거로운 작업을 해야합니다. 그 외에도 시간 처리에 Date 객체는 다소 부족하다고 생각하는 몇 가지 있습니다.

• 따라서 오늘 포스팅에서는 이를 해결하기 위한 Moment.js을 소개해 드리고자 합니다.

 

 

[특징]

• 웹 개발을 위해서 자바스크립트 (Java Script)기술이 요구되며 이 프로그램은 이러한 목적을 달성하기 위한 기술서

 

[기능]

• Moment.js 소개
  

• moment 객체 생성
  

• ISO 8610
  

• 날짜 형식
  

• 날짜 계산
  

• 시간 차이
  

• 다국어 지원

 

[활용 자료]

• 없음

 

[자료 처리 방안 및 활용 분석 기법]

• 없음

 

[사용법]

• 없음

 

[사용 OS]

• Windows 10

 

[사용 언어]

• Java Script

• Visual Studio Code v1.43.2

 

 세부 내용

[Moment.js 소개]

• Moment.js는 날짜를 취급하는데 있어서 표준 Date의 기능만으로는 부족한 기능을 제공 해줍니다.

• 또한 압 된 버전은 5KB로 매우 가볍고 사용 설명서가 매우 친절하며 사용 예시가 많습니다.

• 또한 현재에도 활발하게 개발이 진행되고 있으며 현재 최신 버전은 2.25.1까지 릴리즈 되었습니다.

 

 

 

Moment.js | Home

 

[moment 객체 생성]

• 우선 Moment.js에서 날짜 객체를 만드는 방법을 설명합니다. 

• Moment.js는 moment()로 moment 개체를 만들 수 있습니다. 

• Date부터는 new Date()으로 일시 객체 (인스턴스)를 만드는 것과 같습니다. 

• 다음과 같이 인수를 지정하지 않으면 현재 날짜와 시간이 설정됩니다.

 

var m = moment();

 

• Date와 같이 문자열에서 특정 날짜를 지정할 수도 있습니다.

var m = moment('2012/10/20 15:30:50');

 

• Date는 년, 월, 일 등을 수치로 인수에 지정할 수 있으나 moment에서는 배열로 지정합니다.

// Date의 경우 숫자
var d = new Date(2012, 10, 20, 15, 30, 50);

// moment의 경우 배열
var m = moment([2012, 10, 20, 15, 30, 50]);

 

• Date의 인스턴스를 인수화할 수 있습니다.

var d = new Date('2012/10/20 15:30:50');
var m = moment(d);

 

• 이만큼의 기능이면 Date와 동일하나 Moment.js는 입력 값의 포맷을 지정할 수 있습니다.

var m = moment('2012년10월20일', 'YYYY년MM월DD일');

 

• 이처럼 "2012년10월10일" 문자열에서 moment 개체를 지정할 수 있습니다.

• 이 기능을 사용하면 API가 반환 날짜 형식이 자신의 것이 되어 있어도 그 포맷을 지정할 수 있습니다.

• 자신의 날짜 형식을 해석 할 수있는 형식으로 하기 위해 다시 교체하는 작업은 필요하지 않습니다.

• 자세한 정보는 아래 표를 참조하시기 바랍니다.

 

예약어	의미
M 또는 MM	달의 숫자 (1 - 12)
MMM 또는 MMMM	달의 이름 (언어 moment.lang()에서 지정)
D 또는 DD	날 (달 : 예를 들어 10 월의 며칠 눈)
DDD 또는 DDDD	일 (년 : 예를 들어 2010 년의 며칠 눈)
d, dd, ddd 또는 dddd	요일 (참고 :이 토큰은 날짜를 얻는 데 사용할 수 없다 .1 개월은 4-5 주 수 요일을 바탕으로 데이트를하는 것은 불가능하기 때문)
YY	두 자릿수의 연수 (만약 70 이상이면 1900 년대하거나 그렇지 않으면 2000 년대를 반환)
YYYY	4 자리 연도
a 또는 A	AM / PM
H, HH	시간 (24 시제)
h 또는 hh	시간 (12 시제, a 또는 A와 함께 사용)
m 또는 mm	분
s 또는 ss	초
S	디시 초 (10 초)
SS	센티 초 (1/100 초)
SSS	밀리 초 (1/1000 초)
Z 또는 ZZ	+0700또는 +07:30같은 시간대의 시차. 시간대가 지정되지 않는 한 문자 퍼스는 현재의 시간대에서 date를 만든다.

 

[ISO 8610]

• 또한 ISO 8601라는 날짜 및 시간 형식이 있는데, IE8이나 iOS4, Android2.2 등이 날짜 및 시간 형식의 퍼스에 대응하고 있지 않습니다.

• ISO 8601은 2012-10-20T15:30:50+09:00와 같은 형식입니다.

• 이 문자열을 Date 인수로 지정할려면 지원하지 않는 브라우저에서는 Invalid Date NaN되어 버립니다.

// Android 2.2의 경우 Invalid Date
var d = new Date('2012-10-20T15:30:50+09:00');

 

• 일단 Date 객체에 전달하기 전에 대체하는 등 ISO 8601 이외의 지원되는 형식으로 변환해야 합니다.

• 그러나 Moment.js이 ISO 8601에 대해 자동 해석할 수 있으므로 다음과 같이 써도 크로스 브라우저에서 동작합니다.

var m = moment('2012-10-20T15:30:50+09:00');

 

[날짜 형식]

• 그러면 moment 객체에 어떤 기능이 있는지를 살펴 보겠습니다. 

• 앞서 예시와 같이 2012년 10월 20일 15시 30분 형식으로 출력하는 처리를 Moment.js을 사용하면 다음과 같습니다.

var m = moment('2012/10/20 15:30:50');

var formatDate = m.format('YYYY년MM월DD일 HH시mm분');

 

• format() 메소드를 사용하면 매우 직관적으로 간결하게 사용할 수 있습니다.

• 즉 다음과 같이 다양한 형식으로 변환할 수 있습니다.

// 2012-10-20
m.format('YYYY-MM-DD');

// Saturday, October 20th 2012, 3:30:50 pm
m.format('dddd, MMMM Do YYYY, h:mm:ss a');

// Oct 20th 12 Sat
m.format('MMM Do YY ddd');

 

• format() 인수에 아무것도 지정하지 않으면 moment.defaultFormat값이 적용됩니다.

• moment.defaultFormat 초기 설정은 YYYY-MM-DDTHH:mm:ssZ로되어 있습니다.

 

[날짜 계산]

• Moment.js는 시간의 덧셈과 뺄셈을 쉽게 할 수 있는 기능도 있습니다.

• 덧셈 및 뺄셈의 경우 각각 add() 및 subtract() 메소드를 사용합니다.

• 이러한 add(), subtract() 메소드를 사용하기 앞서 주의가 필요합니다.

moment.defaultFormat = 'YYYY/MM/DD HH:mm:ss';
var m = moment('2012/10/20 15:30:50');
 
// 5일 더하기 : 2012/10/25 15:30:50
m.add('days', 5).format();
 
// 10시간 더하기 : 2012/10/26 01:30:50
m.add('hours', 10).format();
 
// 3개월 빼기 : 2012/07/26 01:30:50
m.subtract('months', 3).format();

 

• 위의 예시에서와 같이 add() 및 subtract()은 원본 데이터 (2012/10/20 15:30:50)를 수정하여 5일, 10시간 더한 데이터가 있습니다.

• 자신의 데이터는 변경하지 않고 계산만 원하는 경우 clone()에 복사 한 후 add() 및 subtract()을 사용해야 합니다.

moment.defaultFormat = 'YYYY/MM/DD HH:mm:ss';
var m = moment('2012/10/20 15:30:50');
 
// 5일 더하기 : 2012/10/25 15:30:50
m.clone().add('days', 5).format();
 
// 10일 더하기 : 2012/10/21 01:30:50
m.clone().add('hours', 10).format();

 

• 첫 번째 예와 달리 10시간 더한 처리는 원본 데이터에서 10시간 더한 날짜로 되어있는 것을 알 수 있습니다.

• 이러한 시간의 덧셈과 뺄셈은 오늘부터 1 개월 후의 날짜를 표시하고 싶다는 때 유용합니다.

 

[시간 차이]

• Moment.js는 시간의 차이를 알 수 있습니다.

• Date 객체도 숫자로 변환할 때 밀리 초로 변환 할 수 있기 때문에 간단한 차이라면 Moment.js을 사용 않고도 가능합니다.

var d1 = new Date('2012/10/20 15:30:50');
var d2 = new Date('2012/10/21 15:30:50');
 
// d2와 d1의 차 : 86400000
d2 - d1;

 

• 86400000는 24 * 60 * 60 * 1000는 하루를 밀리 초 값입니다. 이러한 Date 객체에서 차이를 잡는 방법은 일반적으로 사용되는 방법입니다.

var start = new Date();

// 처리하는 데 소요 시간
new Date() - start; 

 

• 이처럼 단순히 차이를 밀리 세컨드로 요청만하면 Date 객체만으로 충분합니다.

• 그러나 예를 들어, 현재 날짜로부터 3일 이내에 항목에 new라는 class를 지정하려는 경우 차등 밀리 초에서 일자를 구해야 처리할 수 있습니다.

• Moment.js의 diff() 메소드를 사용하면 매우 간단하게 처리할 수 있습니다.

var now = moment();
 
if (now.diff(entry.date, 'days') <= 3) {
  entry.addNew();
}

 

• diff()의 1번째 인수는 날짜의 문자열이나 Date 객체, moment 객체가 될 수 있습니다.

• 2번째 인수에는 years, months, days 등의 차이가 원하는 단위를 지정할 수 있습니다. 인수를 생략하면 밀리 초를 반환합니다.

var m1 = moment('2012/10/20 15:30:50');
var m2 = moment('2011/09/20 15:30:50');
 
// 34214400000
m1.diff(m2); 

// 1
m1.diff(m2, 'years'); 

// 13
m1.diff(m2, 'months');

// 57
m1.diff(m2, 'weeks');

// 396
m1.diff(m2, 'days'); 

// 9504
m1.diff(m2, 'hours'); 

// 570240
m1.diff(m2, 'minutes'); 

// 34214400
m1.diff(m2, 'seconds'); 

 

[다국어 지원]

• Moment.js는 국제화도 쉽게 할 수 있습니다. 

• Moment.js의 공식 홈페이지에 접속된 것만 30개 이상의 언어에 대응하고 스스로 특정 언어에 대응하는 것도 어렵지 않습니다.

• 해당 언어를 다운로드하여 moment.lang()에 언어를 지정합니다. 기본적으로 영어 (en)이 있습니다.

moment.lang('kr');

var m = moment('2012/10/20 15:30:50');

// 10월
m.format('MMM'); 

 

• 또한 format()를 지정할 수있는 것에 L, LL, LLL, LLLL, LT는 로컬 날짜 형식으로 변환할 수 있습니다 .

moment.lang(navigator.language);
var m = moment('2012/10/20 15:30:50');

// 언어 설정이 일본어의 경우 2012년 10월 20일 
// 언어 설정이 영어로 경우 20 octobre 2012 
// 언어 설정이 독일어의 경우 20. Oktober 2012
m.format('LL');

 

 요약

• Moment.js은 작은 라이브러리로서 jQuery처럼 개발 생산성이 증가하는 것은 아니나 간편하게 날짜형을 처리할 수 있는 라이브러리라고 생각합니다.

• 이러한 라이브러리는 여러가지 사용의 용이성은 부정할 수 없습니다.

• 사람에 따라 Moment.js보다 사용하기 쉬운 것이 있을지도 모르고 직접 만들고 있는 사람도 있을지도 모릅니다.

 

 참고 문헌

[논문]

• 없음

[보고서]

• 없음

[URL]

• 없음

 

 문의사항

[기상학/프로그래밍 언어]

• sangho.lee.1990@gmail.com

[해양학/천문학/빅데이터]

• saimang0804@gmail.com

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

본 블로그는 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음