코드를 작성하다 보면 날짜나 시간을 가져다가 써야하는 경우가 많은데 이럴 때 가장 편리하면서도 손쉬운 방법을 찾아 정리하기위해 남긴다!
일단 가장 먼저 떠올릴 수 있는 방법은 자바스크립트의 기본 객체인 Date()를 사용하는 방법이다.
나도 제일 처음 이 방법을 떠올렸고 getHours니 getMinutes니 toLocaleTimeString이니 코드가 너무 길어지고 원하는 형식으로 불러오기 위해서는 이건 아닌것 같다는 생각이 들던 차에 Hugo의 친절한 dayjs 정리를 통해 dayjs를 접할 수 있었다!
Dayjs란?
공식문서:
https://github.com/iamkun/dayjs/blob/dev/docs/ko/README-ko.md
https://day.js.org/en/
날짜나 시간을 간단하게 표현할 수 있는 라이브러리다.
원래는 가장 많이 쓰이던 moment.js 라이브러리의 API형식을 그대로 가져오면서 용량은 33배정도 가벼워졌다고 한다.
(moment.js는 이미 개발도 중단했다고 한다...!)
나도 아직 모든 기능을 써 본것은 아니고 간단히 날짜, 시간 등을 여러 형식으로 사용해봤는데 구체적인건 위의 공식문서를 참고하기로하고 직접 썼던 예시를 보자!
import dayjs from 'dayjs';
import 'dayjs/locale/ko';
import 'dayjs/plugin/weekday';
import week from 'dayjs/plugin/weekOfYear';
dayjs.locale('ko');
dayjs.extend(week);
export const dayjsNow = () => {
return dayjs().format('YYYY-MM-DD HH:mm:ss');
};
export const nowYear = () => {
return dayjs().year();
};
export const nowMonth = () => {
return dayjs().month() + 1;
};
export const nowDate = () => {
return dayjs().date();
};
export const nowTime = () => {
return `${dayjs().hour()}:${dayjs().minute()}:${dayjs().second()}`;
};
export const nowDateArray = () => {
return [nowYear(), nowMonth(), nowDate()];
};
export const todayYearMonthDate = () => {
return dayjs().format('YYYY-MM-DD');
};
export const yesterdayYearMonthDate = () => {
const yesterday = `${nowYear()}-${nowMonth()}-${nowDate() - 1}`;
return dayjs(yesterday).format('YYYY-MM-DD');
};
export const dayOfWeek = () => {
return dayjs(todayYearMonthDate()).day();
};
export const weekOfYear = () => {
return dayjs().week();
};
export const timeLag = (fromDayString: string, subDayString: string) => {
const time = dayjs(subDayString).valueOf() - dayjs(fromDayString).valueOf();
const hour = Math.floor(time / (60 * 60 * 1000));
const minute = Math.floor((time / (60 * 1000)) % 60);
const seconds = Math.floor((time / 1000) % 60);
const workedTime = `${hour}:${minute < 10 ? '0' + minute : minute}:${seconds < 10 ? '0' + seconds : seconds}`;
return workedTime;
};
export const milliSecondsLag = (fromDayString: string, subDayString: string) => {
const time = dayjs(subDayString).valueOf() - dayjs(fromDayString).valueOf();
return time;
};(혼자 깔끔하게 정리해준 Hugo에게 감사를..! 🙏🏻)
이런식으로 한 번만 정리를 해두면 내가 원하는 포맷? 원하는 형식으로 아무렇게나 가져다 쓰는 것이 가능하다!
ex) 가장 기본적인 포맷인 '년-월-일 시-분-초' 형식을 가져다 쓴다고 하면
사용하고 싶은 컴포넌트로 가서 dayjsNow를 import해준 뒤 사용하고 싶은 곳에 dayjsNow()를 입력하면 끝!
사용후기?
사용하다보니 원하는 형식으로 미리 만들어놓고 사용하는것이 더 간편한건지 dayjsNow의 형식처럼 길게 만든 뒤 slice같은 메서드를 통해 잘라서 사용하는게 더 간편한건지 아직 잘 감이 안온다..!
(또한 AM/PM을 사용하고 싶은데 한국 시간대로 설정해놓으니 오전/오후 처럼 한글로 나오는 것도 함정..!)
dayjs 공식문서에도 아직 내가 사용해보지 못한 기능들이 많이 들어있던데 확실히 이것 저것 많이 경험해보는 게 도움이 많이 되는 것 같다.
steve는 위치정보를 불러오는 geolocation이라는 API를 사용하던데.. 옆에서 많이 보고 듣고 내 걸로 만들어야겠다😤
