Day.js (dayjs) 라이브러리 사용하기

"라이브러리에 패배한 나" 라는 말과 함께 시작하고 싶다.

 

윤달과 윤년에 대해 아는가...? 그냥 한참 전인가 언젠가 C언어 수업에서 윤달과 윤년까지 고려해

 

달력을만드는 알고리즘을 짰던 기억이있다. 뭐 사실 까다로울 뿐이지 불가능한 수준의 구현은 아니었다.

 

하지만 이런기억.. 이제는 잊는게 좋다.

 

프론트엔드 화면 구현중 datePicker를 사용해야 하는 상황이 있었다.

 

결론만 말하면 2023.07.17 - 2023.08.17 의 형태로 정확히 한달 간격의 선택을 해야하는 상황이 있었다.

 

시나리오로 따지면 오늘로부터 정확히 한달전 참 모호하다.

 

오늘이 17일이면 월만 1을 빼면되나..? 만약 31일이면 2월 31일은 없는데? 날짜가 의외로 여러 예외사항이

 

매우많았다.

 

let day1 = '2023.07.17'

let day2 = '2023.08.17'

정확히 이와같은 데이터를 뽑을 수 있는 방법이 있을까....?

 

정답은, 라이브러리에 굴복해 열심히 사용하자였다.

1.datePicker란?

https://mui.com/x/react-date-pickers/date-picker/

https://jqueryui.com/datepicker/

위와같이 특정 날짜를 고르는 녀석을 말한다. 흔히 생년월일이나 뭐 언제부터 언제까지 조회할 때 사용하는

 

녀석이다. 이러한 녀석은 아래와같이 데이터가 저장된다.

 

콘솔에서 new Date()를 찍어보면 위와같이 나오는데 이러한녀석을 여러 포맷으로 변경해 사용하고 싶을 

 

때 가 있다. ex) 2023-08-17, 2023.08.17, 08.17 등....

 

이런걸 직접 구현 하려고 했던 나자신에게 경의를 표하고싶다. 심지어 일부는 만들기 까지 했다.

 

그러다 문득 시간에 압박에 쫒기는 와중 생각이 들었다.

 

"누군가가 만들지 않았을까...?"

 

그렇게 바로 발견하게된 day.js라는 라이브러리가 있다.

 

2.Day.js라이브러리 설명

new Date()
// "2023-08-17T13:09:08.396Z"

위와같이 나온 데이터를 아주쉽게 여러 포맷으로 바꾸는 기능을 가진 라이브러리다 그리고 그와 별도로

 

여러가지 '연산'까지 가능하다.

 

- 1)설치하기

https://www.npmjs.com/package/dayjs

npm install dayjs

- 2)사용하기

나는 next.js에서 사용했다. 아래와같이 사용해준다.

import dayjs from "dayjs";
export default function Home() {
  let today = dayjs();
  console.log(today.format());
  return (
    <div>
      <h1>테스트</h1>
    </div>
  )
}

//콘솔출력
//2023-08-17T22:17:22+09:00

new Date()와 거의 유사하다. 이제 여기서 여러가지 응용을해서 사용할 수 있다.

 

- 3)포맷변경해서사용하기

아래와같이 원하는 형태로 포맷을 변경해서 사용할 수 있다.

  let format1 = today.format("YY-MM-DD");
  let format2 = today.format("DD/MM/YY");
  let format3 = today.format("MM.DD");
  console.log(format1)
  console.log(format2)
  console.log(format3)
  
// 23-08-17
// 17/08/23
// 08.17

 

- 4)연산하기 (한달전,일주일전 등...)

아래와 같이 연산한걸 또 format을 바꿔도 사용할 수 있다.

  let subtract1 = today.subtract(1, "month").format();
  let subtract2 = today.subtract(1, "M").format();
  let subtract3 = today.subtract(1, "week").format();
  let subtract4 = today.subtract(1, "w").format();
  let subtract5 = today.subtract(1, "day").format();
  let subtract6 = today.subtract(1, "d").format();
  console.log(subtract1)
  console.log(subtract2)
  console.log(subtract3)
  console.log(subtract4)
  console.log(subtract5)
  console.log(subtract6)
  
//2023-07-17T22:23:45+09:00
//2023-07-17T22:23:45+09:00
//2023-08-10T22:23:45+09:00
//2023-08-10T22:23:45+09:00
//2023-08-16T22:23:45+09:00
//2023-08-16T22:23:45+09:00

 

 

- 참고한글

https://ko.javascript.info/date

Date 객체와 날짜

https://jsikim1.tistory.com/196

day.js 사용 방법 - JavaScript 날짜 라이브러리