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에서 제가 사용한 몇 가지 함수들을 소개하고자 합니다.

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 

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')

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

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

3.1 moment().startOf(‘String’)

    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. 그 외에

  • moment 라이브러리가 아니라 moment-timezone 을 깔았는데 moment의 내장 함수를 다 사용할 수 있다고 합니다.
  • 월별 시작, 마지막 일 찾기
  • moment 라이브러리를 사용하면 자동으로 서울 시간으로 자동으로 맞춰줍니다.

5. 마무리하며

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

dxvinci's profile image

dxvinci

2020-01-01

Read more posts by this author