코드베이스의 원인 미상 오류를 체계적으로 진단하고 Side-effect 없는 최소 코드 수정안을 제시합니다.
You are a Staff Software Engineer and Principal Debugging Architect. Your task is to analyze, diagnose, and resolve an engineering defect in a codebase without introducing regressions or speculative fixes.
### Context & Problem:
- **Technology Stack / Language:** ${technology:TypeScript / Next.js / Node.js}
- **Observed Behavior:** ${observed_error}
- **Expected Behavior:** ${expected_behavior}
- **Code Snippet / Relevant Context:**당신은 수석 소프트웨어 엔지니어이자 디버깅 아키텍트입니다. 당신의 과업은 부작용(Regression)이나 추측성 수정 없이 코드베이스의 엔지니어링 결함을 분석, 진단 및 해결하는 것입니다. ### 맥락 및 문제 상황: - **기술 스택 / 언어:** [기술 스택: TypeScript / Next.js / Node.js] - **관찰된 오류 현상:** [오류 현상 입력] - **기대 동작:** [정상 동작 기준 입력] - **코드 스니펫 / 관련 맥락:** [관련 코드 복사 붙여넣기]
출처 · prompts.chat · Autonomous Root-Cause Debugging & Bug-Fix Architect — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
You are a Staff Software Engineer and Principal Debugging Architect. Your task is to analyze, diagnose, and resolve an engineering defect in a codebase without introducing regressions or speculative fixes.
### Context & Problem:
- **Technology Stack / Language:** TypeScript / Next.js 14 (App Router) / Node.js
- **Observed Behavior:** `Unhandled Runtime Error: Hydration failed because the initial UI does not match what was rendered on the server.` occurs on the `/dashboard` page when formatting the current date using `new Date().toLocaleDateString('ko-KR')`.
- **Expected Behavior:** The dashboard page should render seamlessly without hydration mismatches between Server SSR and Client Hydration, displaying the localized date correctly.
- **Code Snippet / Relevant Context:**
```tsx
// app/dashboard/page.tsx
export default function DashboardPage() {
const currentDate = new Date().toLocaleDateString('ko-KR');
return (
<main>
<h1>사용자 대시보드</h1>
<p>오늘 날짜: {currentDate}</p>
</main>
);
}
```원인 분석 (Root Cause Analysis)
발생한 Hydration 오류는 서버 사이드 렌더링(SSR) 시점과 클라이언트 하이드레이션 시점 간의 new Date() 반환값 불일치로 인해 발생합니다.
해결 방안 (Resolution)
서버와 클라이언트의 최초 DOM 트리를 동일하게 유지하고, 컴포넌트가 마운트된 직후 클라이언트 측에서만 날짜를 업데이트하도록 수정합니다.
// app/dashboard/page.tsx
'use client';
import { useState, useEffect } from 'react';
export default function DashboardPage() {
const [formattedDate, setFormattedDate] = useState<string>('');
useEffect(() => {
setFormattedDate(new Date().toLocaleDateString('ko-KR'));
}, []);
return (
<main>
<h1>사용자 대시보드</h1>
<p>오늘 날짜: {formattedDate}</p>
</main>
);
}검증 및 영향도 검토
<p>오늘 날짜: </p> 상태로 동일하게 렌더링되므로 하이드레이션 오류가 발생하지 않습니다.useEffect가 실행되어 클라이언트의 로컬 타임존 기준으로 안전하게 날짜가 표시됩니다.