[JS/라이브러리] day.js - 날짜 라이브러리 사용법

day.js란?

day.js는 Javascript에서 날짜/시간을 쉽게 파싱하고 계산할 수 있도록 도와주는 Date 라이브러리다.

흔히 날짜 라이브러리로 잘 알려진 moment.js 보다 가볍다고 알려져 있다.

Day.js · 2kB JavaScript date utility library

 

사용법

1. 다운로드

npm install dayjs

 

2. 스크립트 사용

import dayjs from 'dayjs'
import relativeTime from "dayjs/plugin/relativeTime"; // .from, .to 등 상대시간 알아내는 플러그인
import utc from "dayjs/plugin/utc"; // UTC형태로 포맷된 날짜데이터 표시 플러그인
import "dayjs/locale/ko"; // 언어 설정을 위한 플러그인

 

3. 플러그인 사용

dayjs.extend(utc);
dayjs.locale('ko');
dayjs.extend(relativeTime);

 

4. format 맞추기

dayjs().to(dayjs(date).utc().format('YYYY-MM-DD HH:mm:ss'))

 

결과 화면

(적용 전)

 

(적용 후)

day.js를 사용해서 아래처럼 읽기 쉬운 직관적인 형태로 변환됐다.

 

전체코드

// date.js
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import utc from "dayjs/plugin/utc";
import "dayjs/locale/ko";

// 시간 처리 함수
function dateView(date) {
    dayjs.extend(utc);
    dayjs.locale('ko');
    dayjs.extend(relativeTime);

    return dayjs().to(dayjs(date).utc().format('YYYY-MM-DD HH:mm:ss'));
}

export default dateView;

 

 

만든 dateView 함수를 export 해서 날짜를 표시하는 부분을 아래처럼 감싸준다.

// Article.svelte
<script>
	import dateView from "../utils/date";
</<script>

<p class="p-date">{dateView(article.createdAt)}</p>

 

dayjs().to(...)

현재 시간으로부터 지정된 날짜까지의 상대적인 시간을 표시한다.

여기서 to 메서드는 두 날짜 간의 상대적인 시간을 계산하고 이를 읽기 쉬운 형태로 제공한다.

 

dayjs(date)

함수에 전달된 date 매개변수를 사용해 입력된 날짜의 day.js 객체를 생성한다.

 

.utc()

day.js 객체를 협정 세계시(UTC)로 변환한다. 

 

.format('YYYY-MM-DD HH:mm:ss')

UTC로 변환된 날짜를 지정된 형식으로 포맷한다. 각각은 연도, 월, 일, 시, 분, 초를 나타낸다.