UTC에서 ISO 8601 (feat. dayjs)

개요

api를 통해 얻은 데이터의 시간들이 ISO 8601형식으로 오기 때문에 그걸 보기 쉬운 형태로 변환함에 있어서 필요한 지식들을 정리해 보았다.

 

ISO 8601 란?

날짜와 시간을 표기함에 있어서 ISO에서 정한 국제 표준이다.

https://ko.wikipedia.org/wiki/ISO_8601

ISO 8601 - 위키백과, 우리 모두의 백과사전

우리에게 필요한 부분 간단 요약

예) 2022-06-18T13:00:00+09:00

• 날짜 : YYYY-MM-DD
• T : 날짜 뒤에 시간이 오는것을 표시해주는 문자
• 시간 : HH:mm:ss
• Timezone Offset : 현재 시간±HH:mm의 형태로 나와있으며 UTC기준 시로부터 얼마만큼 차이가 있는지를 의미, 현재 위의 예시는 한국시간을 나타내며 UTC(협정세계시)기준 시로부터 9시간 +된 시간임을 나타냅니다

위의 시간을 UTC로 변환하면 2022-06-18T04:00:00Z 가 된다.

dayjs를 이용해 시간 변환

// [main.js]
import { createApp } from 'vue'
import dayjs from 'dayjs' //import dayjs in your main.js

const app = createApp({
  /* root component options */
})
 
app.provide('dayjs', dayjs) // provide dayJS
app.mount("#app") // mount app

// [component]

// Composition API setup ------------------
import { inject } from 'vue'
const dayjs = inject("dayjs")
const utc = "2022-06-18T04:00:00Z"
const iso8601 = "2022-06-18T13:00:00+09:00"
console.log(dayjs(iso8601)); // 2022-06-18T13:00:00+09:00
console.log(dayjs(iso8601).format('YYYY-MM-DD HH:mm:ss')); // 2022-06-18 13:00:00

console.log(dayjs(iso8601)); // 2022-06-18T04:00:00Z
console.log(dayjs(utc).format('YYYY-MM-DD HH:mm:ss')); // 2022-06-18 13:00:00

return {
  dayjs
}

 

참고

how to properly use dayjs inside vue 3 app and component

Day.js · 2kB JavaScript date utility library