[dayjs] x시간 전

 

 

 

알림 데이터에 'x시간 전' 기능을 넣고싶었다.

dayjs를 활용하면 간단하게 구현이 가능했다.

 

 

 

 

1. dayjs 라이브러리를 설치한다.

 

 

 

2. dayjs와 필요한 plugin 및 locale을 불러온다.

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

• dayjs: 날짜와 시간을 처리하는 라이브러리
• relativeTime: 상대적인 시간을 표시하는 기능을 추가하는 plugin
• dayjs/locale/ko: 한국어 locale

 

 

 

3. dayjs에 relativeTime 플러그인을 추가하고 한국어로 설정 후 현재 시간을 가져온다.

dayjs.extend(relativeTime);
dayjs.locale('ko');
const now = dayjs();

 

 

 

 

4. 날짜를 dayjs 객체로 변환 후 from(now) 메서드로 현재 시간과의 차이를 계산한다. 

<span>{dayjs(item.date).from(now)}</span>

 

날짜를 현재 시간(now)으로부터 얼마나 지났는지를 상대적인 시간으로 변환하여 표시하는 기능을 수행하며, "몇 분 전", "몇 시간 전", "어제" 등의 형식으로 시간 차이를 표현한다.