개발을 하디보면 굳이 개발하자니 귀찮고, 남이 준비해놨는지 헷갈리는 기능들이 많다. 보통 그런 기능이나 연산들의 묶음은 다른 사람이 이미 만들어서 라이브러리를 배포해둔 경우가 많은데, 블로그에서는 내가 자주 쓰는 라이브러리들도 모아두려고 한다.
생각 보다 개발하다보면 날짜를 다뤄야하는 경우가 생각보다 많이 생긴다. 특정 날짜를 YYYY-MM-DD 형태로 출력해야 한다던지, 아니면 두 일자 사이에 차이를 구한다던지, 날짜에 일자 혹은 시간등을 더하거나 빼는 등 다양한 연산을 하게 되는데, 그걸 자바스크립트에서 Date객체만 가지고 하기엔 약간 귀찮은 일이 많이 따른다. momentjs라는 라이브러리가 그런 기능들을 좀 쉽게 가능하게 해준다.
1. 설치
momentjs는 브라우저와 nodejs환경을 모두 지원한다. 두개가 다른점은 브라우저에서는 script 태그를 추가해서 외부에서 불러와 사용하면되지만, nodejs에서는 require로 불러와서 사용해야하는 차이가 있다. require함수는 브라우저에서는 지원하지 않으므로, 맞게 불러써야할 것이다.
1.1. cdn 에서 불러오기
cdnjs.com에서 가져올 수 있다. 링크를 들어가면 항상 최신버전으로 불러와준다. 작업을 하다보면 요구사항에 따라 한글로 표기를 해야될 경우가 있는데, 한글로 표기할때에는 moment-with-locales파일을 불러와 언어 항목이 포함된 자바스크립트를 로드 해야한다.
실제 HTML에서는 다음과 같이 사용한다
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment-with-locales.min.js"></script>
<script type="text/javascript">
// 현재 시간을 moment 객체로 생성
var mNow = moment();
</script>
1.2. nodejs에서 설치하기
npm이나 yarn으로 설치하는 법은 어렵지 않다.
1
2
npm install momentjs --save
yarn add momentjs
위와 같이 사용하고, 실제 코드에서 불러올때는 import혹은 require로 불러와 사용하면 된다. 실제 코드는 아래와 같다 .
1
2
3
4
5
6
7
// require
const moment = require('moment');
console.log(moment());
// import
import moment from 'moment'
console.log(moment());
2. 기본적인 사용법
위와 같이 설치한 뒤에는 목적에 따라 쉽게 사용하면 되는데, 상세한 내용은 document를 참조하면 된다. 내가 주로 사용했던 항목들은 다음과 같다.
2.1. 초기화 하기
1
2
3
4
5
6
7
8
9
10
11
12
// 1. 초기화 관련
// 오늘 날짜를 moment객체로 생성
const mNow = moment();
// 특정 날짜 객체를 moment객체로 생성
// moment 생성자에 날짜 객체를 넣으면 자동으로 변환된다
const newDate = new Date();
const mSpecificDate = moment(newDate);
// 날짜 문자열을 moment객체로 만들기
const mDateFromString = moment("2020-04-25 23:30:00");
생성자를 이용해 초기화하면서 할 수 있는 일은 위와 같다. 생성자 함수에 아무것도 넣어주지 않으면 자동으로 현재 시간을 기준으로 moment객체를 생성하고, 그 외에 기존 날짜 객체를 moment로 변환하거나, 문자열로 부터 날짜를 생성할 수도 있다.
2.2. 다른 타입으로 변환하기
1
2
3
4
5
6
7
8
9
10
11
12
const mNow = moment();
// 1. moment -> Date
const dNow = mNow.toDate();
// 2. moment -> String
const formattedDateString = mNow.format("YYYY-MM-DD HH:mm:ss");
// 3. 현재부터 흐른 시간
mNow.fromNow();
// 영문 : a few seconds ago
// 한글 : 몇 초 전
초기화한 moment객체를 Date객체로 바꾸거나, 포매팅된 문자열 객체로 바꿀수도 있다. 문자열로 변경할 때는 자주 사용되는 포맷 문자열을 사용하게되며, HH은 시간을 24시간 체계로, hh는 12시간 체계로 출력하게 된다.
특이한 함수로는 fromNow함수가 있는데, 해당 moment가 갖고있는 일시가 현재로부터 얼마나 차이가 나는지 문자로 출력해주는 함수다. 영문으로 설정되어있는 경우 ‘a few seconds ago’ 혹은 ‘1 hour ago’등의 문자열로 출력된다. 이런 기능에서 영문 뿐만 다양한 언어를 제공하고 있는데 한글도 지원하고 있다. 한글 언어로 변경하는 방법은 아래와 같다.
1
2
3
4
5
6
7
8
9
10
11
// moment-with-locales 파일을 불러온 경우
moment.locale('ko');
// nodejs / react 환경인 경우
// import
import 'moment/locale/ko';
moment.locale("ko");
// require
require('moment/locale/ko');
moment.locale("ko");
2.3. 연산하기
날짜 사이에 차이를 연산하거나, 특정 일자 , 시간 등을 더하거나 뺄 수도 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const mDate = moment("2020-06-17 20:14:00");
// 1. 객체를 복사하기
const mDate2 = mDate.clone();
// 2. 날짜 더하기
mDate2.add(1, "minutes");
// 3. 차이 구하기
// 3.1. milliseconds 단위로 구해준다.
// 주체가 되는 인스턴스보다 타겟이 이전 일 경우 음수, 이후일경우 양수를 반환한다.
mDate.diff(mDate2); // -60000
// 3.2. minutes
// 두번쨰 파라미터에 시간, 분등을 입력하면 해당 부문에 대한 차이도 구해준다.
mDate.diff(mDate2, "minutes"); // -1
날짜를 더하거나 추가하는 것은 add함수를 사용하는데, 해당 함수의 다양한 용법은 링크에서 확인할 수 있다. moment 객체간 차이를 반환하는 diff 함수의 사용법은 여기
이 밖에도 현재 주차가 몇주차인지, 오늘이 무슨 요일인지 등의 다양한 기능들을 제공하고 있으니 날짜를 다뤄야할 일이 생기면 굳이 만들지 말고 빠르게 불러다가 쓰도록 하자
