[라이브러리] 날짜 및 시간을 다룰 때 유용한 Day.js

📅 Day.js란

Day.js 로고

Day.js 라이브러리는 최신 브라우저에서 날짜와 시간에 대해 구문 분석, 유효성 검사, 조작, 출력과 같은 기능을 간편하게 처리하는 2KB의 아주 가벼운 자바스크립트 라이브러리입니다.

- 공식 깃허브 설명(한국어)

날짜 및 시간(이하 날짜)을 다루는 라이브러리에는 'moment.js'도 존재합니다.

day.js보다 훨씬 많은 날짜 연산을 지원하지만, 235KB이라는 큰 용량과 사용되는 연산보다 그렇지 않은 연산이 더 많다는 문제점이 있습니다.

(큰 용량의 단점: 다운로드 시간! 네트워크 비용! 렌더링 시간! 모두 증가)

 

따라서 공식 문서에서도 moment.js을 대체할 수 있는 라이브러리를 소개하고 있고, 그중 하나가 바로 day.js입니다.

현재 공식적으로 moment.js는 더이상 업데이트를 이어나가지 않을 것이라는 계획을 밝혔습니다.

 

---

📅 적용한 코드1 - 경과 시간

기존에는 게시글 및 댓글이 작성된 시점을 기준으로 현재까지의 경과 시간을 계산하기 위해 아래와 같은 코드를 타입스크립트로 직접 작성하였습니다.

// getTimeElapsed.ts 파일

const getTimeElapsed = (updatedTime: Date) => {
  const milliSeconds = new Date().getTime() - updatedTime.getTime();

  const seconds = milliSeconds / 1000;
  if (seconds < 60) return `방금 전`;

  const minutes = seconds / 60;
  if (minutes < 60) return `${Math.floor(minutes)}분 전`;

  const hours = minutes / 60;
  if (hours < 24) return `${Math.floor(hours)}시간 전`;

  const days = hours / 24;
  if (days < 7) return `${Math.floor(days)}일 전`;

  const weeks = days / 7;
  if (weeks < 5) return `${Math.floor(weeks)}주 전`;

  const months = days / 30;
  if (months < 12) return `${Math.floor(months)}개월 전`;

  const years = days / 365;
  return `${Math.floor(years)}년 전`;
};

export default getTimeElapsed;

게시글 및 댓글이 업데이트 된 시간을 파라미터로 받아 현재 시간과의 차이(밀리초)를 구하고,

가장 작은 단위인 밀리초부터 분-시간-일-주-월-연 순으로 나누어 경과한 시간을 리턴합니다.

 

day.js를 적용한다면 위와 같은 긴 연산을 몇 줄로 줄일 수 있습니다.

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/ko";

dayjs.extend(relativeTime);
dayjs.locale("ko");

const getTimeElapsed = (updatedTime: Date) => {
  return dayjs(updatedTime).fromNow();
};

export default getTimeElapsed;

간단한 코드 설명은 아래와 같습니다.

dayjs.extend(relativeTime);
dayjs.locale("ko");

relativeTime은 day.js의 플러그인으로, 시간을 n분 전/n시간 전/... 등 상대적인 시간으로 변환해줍니다.

로케일을 "ko"로 설정하여 시간이 한국어로 출력되게 만듭니다.

const getTimeElapsed = (updatedTime: Date) => {
  return dayjs(updatedTime).fromNow();
};

fromNow() 메서드를 사용하여 updatedTime부터 현재 시간까지의 차이를 계산하고, 이를 상대적인 시간으로 반환합니다.

 

---

📅 적용한 코드2 - 날짜 형식 변환

기존에는 "2024-08-28T14:22:34Z"와 같은 형식의 날짜 문자열을 파라미터로 받아와

띄어쓰기가 들어간 "2024. 08. 28"의 형태로 만들기 위해 아래와 같은 코드를 타입스크립트로 직접 작성하였습니다.

// formatDate.ts 파일

function formatDate(createdAt: string) {
  const uploadDate = new Date(createdAt);

  const formattedDate = uploadDate.toLocaleDateString("ko-KR", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });

  const finalDate = formattedDate.replace(/\.$/, "");

  return finalDate;
}

export default formatDate;

한국어 로케일을 사용하여, 연/월/일을 4자리, 2자리, 2자리 숫자로 표현하도록 지정합니다.

이후 숫자 중간에 띄어쓰기를 넣고 마지막 점을 없애기 위해서는 추가적인 연산이 필요합니다.

 

day.js를 적용한다면 변환하고 싶은 날짜 형식을 아주 쉽게 지정할 수 있습니다.

import dayjs from "dayjs";
import "dayjs/locale/ko";

dayjs.locale("ko");

const formatDate = (createdAt: Date) => {
  return dayjs(createdAt).format("YYYY. MM. DD");
};

export default formatDate;

formatDate 함수만 자세히 보겠습니다.

const formatDate = (createdAt: Date) => {
  return dayjs(createdAt).format("YYYY. MM. DD");
};

format("원하는_날짜_형식") 메서드를 사용하여, 기존의 형식을 사용자가 지정한 형식에 맞는 형식으로 바꿔줍니다.

위의 코드에서는 "YYYY. MM. DD" 형식으로 지정했기 때문에

"2024-08-28T14:22:34Z"가 -> "2024. 08. 28"의 형태로 변환됩니다.

 

추가적인 메서드는 다음 블로그를 참고해주세요

 

---

읽어주셔서 감사합니다:)