docs(blog): SEO 기술 팁 포스트 추가 - JavaScript Temporal API (3개 언어)

realcoding2003 · realcoding2003 · commit 98831a511104 · 2026-03-08T17:02:42.000+09:00
diff --git a/_posts/2026-02-07-javascript-temporal-api-date-replacement-en.md b/_posts/2026-02-07-javascript-temporal-api-date-replacement-en.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: "JavaScript Temporal API - Finally a Proper Date Replacement"
+date: 2026-02-07 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Temporal API, Date, TypeScript]
+author: "Kevin Park"
+lang: en
+excerpt: "How to use the Temporal API to replace JavaScript's broken Date object with immutable, timezone-aware date handling"
+---
+
+## Problem
+
+JavaScript's `Date` object has frustrated developers for over two decades.
+
+```javascript
+// Create January 15, 2026
+const date = new Date(2026, 0, 15); // month starts from 0?!
+console.log(date.getMonth()); // 0 ← It's January, but returns 0
+
+// Mutating a reference changes the original
+const original = new Date(2026, 0, 15);
+const copy = original;
+copy.setMonth(5);
+console.log(original.getMonth()); // 5 ← original is mutated
+```
+
+Zero-indexed months and mutable objects have been a constant source of bugs. Most teams ended up depending on libraries like moment.js or day.js just to handle dates sanely. Now there's a native solution.
+
+## Solution
+
+The `Temporal` API ships natively in Chrome 144 (January 2026) and Firefox 139 (May 2025). No libraries needed.
+
+### Creating Dates
+
+```javascript
+// PlainDate - date without time
+const date = Temporal.PlainDate.from('2026-02-07');
+const date2 = Temporal.PlainDate.from({ year: 2026, month: 2, day: 7 });
+
+console.log(date.month); // 2 ← February is actually 2!
+console.log(date.dayOfWeek); // 6 (Saturday)
+
+// PlainTime - time without date
+const time = Temporal.PlainTime.from('14:30:00');
+console.log(time.hour); // 14
+```
+
+### Date Arithmetic
+
+```javascript
+const today = Temporal.PlainDate.from('2026-02-07');
+
+// 30 days later
+const later = today.add({ days: 30 });
+console.log(later.toString()); // 2026-03-09
+
+// Original stays unchanged (immutable!)
+console.log(today.toString()); // 2026-02-07
+
+// Duration between two dates
+const start = Temporal.PlainDate.from('2026-01-01');
+const end = Temporal.PlainDate.from('2026-02-07');
+const diff = start.until(end);
+console.log(diff.days); // 37
+```
+
+### Timezone Conversion
+
+```javascript
+// Current time in Seoul
+const now = Temporal.Now.zonedDateTimeISO('Asia/Seoul');
+console.log(now.toString());
+// 2026-02-07T14:30:00+09:00[Asia/Seoul]
+
+// Convert to New York time
+const nyTime = now.withTimeZone('America/New_York');
+console.log(nyTime.toString());
+// 2026-02-07T00:30:00-05:00[America/New_York]
+```
+
+Timezone conversion with `Date` required ugly workarounds. With Temporal, it's a single `withTimeZone()` call.
+
+## Key Points
+
+- **Months start from 1**: January = 1, December = 12. The most common off-by-one bug source is gone
+- **Immutable by design**: Every operation like `add()` and `subtract()` returns a new object. No more accidental mutations
+- **Purpose-built types**: `PlainDate` (date only), `PlainTime` (time only), `ZonedDateTime` (with timezone) — use exactly what you need
+- **Browser support**: Available in Chrome 144+ and Firefox 139+. For Safari, use `@js-temporal/polyfill` in production
diff --git a/_posts/2026-02-07-javascript-temporal-api-date-replacement-ja.md b/_posts/2026-02-07-javascript-temporal-api-date-replacement-ja.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: "JavaScript Temporal APIで日付処理 - Dateオブジェクトはもう卒業"
+date: 2026-02-07 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Temporal API, Date, TypeScript]
+author: "Kevin Park"
+lang: ja
+excerpt: "Dateオブジェクトの0始まりmonthやmutable問題をTemporal APIで解決する方法"
+---
+
+## 問題
+
+JavaScriptの`Date`オブジェクトは、20年以上開発者を悩ませてきました。
+
+```javascript
+// 2026年1月15日を作りたい
+const date = new Date(2026, 0, 15); // monthが0から?!
+console.log(date.getMonth()); // 0 ← 1月なのに0が返ります
+
+// 参照を変更すると元のオブジェクトも変わってしまう
+const original = new Date(2026, 0, 15);
+const copy = original;
+copy.setMonth(5);
+console.log(original.getMonth()); // 5 ← 元のオブジェクトが変更されました
+```
+
+monthが0始まりであることと、mutableであることは常にバグの原因になっていました。結局moment.jsやday.jsなどのライブラリに頼ることが当たり前になっていましたが、ついにネイティブの解決策が登場しました。
+
+## 解決方法
+
+`Temporal` APIがChrome 144（2026年1月）とFirefox 139（2025年5月）からネイティブでサポートされています。ライブラリなしで日付を正しく扱えるようになりました。
+
+### 日付の作成
+
+```javascript
+// PlainDate - 時間なしの日付のみ
+const date = Temporal.PlainDate.from('2026-02-07');
+const date2 = Temporal.PlainDate.from({ year: 2026, month: 2, day: 7 });
+
+console.log(date.month); // 2 ← ついに2月が2です！
+console.log(date.dayOfWeek); // 6（土曜日）
+
+// PlainTime - 日付なしの時間のみ
+const time = Temporal.PlainTime.from('14:30:00');
+console.log(time.hour); // 14
+```
+
+### 日付の計算
+
+```javascript
+const today = Temporal.PlainDate.from('2026-02-07');
+
+// 30日後
+const later = today.add({ days: 30 });
+console.log(later.toString()); // 2026-03-09
+
+// 元のオブジェクトは変わりません（immutable！）
+console.log(today.toString()); // 2026-02-07
+
+// 2つの日付の差分
+const start = Temporal.PlainDate.from('2026-01-01');
+const end = Temporal.PlainDate.from('2026-02-07');
+const diff = start.until(end);
+console.log(diff.days); // 37
+```
+
+### タイムゾーン変換
+
+```javascript
+// ソウル時間で現在時刻
+const now = Temporal.Now.zonedDateTimeISO('Asia/Seoul');
+console.log(now.toString());
+// 2026-02-07T14:30:00+09:00[Asia/Seoul]
+
+// ニューヨーク時間に変換
+const nyTime = now.withTimeZone('America/New_York');
+console.log(nyTime.toString());
+// 2026-02-07T00:30:00-05:00[America/New_York]
+```
+
+`Date`オブジェクトでタイムゾーン変換をするには複雑な処理が必要でしたが、Temporalなら`withTimeZone()`の一行で完了です。
+
+## ポイント
+
+- **monthが1から始まります**: 1月 = 1、12月 = 12。最も多いオフバイワンバグの原因がなくなりました
+- **immutable設計**: `add()`や`subtract()`などすべての操作は新しいオブジェクトを返します。意図しない変更が起きません
+- **用途別の型**: `PlainDate`（日付のみ）、`PlainTime`（時間のみ）、`ZonedDateTime`（タイムゾーン付き）— 必要なものだけ使えます
+- **ブラウザサポート**: Chrome 144+、Firefox 139+で利用可能です。Safariはまだなので、本番環境では`@js-temporal/polyfill`の併用をお勧めします
diff --git a/_posts/2026-02-07-javascript-temporal-api-date-replacement.md b/_posts/2026-02-07-javascript-temporal-api-date-replacement.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: "JavaScript Temporal API로 날짜 다루기 - Date 객체는 이제 그만"
+date: 2026-02-07 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Temporal API, Date, TypeScript]
+author: "Kevin Park"
+lang: ko
+excerpt: "Date 객체의 0부터 시작하는 month, mutable 문제를 Temporal API로 깔끔하게 해결하는 방법"
+---
+
+## 문제
+
+JavaScript의 `Date` 객체, 쓸 때마다 짜증나는 부분이 한두 개가 아니다.
+
+```javascript
+// 2026년 1월 15일을 만들고 싶다
+const date = new Date(2026, 0, 15); // month가 0부터?!
+console.log(date.getMonth()); // 0 ← 1월인데 0이다
+
+// 날짜를 바꿨더니 원본도 바뀐다
+const original = new Date(2026, 0, 15);
+const copy = original;
+copy.setMonth(5);
+console.log(original.getMonth()); // 5 ← 원본이 바뀌어버렸다
+```
+
+month가 0부터 시작하는 건 20년 넘게 개발자들을 괴롭혀 온 문제다. 거기에 mutable이라 원본이 의도치 않게 바뀌는 버그까지. 결국 moment.js, day.js 같은 라이브러리를 가져다 쓰는 게 당연해졌는데, 이제 드디어 네이티브 해결책이 나왔다.
+
+## 해결
+
+`Temporal` API가 Chrome 144(2026년 1월), Firefox 139(2025년 5월)부터 기본 지원된다. 라이브러리 없이 날짜를 제대로 다룰 수 있게 된 거다.
+
+### 날짜 생성
+
+```javascript
+// PlainDate - 시간 없이 날짜만
+const date = Temporal.PlainDate.from('2026-02-07');
+const date2 = Temporal.PlainDate.from({ year: 2026, month: 2, day: 7 });
+
+console.log(date.month); // 2 ← 드디어 2월이 2다!
+console.log(date.dayOfWeek); // 6 (토요일)
+
+// PlainTime - 날짜 없이 시간만
+const time = Temporal.PlainTime.from('14:30:00');
+console.log(time.hour); // 14
+```
+
+### 날짜 연산
+
+```javascript
+const today = Temporal.PlainDate.from('2026-02-07');
+
+// 30일 후
+const later = today.add({ days: 30 });
+console.log(later.toString()); // 2026-03-09
+
+// 원본은 변하지 않는다 (immutable!)
+console.log(today.toString()); // 2026-02-07
+
+// 두 날짜 사이 기간
+const start = Temporal.PlainDate.from('2026-01-01');
+const end = Temporal.PlainDate.from('2026-02-07');
+const diff = start.until(end);
+console.log(diff.days); // 37
+```
+
+### 타임존 변환
+
+```javascript
+// 한국 시간으로 현재 시각
+const now = Temporal.Now.zonedDateTimeISO('Asia/Seoul');
+console.log(now.toString());
+// 2026-02-07T14:30:00+09:00[Asia/Seoul]
+
+// 뉴욕 시간으로 변환
+const nyTime = now.withTimeZone('America/New_York');
+console.log(nyTime.toString());
+// 2026-02-07T00:30:00-05:00[America/New_York]
+```
+
+Date 객체로 타임존 변환하려면 온갖 삽질이 필요했는데, Temporal은 그냥 `withTimeZone()` 한 줄이면 끝이다.
+
+## 핵심 포인트
+
+- **month가 1부터 시작한다**: 1월 = 1, 12월 = 12. 20년 묵은 버그 원인이 사라졌다
+- **immutable이다**: `add()`, `subtract()` 등 모든 연산이 새 객체를 반환한다. 원본이 바뀌는 사고가 원천 차단된다
+- **용도별 타입 분리**: `PlainDate`(날짜만), `PlainTime`(시간만), `ZonedDateTime`(타임존 포함) 등 필요한 것만 쓰면 된다
+- **브라우저 지원**: Chrome 144+, Firefox 139+에서 사용 가능. Safari는 아직이라 프로덕션에서는 `@js-temporal/polyfill` 폴리필을 함께 쓰는 게 안전하다
