상대적 시간 표시 기능 구현하기 — date-fns 라이브러리

프론트엔드 개발을 하다 보면 사용자 경험(UX)을 향상시키기 위해 시간을 직관적으로 표현해야 할 때가 있습니다. 예를 들어:

• 방금 전
• 3분 전
• 1시간 전
• 3일 전
• 2022년 2월 16일

이러한 상대적 시간 표시는 사용자가 콘텐츠의 시간적 맥락을 쉽게 이해할 수 있게 해주는 중요한 UX 요소입니다. 하지만 이를 직접 구현하려면 복잡한 날짜 계산과 다국어 지원 등 고려해야 할 사항이 많습니다.

다행히도 프론트엔드 생태계에는 이미 검증된 날짜 처리 라이브러리들이 있습니다. 그중에서도 date-fns는 다음과 같은 장점으로 주목받고 있습니다:

1. 트리 쉐이킹이 가능한 모듈형 구조
2. 직관적인 API
3. 타입스크립트 지원
4. 작은 번들 사이즈

date-fns를 사용하면 복잡한 날짜 로직을 몇 줄의 코드로 구현할 수 있습니다. 실제 구현 예시를 살펴보겠습니다:

# 패키지 설치
npm install date-fns --save
# or
yarn add date-fns

// date.ts 파일 생성
import { format, formatDistanceToNow } from "date-fns";
import {ko} from "date-fns/locale";

export function formatDate(date) {
  const d = new Date(date);
  const now = Date.now();
  const diff = (now - d.getTime()) / 1000; // 현재 시간과의 차이(초)
  
  if (diff < 60 * 1) { // 1분 미만일땐 방금 전 표기
    return "방금 전";
  }
  if (diff < 60 * 60 * 24 * 3) { // 3일 미만일땐 시간차이 출력
    return formatDistanceToNow(d, {addSuffix: true, locale: ko});
  }
  return format(d, 'PPP EEE p', {locale: ko}); // 날짜 포맷
}

주요 함수들을 살펴보면:

• formatDistanceToNow: 현재 시각을 기준으로 시간을 문자로 표현합니다(예: '5분 전')
• format: 날짜를 원하는 형식으로 포맷팅합니다

formatDistanceToNow 함수는 addSuffix와 locale 옵션을 통해 자연스러운 한국어 시간 표현이 가능합니다. locale 설정은 date-fns/locale에서 제공하는 언어 팩을 사용합니다.

format 함수의 'PPP EEE p' 포맷 문자열은 날짜(PPP), 요일(EEE), 시간(p)을 표현하며, 한국어 locale 설정과 함께 사용하면 자연스러운 한국어 날짜 형식으로 출력됩니다.

 

실제 사용 예시:

import { formatDate } from './date.ts';

// 다양한 입력 형식 지원
formatDate(new Date());  // Date 객체
formatDate("2024-03-23T12:00:00");  // ISO 문자열
formatDate(1711152000000);  // 타임스탬프

이처럼 date-fns를 활용하면 복잡한 시간 표시 로직을 효율적으로 구현할 수 있습니다. 특히 국제화(i18n)가 필요한 프로젝트에서 더욱 유용합니다. 시간 표시 기능이 필요한 프로젝트라면 date-fns를 고려해보시기 바랍니다.

 

참고 링크:

https://npm-compare.com/ko-KR/date-fns,luxon,moment,rome

https://date-fns.org/