λͺ¨λ˜ ν”„λ‘ νŠΈμ—”λ“œ ν”„λ‘œμ νŠΈμ—μ„œ Day.jsλŠ” Moment.js λ₯Ό λŒ€μ²΄ν•˜κΈ° μœ„ν•œ μžλ°”μŠ€ν¬λ¦½νŠΈ Date λΌμ΄λΈŒλŸ¬λ¦¬λ‹€. Moment.jsκ°€ 더이상 κ΄€λ¦¬λ˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— Moment와 λΉ„μŠ·ν•˜λ©΄μ„œλ„ κ°€λ²Όμš΄ νŒ¨ν‚€μ§€ μ‚¬μ΄μ¦ˆ 덕뢄에 λŒ€λΆ€λΆ„μ˜ ν”„λ‘œμ νŠΈμ—μ„œ μ±„νƒλ˜μ–΄ μ‚¬μš©λ˜κ³  μžˆμ„ 것 κ°™λ‹€. νšŒμ‚¬ ν”„λ‘œμ νŠΈλŠ” Quasar ν”„λ ˆμž„μ›Œν¬λ₯Ό μ‚¬μš©ν•˜κ³  있기 λ•Œλ¬Έμ— Date Utilsλ₯Ό μ‚¬μš©ν•  μˆ˜λ„ μžˆμœΌλ‚˜ Day.js λ₯Ό λ³„λ„λ‘œ μΆ”κ°€ν•˜μ—¬ ν™œμš©ν•˜κ³  μžˆλ‹€.

TL;DR

  • format : νƒ€μž„μ‘΄ μ˜€ν”„μ…‹μ΄ ν¬ν•¨λœ λ¬Έμžμ—΄ λ˜λŠ” νŠΉμ • νŒ¨ν„΄μ˜ λ¬Έμžμ—΄μ΄ ν•„μš”ν•œ 경우
  • toISOString : UTC(Z) 기반 λ¬Έμžμ—΄μ΄ ν•„μš”ν•œ 경우
  • valueOf : λ°€λ¦¬μ΄ˆ 기반 μœ λ‹‰μŠ€ νƒ€μž„μŠ€νƒ¬ν”„κ°€ ν•„μš”ν•œ 경우
  • toDate : μžλ°”μŠ€ν¬λ¦½νŠΈ Date 객체가 ν•„μš”ν•œ 경우
  • tz: μ‹œκ°„λŒ€κ°€ μ„€μ •λœ λ‚ μ§œκ°€ ν•„μš”ν•œ 경우
  • tz.setDefault: κΈ°λ³Έ μ‹œκ°„λŒ€λ₯Ό μ„€μ •ν•˜λ €λŠ” 경우

Setup with Vue 3

import dayjs from 'dayjs'
import { createApp } from 'vue'
const app  = createApp(App)
    
app.config.globalProperties.$dayjs = dayjs
    
app.mount("#app')

λ³Έ κΈ€μ˜ λͺ¨λ“  μ˜ˆμ‹œ μ½”λ“œλŠ” ECMAScript 2015(ES6)λΆ€ν„° μ‚¬μš©ν•  수 μžˆλŠ” import, export λ₯Ό μ΄μš©ν•˜λŠ” ESM λ°©μ‹μœΌλ‘œ μ΄λ£¨μ–΄μ§‘λ‹ˆλ‹€.

Day.js creates a wrapper for the Date object

Day.js λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ Date 객체λ₯Ό λž˜ν•‘ν•œ 객체λ₯Ό λ§Œλ“ λ‹€. μ‚¬νŒŒλ¦¬ λΈŒλΌμš°μ €μ—μ„œ Invalid Date κ°€ ν‘œμ‹œλœ μ΄μŠˆλ„ λΈŒλΌμš°μ €μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Date 객체에 μ˜μ‘΄ν•˜κΈ° λ•Œλ¬Έμ΄λ‹€. 그리고 Day.js κ°μ²΄λŠ” immutable ν•˜λ―€λ‘œ 변경사항은 μƒˆλ‘œμš΄ 객체에 μ μš©λ˜μ–΄ λ°˜ν™˜λœλ‹€.

import dayjs from 'dayjs'
dayjs() // Same as "dayjs(new Date())"
dayjs(1755874800000).format() // 2025-08-23T00:00:00+09:00

Day.js κΈ°λ³Έ μ‹œκ°„λŒ€ μ„€μ •ν•˜κΈ°

Day.js λŠ” λΈŒλΌμš°μ € νƒ€μž„μ‘΄μ„ 기반으둜 λ‚ μ§œ 객체λ₯Ό μƒμ„±ν•œλ‹€. λ§Œμ•½, UTC λ˜λŠ” μ‚¬μš©μž κ³„μ •μ˜ νƒ€μž„μ‘΄μ„ μ μš©ν•˜λ €λ©΄ UTC 와 TimeZone ν”ŒλŸ¬κ·ΈμΈμ„ μΆ”κ°€ν•΄μ•Όν•œλ‹€. μ‹œκ°„λŒ€λ₯Ό μ„€μ •ν•˜λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ Intl.RelativeTimeFormat λ₯Ό μ‚¬μš©ν•˜μ—¬ μƒλŒ€μ μΈ μ‹œκ°„ ν˜•μ‹μœΌλ‘œ ν‘œν˜„ν•  수 μžˆλŠ” 것 처럼 RelativeTime ν”ŒλŸ¬κ·ΈμΈμ„ μΆ”κ°€ν•˜μ—¬ μƒλŒ€μ μΈ μ‹œκ°„μ„ ν‘œμ‹œν•  수 μžˆλ‹€. μƒλŒ€μ μΈ μ‹œκ°„μ„ ν‘œμ‹œν•  λ•Œμ—λŠ” λ‘œμΌ€μΌ 정보도 μ„€μ •ν•˜λŠ”κ²Œ μ’‹λ‹€.

import { boot } from 'quasar/wrappers';

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/ko'

export default boot(({ app }) => {
    dayjs.extend(utc)
    dayjs.extend(timezone)
    dayjs.extend(relativeTime);

    dayjs.tz.setDefault('Asia/Seoul')
    dayjs.locale('ko')

    app.config.globalProperties.$dayjs = dayjs
})

Day.js 객체λ₯Ό λ‚ μ§œ λ°μ΄ν„°λ‘œ λ³€ν™˜ν•˜κΈ°

Day.js 객체λ₯Ό μƒμ„±ν•˜λŠ” 방법은 μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ Date 객체와 λ™μΌν–ˆλ‹€. ISO 8601 νŒ¨ν„΄μ˜ λ¬Έμžμ—΄μ„ μ‚¬μš©ν•˜μ—¬ λ§Œλ“€κ±°λ‚˜ 주둜 μ„œλ²„μ™€ λ°μ΄ν„°λ² μ΄μŠ€ 간에 μ‹œκ°„ 정보λ₯Ό κ΅ν™˜ν•˜κΈ° μœ„ν•œ 숫자 ν˜•νƒœμ˜ μ‹œκ°„κ°’μΈ 숫자 ν˜•νƒœμ˜ Unix Timestampλ₯Ό μ‚¬μš©ν•  μˆ˜λ„ μžˆλ‹€. 이와 λ°˜λŒ€λ‘œ format ν•¨μˆ˜λ‘œ νŠΉμ • νŒ¨ν„΄μ˜ λ¬Έμžμ—΄λ‘œ λ³€ν™˜ν•˜κ±°λ‚˜ μ„œλ²„ API κ°€ μœ λ‹‰μŠ€ νƒ€μž„μŠ€νƒ¬ν”„ ν˜•νƒœμ˜ 정보λ₯Ό μš”κ΅¬ν•˜λ„λ‘ μž‘μ„±λ˜μ–΄μžˆλ‹€λ©΄ valueOf ν•¨μˆ˜λ‘œ κ°€μ Έμ™€μ„œ 전달할 수 μžˆλ‹€. 기본적으둜 ν˜„μž¬ νƒ€μž„μ‘΄μ˜ νƒ€μž„ μ˜€ν”„μ…‹μ΄ ν¬ν•¨λœ ISO 8601 ν˜•μ‹μœΌλ‘œ ν¬λ§·νŒ…μ„ μ§€μ›ν•˜λŠ”λ°, λ§Œμ•½, UTC κΈ°μ€€μ˜ ISO 8601 ν˜•μ‹μœΌλ‘œ λ³€ν™˜ν•˜κ³ μž ν•˜λŠ” κ²½μš°μ—λŠ” toISOString ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.

const d = dayjs(1755874800000)
d.format() // 2025-08-23T00:00:00+09:00
d.toISOString() // 2025-08-22T15:00:00.000Z
d.valueOf() // 1755874800000