2022-06-16-TIL

date-fns

미니프로젝트 진행 중 데이터 중 날짜 데이터가 있어서 날짜를 가공하기 위해 date-fns 라이브러리를 사용해보기로 했다

$ npm i date-fns

format()

api로 받아오는 데이터는

이런식으로 저장되어있다

기본적으로 date를 원하는 형식으로 출력할수있는 메소드 format()이 있다
format()은 2개의 인수가 필수고 option으로 다른 값들을 넣어 줄 수 있다
첫 번째는 변경할 date
두 번째는 원하는 format 이다

format(new Date(), 'yyyy.MM.dd HH:mm')
// 2022.06.16 02:47

받아온 데이터를 yyyy.MM.dd HH:mm형식으로 바꿔보자

format(pub_date, 'yyyy.MM.dd HH:mm')

으로 작성 했더니 error를 뱉어 냈다

v2.0.0-beta 부터 문자열을 허용하지 않는다고 하면서 parseISO를 사용해달라고 한다

format(parseISO(pub_date), 'yyyy.MM.dd HH:mm')

이렇게 작성해 줬더니 잘 된다.

differenceInDays() , differenceInHours()

데이터가 작성된 날짜와 현재의 날짜를 비교해서 얼마전에 작성되었는지도 출력해주기 위해 differenceInDays() , differenceInHours() 도 사용해 주었다

두 메소드 다 비교할 날짜 2개를 인수로 넣어 준다

const result = differenceInHours(
  new Date(2014, 6, 2, 19, 0),
  new Date(2014, 6, 2, 6, 50)
)
//=> 12

differenceInDays()를 사용하면 작성된 날짜와 현재 날짜가 같으면 0이 반환 되기 때문에
differenceInHours()를 사용해 날짜가 같으면 시간으로 표시 해 준다

함수로 만들어 조건에 맞게 출력할 수 있도록 해준다

const dateFunc = (pub_date) => {
  if (Math.abs(differenceInDays(parseISO(pub_date), new Date())) > 0) {
    return (
      Math.abs(differenceInDays(parseISO(pub_date), new Date())) + ' 일 전'
    );
  } else {
    return (
      Math.abs(differenceInHours(parseISO(pub_date), new Date())) + ' 시간 전'
    );
  }
};