날짜 라이브러리에 대한 고민

[DongjaJ]

현재 개발 속도가 많이 밀려 있어서 날짜를 파싱하는 라이브러리를 사용할까 합니다.

여러가지 후보를 찾아본 결과 moment, day.js, js-joda, date-fns등이 존재하는 것 같습니다.

1. moment : 가장 많은 npm trends를 보여주지만 deprecate됐기 때문에 제외했습니다.
2. day.js: moment다음으로 가장 활발한 라이브러리 같습니다. 가장 가볍고 성능도 무난하지만 트리 셰이킹이 되지 않습니다
3. js-joda: 기능이 많지만 moment만큼 무겁고 저희 프로젝트에는 필요하지 않은 것 같아서 제외해도 될 것 같습니다.
4. date-fns: day.js보다 약간 무겁지만 성능이 좋고 트리 셰이킹을 지원합니다.

저는 date-fns를 사용하는게 어떤가 싶은데 여러분 의견이 궁금합니다.

참고 링크: https://yceffort.kr/2020/12/why-moment-has-been-deprecated

[sukvvon]

dayjs나 datefns 둘 중에 하나 쓰면 될 것 같습니다!! datefns의 tree-shaking이 가능한 점이 무척이나 끌리는군요...

[kutta97]

제가 이해하기로는 저희 프로젝트에서는 날짜를 파싱해야하는 경우가 한정적이며,
라이브러리를 사용하지 않아도 간단하게 날짜 파싱이 가능할 것 같습니다! 🙋‍♀️

또한, 날짜 라이브러리를 사용하는 주된 목적은 다양한 locale 시간대에 대한 지원이라고 알고 있는데, 저희 프로젝트는 한국의 이용자들을 타겟으로 하는 프로젝트이므로, 간단하게 구현할 수 있는 날짜 관련 기능은 라이브러리에 대한 의존성을 추가하지 않고 직접 개발해도 좋을 것 같습니다.

저희 프로젝트에서 날짜를 파싱해야하는 경우는 다음 세 가지 상황입니다.

1. 알림 페이지에서 알림이 온 시각에 대한 경과 표시
2. Date 타입으로 온 시각을 'yyyy.mm.dd' 포맷으로 표시
3. 모집 마감일을 기준으로 한 디데이 시간 표시

주어진 시각에 대한 경과 표시는 다음 코드로 구현할 수 있습니다.

const MILISECONDS = {
  YEAR: 60 * 60 * 24 * 365,
  MONTH: 60 * 60 * 24 * 30,
  DAY: 60 * 60 * 24,
  HOUR: 60 * 60,
  MINUITE: 60,
};

const timeUnits = [
  { unit: '년', milliSeconds: MILISECONDS.YEAR },
  { unit: '개월', milliSeconds: MILISECONDS.MONTH },
  { unit: '일', milliSeconds: MILISECONDS.DAY },
  { unit: '시간', milliSeconds: MILISECONDS.HOUR },
  { unit: '분', milliSeconds: MILISECONDS.MINUITE },
];

function elapsedTime(date: Date): string {
  const start = date;
  const end = new Date();

  const diff = (end.getTime() - start.getTime()) / 1000;

  for (const { unit, milliSeconds } of timeUnits) {
    const betweenTime = Math.floor(diff / milliSeconds);

    if (betweenTime > 0) {
      return `${betweenTime}${unit} 전`;
    }
  }

  return '방금 전';
}

const time = new Date('2023-12-04T18:00');
console.log(elapsedTime(time));

또한, Date string 을 yyyy.mm.dd 타입으로 다음과 같이 변형할 수 있습니다.

function formattedTime(date: Date): string {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  return `${year}.${month}.${day}`;
}

const time = new Date('2023-12-04T18:00');
console.log(formattedTime(time));

디데이는 다음과 같이 계산할 수 있을 것 같습니다.

function remainingTime(date: Date): number {
  const deadline = date;
  const today = new Date();

  const diff = (deadline.getTime() - today.getTime()) / 1000;
  const remainingDays = Math.floor(diff / MILISECONDS.DAY);

  return remainingDays;
}

const time = new Date('2023-12-04T18:00');
remainingTime(time);

만약 제가 잘못 이해한 부분이 있다면 알려주시면 감사하겠습니다!