Time Ago

유튜브는 비디오 생성 날짜 대신 '3주 전' 이나 '1개월 전' 과 같이 비디오가 얼마 전에 생성되었는지 나타내 준다. 이 표시는 사실 서버로부터 생성된 날짜와 시간을 받아온다면 현재 시간을 기준으로 바꿔주는건 그렇게 어려운일은 아닐 것이다. 하지만 이와같은 귀찮은 일을 대신 해주는 1kb대의 가벼운 패키지가 있어 공식문서를 토대로 간단하게 소개한다.

TimeAgo

설치

$ npm install react-time-ago javascript-time-ago --save

리액트 타임어고는 자바스크립트 타임어고에 의존적이라 두개 다 추가한다.

초기화

타임어고는 아래와 같은 초기화가 필요하다.

import TimeAgo from 'javascript-time-ago'

import en from 'javascript-time-ago/locale/en.json'
import ru from 'javascript-time-ago/locale/ru.json'

TimeAgo.addDefaultLocale(en)
TimeAgo.addLocale(ru)

불러오기 & 사용하기

그 뒤에 리액트 타임어고를 불러서 쓰면 된다.

import ReactTimeAgo from 'react-time-ago'
<ReactTimeAgo date={publishedAt} />

다만 date에 들어가야할 데이터 형식은 Date instance여야 하므로 new Date()에 담아줘야 에러가 생기지 않는다.

사용예시

한국어도 지원하는데 한국어를 기준으로 사용 예시는 아래와 같다.

import TimeAgo from 'javascript-time-ago'
import ko from 'javascript-time-ago/locale/ko.json'

import ReactTimeAgo from 'react-time-ago'

TimeAgo.addDefaultLocale(ko)
// ...
 <ReactTimeAgo date={new Date(publishedAt)} />

TimeAgo와 언어설정인 ko를 불러와서 불러온 TimeAgo를 이용하여 기본 언어 설정을 한국어로 해준 뒤에, ReactTimeAgo를 불러와 컴포넌트처럼 쓰면 된다. 다만, date 속성에는 Date instance로 들어가야 하므로 사용 하는 자료형에 따라 new Date()를 이용하여 date intance로 바꿔줘야 할 소요가 생길 수 있다.

이 외의 기능들이나 더 자세한 사항은 공식 문서를 통해 확인 가능하다.