Moment JS 이란

Moment Library란 무엇인가?

현재 다니는 회사에서 최근 들어 날짜 관련한 로직을 작성하는 일이 굉장히 많았다. 뿐만 아니라 개인적으로 진행하고 있는 사이드 프로젝트에서도 해당 Library를 사용하게 되는 일이 생겨서 겸사겸사 정리하게 되었다. 사실 개인적으로는 이 Library만 잘 사용할 줄 안다고 한다면 달력과 같은 리소스가 큰 라이브러리를 사용할 일도 없거니와 진행하는 비지니스에 최대한 맞게 적용할 수 있다고 생각한다. 일단 공식문서에 따르면 Moment란 브라우저와 NodeJS 서버에서 작동할 수 있도록 설계되었으며, 날짜를 파싱, 벨리데이션, 포맷을 지정할 수 있는 등 쉽게 컨트롤 할 수 있는 자바스크립트 라이브러리이다. 사실 날짜의 포맷이 너무 다양한데다가 실제 벨리데이션을 개발자가 직접하게 되면 코드 역시 늘어날 수 밖에 없으며, 복잡성이 커질 수 밖에 없다. 그러한 문제점을 해결해 줄 수 있는 라이브러리라고 생각하면 된다.

간단한 사용성 비교

만약 Javascript만 이용하여 포맷을 정의하려고 하면 어떻게 해야할까? 기존적으로 많이 사용하는 포맷은 ‘YYYY-MM-DD’ 와 같은 형식일 것이다.

1
2
3

let date = new Date();
let dateObjectToISO = date.toISOString();
let generatedDate = dateObjectToISO.split("T",1);

위의 코드가 이용한다면 원하는 형식으로 뽑아낼 수 있다. 간단한 포맷을 파싱하는 것도 위와 같다면 만약 날짜별로 비교를 해야하거나 하는 경우라면 아마도 그 코드의 복잡성이 점점 커질 것이다. 하지만 위와 같은 코드를 moment를 이용한다면 보다 더 간편하게 구할 수 있다.

1
2

let generatedDate = moment().format('YYYY-MM-DD'); // 'YYYY-MM-DD'
let generatedDateWithTime = moment().format('YYYY-MM-DD HH:mm'); // 'YYYY-MM-DD HH:mm'

위와 같이 간단한 코드만 보더라도 그 사용성 및 코드 자체가 굉장히 직관적일 수 있다는 것을 알 수 있다.

유용한 Method

Moment는 그 공식 홈페이지를 가도 굉장히 문서 자체가 잘 되어 있어, 문서만 봐도 어느 정도 필요한 것을 찾아낼 수 있다. 그 중에서 실제 진행하며 유용하다고 느꼈던 몇 가지의 Method에 대해서 설명한다.

1. 현재 시간 혹은 원하는 날짜의 시간 구하기

   1 2 3

   let currentDate = moment(); let christmasDate = moment('2018-12-25'); let specialDate = moment('2000-01-01');

위와 같이 하는 경우 각 변수는 moment 객체로 해당 타겟의 날짜로 생성이 된다.

2. 날짜의 포멧 지정하기

   1 2	let currentDate = moment().format('YYYY-MM-DD'); let currentDateWithTime = moment().format('YYYY-MM-DD HH:mm:ss');

아마도 화면을 개발하는 입장에서 제일 신경 쓰이는 일이 날짜의 포멧을 가공하는 일이 아닐까 싶다. 그러한 입장에서 보면 format 메소드는 아주 유용한 메소드라고 볼 수 있다. 위와 같이 딱 하나의 메소드만 써준다면 아주 편하게 원하는 포멧으로 날짜를 뽑을 수 있다.

3. 지정한 날짜가 특정일보다 앞서 있는지를 비교하기

   1 2 3 4

   let targetedDate = moment(); let diffTargetDate = moment('2017-12-25'); let diffValue = targetedDate.diff(diffTargetDate); let duration = targetedDate.diff(diffTargetDate, 'day');

위와 같은 경우에는 diffValue 가 0 보다 크다면 diffTargetDate 보다 targetedDate 가 미래이지만 만약 0 보다 작다면 diffTargetDate 보다 targetedDate 가 과거일 것이다.
duration의 경우 몇일 차이가 나는지를 계산하여 number로 그 값을 return 시켜준다.

4. 원하는 날만큼 원하는 형식으로 더하거나 빼기

   1 2 3 4 5

   let futureDate = moment().add(10, 'days'); let pastDate = moment().subtract(10, 'days'); let futureMonth = moment().add(3, 'months'); let pastMonth = moment().subtract(3, 'months');

5. 이전달 30일 구하기

   1 2	const lastMonthEndDate = moment().subtract(1, 'months').endOf('month').toDate(); const lastMonthStateDate = moment().subtract(1, 'months').startOf('month').toDate();

달력의 shortcut 같은 기능을 추가하다보면 최근 30일 외에도 이전달의 30일 같은 기능을 구현해달라는 요청을 받을 수 있다. 두가지의 차이점은 오늘을 기준으로 30일이냐(최근 30일) 혹은 이전달 한달(지난달 30일) 이냐의 차이가 있다. 지난 달 30일의 경우 오늘이 7월이다 라고 한다면 6월 1일부터 6월 30일 한달의 날짜를 구해야한다. 그러한 경우 위와 같이 startOf 와 endOf 메소드를 사용하면 쉽게 구할 수 있다. 이 메소드를 이용한다면 지난 7일 등을 구하기도 어렵지 않다.

출처

• Moment Github