1. 들어가며

Moment js는 시간이 포함된 데이터를 받아 조작해야 할 경우 사용하기 좋은 라이브러리입니다.

저의 경우 차트를 그릴 때 서버에서 한 시간 마다의 판매량, 매출과 같은 시간별 정보를 넘겨주었는데요.

  • 날짜별 데이터를 뽑고 싶다.
  • 특정 기간 동안의 데이터를 뽑고 싶다.

와 같은 니즈가 있었습니다.

자바스크립트에는 기본적으로 Date 객체가 있고 Date 객체에 내장된 다양한 함수들이 있는데요.

const now = new Date() now.toISOString().slice(0,10) 
// "2019-10-27"
const current = new Date() current.toISOString() 
// "2019-10-27T08:30:26.284Z"

사실 Date 객체를 이용해서 시간 데이터를 다루어 무언가를 해본 경험이 없습니다. Moment js 가 최고야!라는 이야기를 듣고.. 팔랑귀인 저는 묻지도 따지지도 않고 moment js를 사용했답니다ㅎ

오늘은 Moment js에서 제가 사용한 몇 가지 함수들을 소개하고자 합니다.

  • Moment js는 공식문서가 매우 잘 되어있습니다! 실제로 필요한 함수들은 공식문서를 참고하시면 훨씬 더 좋을것같아요.
    https://momentjs.com/docs/

2. 포멧팅 하기

2.1 moment.format()

moment js에서는 Date 객체 대신 Moment라는 객체를 사용합니다.

날짜를 콘솔에 출력하기 위해서는 Moment 객체를 format()이라는 함수를 사용해주어야 합니다.

moment js의 인자로는 굉장히 다양한 타입이 들어갈 수 있습니다. 실제로 회사에서 사용할 때는 인자로 string만 넣었는데요. 공부해보니 이렇게 format까지 같이 넣을 수도 있네요.

  1. 첫 번째 인자와 같은 format은 넘길 필요가 없는 것 같습니다.
  2. '12-24-2018'처럼 개떡같이 넣어도 찰떡같이 알아듣네요.
  3. 두 번째 인자로 format을 같이 넣는 경우. format() 함수와 차이점은 출력 형태이네요.
    • 조금 더 구체적으로 설명하면 두 번째 인자로 format을 넣으면 moment 객체의 d가 바뀌고, .format()는 출력 형태를 어떻게 보여줄지를 변경한다고 할 수 있습니다.
    console.log(moment('2018-12-24',"MM-DD-YYYY").format())
    console.log(moment('12-24-2018',"MM-DD-YYYY").format())
    console.log(moment('2018-12-24',"YYYY-MM").format()) 
    console.log(moment('2018-12-24').format("YYYY-MM"))

    Invalid date 
    2018-12-24T00:00:00+09:00 
    2018-12-01T00:00:00+09:00 
    2018-1

3. 시간 데이터 조작하기

날짜별 데이터를 뽑을 때는 이런 식으로 filter 와 같이 사용하였습니다.

const dayTimeData = timesData.filter(timeData => moment(timeData.statAt).startOf('day').isSame(dayTime, 'day')) 
const weekTimeData = timesData.filter(timeData => moment(timeData.statAt).isSameOrAfter(lastWeek) && moment(timeData.statAt).isBefore(today))

어제 데이터를 뽑을 때는

moment().subtract(1, 'days').startOf('day')

조금 더 구체적으로 각 메서드를 확인해 볼까요?

3.1 moment().startOf('String')

시작을 00시로 맞춰줄 때 사용하였습니다.

const today = moment().startOf('day')

특정 날짜의 데이터를 뽑고 싶을 때 startOf를 사용하였습니다.

const dayTimeData = timesData.filter(timeData => moment(timeData.statAt).startOf('day').isSame(dayTime, 'day'))

3.2 moment().add , subtract

저는 특정 날짜의 데이터를 가져오는데 사용해서 그런지 add, subtract 함수는 거의 startOf와 함께 사용하였습니다.

const yesterday = moment().subtract(1, 'days').startOf('day') 
// 차트의 시간축에서 첫날과 마지막 날을 지정할 때 사용한 로직입니다. 
const dayAxis = makeTimeAxis('day', null, moment().add(1, 'days').startOf('day'))

3.3 moment().diff

const term = today.diff(lastWeek, 'days')

날짜를 차이로 알고 싶은 경우 'days'를 두 번째 인자로 넣어주면 됩니다.

3.4 moment().isSame , isBefore, isBetween

특정 시간을 뽑아낼 때 사용하는 함수입니다.

const term = today.diff(lastWeek, 'days')
const dataByDate = []
// 7일간의 데이터
const weekTimeData = timesData.filter(timeData => moment(timeData.statAt).isSameOrAfter(lastWeek) && moment(timeData.statAt).isBefore(today))

// 날짜별 24시간 데이터배열 수집
for (let i = 0; i < weekTimeData.length; i += 24) {
    dataByDate.push(weekTimeData.slice(i, i + 24))
}
// 일주일간의 데이터 시간별(24) 수집
for (let j = 0; j < term; j++) {
    for (let i = 0; i < 24; i++) {
        weekActiveRate[i] += dataByDate[j][i].activeTime / dataByDate[j][i].deployTime / term * 100
    }
}

4. 그 외에

5. 마무리하며

다 알려고 하지 말고, 왜 이렇게 해야 하는지 의심하지 말고 요구하는 형식에 딱 맞춰서 사용하는 법을 배워야 시간 내에 해결할 수 있을 것 같다는 생각이 드네요 ㅠ 저는 일할 땐 너무 궁금해하면 안 되겠어요.