모던웹(NEMV) 혼자 제작 하기 3기 - 61 시간 계산하기(moment)

시간 2월28일 23:50:55 에서 1시간이 더해지면 어떤 시간일까요?

3월1일 0:50:55 가 될 수도 있고 2월29일 0:50:55 가 될 수도 있습니다.

문자열 가지고 처리하게되면 윤달 계산부터 무슨 요일인지 구해내기가 여러가지로 복잡합니다.

시간 관련 모듈중 최고의 인기를 누리고 있는 모먼트(moment)에 대해 알아봅니다.

참고: https://www.npmjs.com/package/moment

주간 다운로드수가 백사십만입니다.(express는 백오십만..)

앞으로 시간 관련 문제는 계속 나올 것이기 때문에 딱 필요한 기능만 알고 넘어갑시다.

모먼트란?

시간 표현, 계산등을 편리하게 사용할 수 있습니다.

기존 자바스크립트 의 시간 변수(new Date()) 도 있지만, 조금 다루기가 불편한 부분이 있습니다.

설치

$ cd be && yarn add moment
$ cd .. && cd fe && yarn add moment

백/프론트 다 설치하는 것이 좋습니다.

사용해보기

모먼트에는 엄청 다양한 기능들이 있습니다.

참고: https://momentjs.com

하지만 필요한 부분만 사용해보도록 하겠습니다.

선언

be/app.js

const moment = require('moment')
console.log(moment()) // moment("2018-11-09T17:40:23.597")
console.log(moment().toDate()) // 2018-11-09T08:41:09.354Z

• moment() 라고 쓰는 순간 현재 시간이 됩니다.
  new Date()도 비워놓고 쓰면 현재 시간이죠?
• moment().toDate() === new Date() 는 같습니다. 자스 기본 데이트형식으로 바꾸는 기능입니다.

값 가져오기

console.log(moment().format('YYMMDD')) // 181109
console.log(moment().hours()) // 17

어떤식으로 가져오는지만 알려드립니다. 실제 더 원하는 기능은 공홈에 가면 아주 쉽게 설명되어있습니다.

값 설정하기

console.log(moment().hours(3).toLocaleString()) // 3시로 설정: Fri Nov 09 2018 03:06:27 GMT+0900
console.log(moment().add(33, 'minutes').toLocaleString()) // 33분 후: Fri Nov 09 2018 18:39:27 GMT+0900

이런식으로 설정도 가능하다는 것이죠.(대부분 getter, setter 설정이 되어있는 함수임)

한글화

moment.locale('ko')

얼마나 되었나

console.log(moment().fromNow()) // a few seconds ago
console.log(moment().add(-5, 'hours').fromNow()) // 5 hours ago
console.log(moment().add(5, 'hours').fromNow()) // in 5 hours

게시물에서 많이 쓰이는 기능이죠~

한글화

moment.locale('ko')
console.log(moment().fromNow()) // 몇 초 전
console.log(moment().add(-40, 'hours').fromNow()) // 2일 전
console.log(moment().add(10, 'hours').fromNow()) // 10시간 후

한글화도 정말 간단하죠?

시간 비교

const ct = moment() // 현재시간
const bt = moment().add(-1, 'hours') // 한시간전

console.log(ct.diff(bt)) // 3600000
console.log(ct.diff(bt,'seconds')) //3600

console.log(bt.diff(ct)) // -3600000
console.log(bt.diff(ct,'seconds')) //-3600

시간 차 구하기도 매우 쉽습니다.

사실 이 기능 때문에 강좌를 만들 었습니다. 다음 강좌 토큰 재발급 시간 차이 구해야해서..

마치며

특히 모먼트가 빛을 바랄 때는 사이트를 국제화 시킬 때입니다.

유럽, 중국, 한국 3군데 서비스를 할때 시간 개념이 매우 헷길릴 수 있는데.. 모먼트가 큰 도움을 줍니다.

더 많은 기능은 공식사이트에서 십분정도만 둘러보시기를 추천합니다.(앞으로 이런 걸 쓰면 좋겠구나~ 정도로만… 어짜피 다 까먹습니다.)

실제 코딩할때 마다 필요한 부분을 찾아서 적용하시기 바랍니다.

현재 프로젝트에서 필요한 기능은 fromNow() 와 diff() 밖에는 아직 생각나는 것이 없네요..

영상