Day.js
λͺ¨λ νλ‘ νΈμλ νλ‘μ νΈμμ 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