폼·입력

[Temporal] 헷갈리던 Date를 대체하는 날짜 계산 플레이그라운드

PlainDate/Duration/ZonedDateTime으로 더하기, 차이, 타임존을 명확하게

Temporal APIPlainDateDurationZonedDateTime@js-temporal/polyfill
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

한 줄 요약 - 날짜 더하기/두 날짜 차이/타임존 시각을 입력하면 Temporal이 즉시 계산해 보여줍니다.

이럴 때 필요해요

기존 Date의 가변성, 월 0부터 시작, 타임존 모호함에 데었을 때.

어떻게 동작하나

  1. PlainDate.from()으로 날짜를 만들고 add/until로 불변 연산.

  2. Now.zonedDateTimeISO(tz)로 타임존별 현재 시각.

핵심은 이거예요

타입이 용도별(PlainDate/ZonedDateTime 등)로 나뉘어 의도가 분명하고, 모든 연산이 불변이라 부작용이 없습니다.

놓치기 쉬운 것

  • 아직 native 미지원 환경은 polyfill이 필요합니다.

  • 월은 1부터 시작합니다(Date와 다름).

이런 곳에 써요

  • 예약/마감 계산, 기간 표시, 글로벌 타임존 처리

소스 코드

· 데모 페이지에서 자동 추출
import type { Metadata } from "next";
import { TemporalPlaygroundDemo } from "./-components/TemporalPlaygroundDemo";

export const metadata: Metadata = {
  title: "Temporal 날짜 플레이그라운드 (데모)",
  description:
    "차기 표준 날짜/시간 API Temporal로 날짜 더하기, 요일, 타임존 현재 시각을 확인하는 데모. 날짜 선택은 공통 Calendar 컴포넌트. (@js-temporal/polyfill)",
  robots: { index: false, follow: false },
};

export default function Page() {
  return (
    <main className="flex min-h-[100dvh] items-center justify-center bg-white">
      <TemporalPlaygroundDemo />
    </main>
  );
}
18조회수

댓글