moment.js 대신 date formater 만들어서 사용하기!

moment.js를 사용하다가 현재 프로젝트에서 빠지게 되어서 만들어보게 되었습니다.

moment.js 와 비슷하게 커스텀 변환하기

자신이 원하는 형태를 입력하여 변환해주는 함수를 제작해보았습니다.

/**
 * DATE FORMATER
 * @param {*} date 날짜 데이터 | null
 * @param {*} format [1234년 5월 6일 7시 8분 9초] 기준 예시
 * (년) YY: 34  | YYYY: 1234
 * (월) M: 5    | MM: 05
 * (일) D: 6    | DD: 06
 * (시) h: 7    | hh: 07
 * (분) m: 8    | mm: 08
 * (초) s: 9    | ss: 09
 * @returns 
 */
const moment = (date, format) => { // YYYY-MM-DD hh:mm:ss
  const data = date ? new Date(date) : new Date()
  if (!format) format = 'YYYY.MM.DD HH:mm'
  const addZero = (num) => {
    if (num < 10) {
      return `0${num}`
    }
    return num
  }
  
  const YYYY = data.getFullYear()
  const YY = YYYY.toString().substring(2, 4)
  const M = data.getMonth() + 1
  const MM = addZero(M)
  const D = data.getDate()
  const DD = addZero(D)
  const h = data.getHours()
  const hh = addZero(h)
  const m = data.getMinutes()
  const mm = addZero(m)
  const s = data.getSeconds()
  const ss = addZero(s)

  return format
    .replace('YYYY', YYYY)
    .replace('YY', YY)
    .replace('MM', MM)
    .replace('M', M)
    .replace('DD', DD)
    .replace('D', D)
    .replace('hh', hh)
    .replace('h', h)
    .replace('mm', mm)
    .replace('m', m)
    .replace('ss', ss)
    .replace('s', s)
}

 

특정 형태로만 변환해주기

만약 형태가 고정되어있다. 혹은 몇개 안된다 싶으면 이 코드가 더 사용하기 편리한 것 같습니다.

const dateFormat = (value, express) => {
  if (!value) return '-'

  const date = new Date(value)
  const addZero = (num) => {
    if (num < 10) {
      return `0${num}`
    }
    return num
  }
  const YYYY = date.getFullYear()
  const MM = addZero(date.getMonth() + 1)
  const DD = addZero(date.getDate())
  const HH = addZero(date.getHours())
  const min = addZero(date.getMinutes())

  switch (express) {
    case 'hyphen':
      return `${YYYY}-${MM}-${DD} ${HH}:${min}`
    case 'kor':
      return `${YYYY}년 ${MM}월 ${DD}일 ${HH}:${min}`
    default:
      return `${YYYY}.${MM}.${DD} ${HH}:${min}`
  }
}

 

코드를 만들면서 후기..

처음에는 moment 처럼 만들 생각을 하지 못하였습니다..

초반에는 형식이 한가지로 고정되어 있었고, 확장성을 고려하지 않았습니다.

그러다 3가지가 되었고, switch를 사용하여 추가하는 형태로 변경되었습니다.

 

하지만 해당 코드를 확인하러 들어가지 않는다면 어떤 parameter를 넘겨야 원하는 형태가 나오는지 확인하기 쉽지 않다고 생각이 들었습니다.

그래서 moment처럼 변환해주는 함수를 만들자고 생각이 들게 되어 만들었습니다..

 

머리가 커졌다고 자만하지말고, 라이브러리가 아무리 많고 잘 되어 있다고 해도 스스로 만들어보거나 해당 라이브러리를 뜯어보는 방법이 해당 라이브러리를 더 잘 사용할 수 있다고 생각이 들었습니다.

 

간단한 라이브러리 정도는 사용하는 내장 함수가 몇개 없다면 위와 같이 만드는게 더 효율적이기도 하구요.