<NuxtTime> 컴포넌트는 올바른 <time> HTML 시맨틱을 사용하여 로케일 친화적인 형식으로 날짜와 시간을 표시할 수 있게 해줍니다. 서버와 클라이언트 간의 일관된 렌더링을 보장하여 하이드레이션 불일치를 방지합니다.

사용법

앱 어디에서나 <NuxtTime> 컴포넌트를 사용할 수 있습니다:

<template>
  <NuxtTime :datetime="Date.now()" />
</template>

Props

datetime

• 타입: Date | number | string
• 필수: true

표시할 날짜와 시간 값입니다. 다음을 제공할 수 있습니다:

• Date 객체
• 타임스탬프 (숫자)
• ISO 형식의 날짜 문자열

<template>
  <NuxtTime :datetime="Date.now()" />
  <NuxtTime :datetime="new Date()" />
  <NuxtTime datetime="2023-06-15T09:30:00.000Z" />
</template>

locale

• 타입: string
• 필수: false
• 기본값: 브라우저 또는 서버의 기본 로케일 사용

형식 지정에 사용할 BCP 47 언어 태그 (예: 'en-US', 'fr-FR', 'ja-JP'):

<template>
  <NuxtTime :datetime="Date.now()" locale="fr-FR" />
</template>

포맷팅 Props

컴포넌트는 Intl.DateTimeFormat 옵션의 모든 속성을 허용합니다:

<template>
  <NuxtTime 
    :datetime="Date.now()" 
    year="numeric"
    month="long"
    day="numeric"
    hour="2-digit"
    minute="2-digit"
  />
</template>

이렇게 하면 "April 22, 2025, 08:30 AM"과 같은 형식으로 출력됩니다.

relative

• 타입: boolean
• 필수: false
• 기본값: false

Intl.RelativeTimeFormat API를 사용하여 상대 시간 형식을 활성화합니다:

<template>
  <!-- "5분 전"과 같은 형식으로 표시 -->
  <NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
</template>

상대 시간 포맷팅 Props

relative가 true로 설정되면, 컴포넌트는 Intl.RelativeTimeFormat의 속성도 허용합니다:

<template>
  <NuxtTime 
    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000" 
    relative 
    numeric="auto"
    style="long"
  />
</template>

이렇게 하면 "3일 전" 또는 numeric 설정에 따라 "지난 금요일"과 같은 형식으로 출력됩니다.

예제

기본 사용법

<template>
  <NuxtTime :datetime="Date.now()" />
</template>

사용자 정의 포맷팅

<template>
  <NuxtTime 
    :datetime="Date.now()" 
    weekday="long"
    year="numeric"
    month="short"
    day="numeric"
    hour="numeric"
    minute="numeric"
    second="numeric"
    timeZoneName="short"
  />
</template>

상대 시간

<template>
  <div>
    <p>
      <NuxtTime :datetime="Date.now() - 30 * 1000" relative />
      <!-- 30초 전 -->
    </p>
    <p>  
      <NuxtTime :datetime="Date.now() - 45 * 60 * 1000" relative />
      <!-- 45분 전 -->
    </p>
    <p>
      <NuxtTime :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000" relative />
      <!-- 2일 후 -->
    </p>
  </div>
</template>

사용자 정의 로케일과 함께

<template>
  <div>
    <NuxtTime :datetime="Date.now()" locale="en-US" weekday="long" />
    <NuxtTime :datetime="Date.now()" locale="fr-FR" weekday="long" />
    <NuxtTime :datetime="Date.now()" locale="ja-JP" weekday="long" />
  </div>
</template>