dayjs

프로젝트를 작업하면서 시간에 대해 복잡하게 다뤄야하는 부분이 있었다.
직접 구현을 할까 하던 중 시간을 표현하기도 편하고 용량도 크지 않아 사용하기 적합한 라이브러리 dayjs를 발견하여 공부해보고 도입하기로 하였다.

dayjs는 ISO 8601 형식의 날짜를 원하는 형식으로 반환해준다.

설치

설치법은 간단하다. dayjs 라이브러리를 설치해준다. 아래가 끝이다.

yarn add dayjs

npm install dayjs

Format

console.log(dayjs('1996-05-20').format(YYYY/D/MM)) => 1996/5/20

위와 같이 사용할 수 있다. 자유롭게 사용하기 위해서는 FormatList 를 확인하도록 하자.

계속 까먹고 헷갈렸던건 HH와 hh 의 포맷 차이였다.
HH는 시간을 24시간 기준으로 나태는 것이다.
hh 는 시간을 12시간 기준으로 나타내는 것이다.
따라서 hh를 이용해서 표현한다면 A (오전/오후) 가 필수다.

dayjs('1996-05-20 11:45').format('YYYY/MM/DD A hh:mm')=>1996/05/20 AM 11:45

Manipulate

dayjs 제공 함수를 이용해서 시간을 더하고 빼는 것 또한 할 수 있다.

Add, Subtract 등을 이용해서 시간 계산을 할 수 있는데 시간계산에 아주 유용하다.

만약 시간계산 함수가 따로 없다면 우리는 연도, 월, 일 의 상태값을 각각 따로 받아 계산을 해준뒤 다시 원하는 형태로 합쳐야 했을 것이다. 하지만 우리는 오늘로부터 245일 뒤의 날짜를

dayjs().add(245,'day').format('YYYY/MM/DD) 

이 한 문장으로 끝낼 수 있기 때문에 dayjs를 더욱 유용하게 쓰는게 아닌가 싶다.

나 또한 시간 설정을 해주어야하는 부분에서 해당 함수의 도움을 많이 받았다.

Locale

코드를 작성하다보면 locale을 사용해야하는 부분이 있다. 다국어 작업을 하고 있다면 그 나라의 언어에 맞게 시간을 표기해야 할 것이고 다국어 작업이 아니더라도 오전 오후는 한국에서도 AM/PM 으로 표기하는 곳이 많기 때문에 dayjs를 사용한다면 필수로 알아야 하는 것이 locale 부분이다.

locale 하는 방법은 굉장히 쉽다. 아래와 같은 방법으로 하면 된다.

dayjs.locale('en')

위와 같이 선언해주면 전체가 영어로 표기 된다.

이렇게 끝나면 좋겠지만 가끔 다른 요구 사항을 만나게 된다.
아래의 예시는 이번 프로젝트에서 디자이너님이 제시해주신 format 이다.

2022-10-27 (수) PM 3:30 

위와 같은 형식은 한글과 영어가 섞여있다. 그렇다면 어떻게 해야할까??
아래는 ko 일 때의 locale의 속성을 변경해준 것이다.

dayjs.locale('en', {
  weekdays: ['일', '월', '화', '수', '목', '금', '토'],
});

정답은 custom locale 이다. locale 자체를 변환해주면 된다.

locale 은 공식문서에서 찾지 못했지만 ( 찾으려 했지만 보이지가 않는다... ) default 가 'en'으로 되어있는 것으로 보인다.

따라서 locale이 'en'으로 설정되어 있을 때 weekdays를 위처럼 한글로 변경해준다면 정상적으로 작성되는 것을 확인할 수 있다.

페이지 최상단에 선언하면 페이지 전체가 적용되기 때문에 부분적으로 적용하고 싶다면 컴포넌트 내에 선언해주어야 한다.

항상 잊지말자 공식문서에는 답이 있다!