Date 객체의 타임존 문제

🔴 타임존 문제란?

const date = new Date('2024-01-15');
console.log(date);
// 실제로 어떤 시간이 나올까요?

같은 코드를 실행해도 당신이 어디에 있는지에 따라 다른 시간이 나온다. 이것이 바로 타임존 문제이다.

---

🤔 왜 이런 문제가 발생할까?

1️⃣ JavaScript의 Date는 항상 UTC 기준이다

JavaScript의 Date객체는 내부적으로 UTC(협정 세계시) 기준으로 시간을 저장한다. 하지만 화면에 표시할 때는 당신의 컴퓨터 타임존을 따른다.

// 이 코드는 UTC 기준 2024년 1월 15일 00:00:00을 만듭니다
const date = new Date('2024-01-15');

// 하지만 서울에서 보면:
console.log(date.toString());
// "Mon Jan 15 2024 09:00:00 GMT+0900"
// 9시간 앞당겨져서 보입니다!

// 뉴욕에서 보면:
// "Sun Jan 14 2024 19:00:00 GMT-0500"
// 5시간 늦춰져서 보입니다!

2️⃣ 문자열로 날짜를 만들 때의 함정

// ❌ 문제 있는 방식
const date1 = new Date('2024-01-15');
console.log(date1);  // 브라우저마다 다른 결과!

// ✅ 안전한 방식
const date2 = new Date('2024-01-15T00:00:00Z');
console.log(date2);  // 모든 브라우저에서 같은 UTC 시간

3️⃣ 서버와 클라이언트의 시간이 다르게 보임

// 서버에서 생성된 시간
const serverTime = new Date('2024-01-15 10:00:00');

// 클라이언트(브라우저)에서 받으면 자신의 타임존으로 변환됩니다
// 서울: 10:00:00
// 뉴욕: 20:00:00 (전날)
// 같은 시간인데 다르게 보여요!

---

⚠️ 실제 문제 사례

예시 1: 예약 시간이 맞지 않음

// 사용자가 선택한 시간: 오후 2시
const appointmentTime = new Date('2024-01-15 14:00:00');

// 서버에 저장되고 다시 불러올 때
// 서울에서 설정 → UTC로 변환 → 다른 나라에서 보기
// → 완전히 다른 시간이 될 수 있어요!

예시 2: 자정 판별이 틀림

const date = new Date('2024-01-15');

// 자정 맞게 설정하려고 했는데...
console.log(date.getHours());  // 0이 아니라 9일 수도 있어요!

---

✅ 해결 방법 & Best Practices

🥇방법 1: 항상 ISO 8601 형식 + Z(UTC) 사용하기

// ✅ 좋은 방식: Z는 UTC를 의미합니다
const date = new Date('2024-01-15T09:30:00Z');
console.log(date);  // 모든 곳에서 같은 시간!

// ✅ ISO 8601 형식
const now = new Date().toISOString();
console.log(now);  // "2024-01-15T09:30:00.000Z"

왜 좋을까?

• Z는 UTC를 명확히 하므로 어디서나 같은 시간
• 서버-클라이언트 간 일관성 유지
• 국제 표준 형식

🥈방법 2: 타임스탬프(밀리초) 사용하기

// ✅ 숫자로 저장하면 타임존 문제 없음
const timestamp = new Date('2024-01-15T09:30:00Z').getTime();
console.log(timestamp);  // 1705324200000

// 다시 Date로 변환
const date = new Date(timestamp);
console.log(date);  // 정확한 시간!

언제 사용할까?

• 데이터베이스에 저장할 때
• API 통신할 때
• 계산이 필요할 때

🥉방법 3: getUTC 메서드 사용하기

const date = new Date('2024-01-15');

// ❌ 타임존 영향을 받음
console.log(date.getHours());       // 9시간 차이 날 수 있음
console.log(date.getMonth());       // 달도 틀릴 수 있음

// ✅ UTC 기준 - 타임존 상관없음
console.log(date.getUTCHours());    // 항상 정확함
console.log(date.getUTCMonth());    // 항상 정확함
console.log(date.getUTCDate());     // 항상 정확함

언제 사용할까?

• 서버에서 저장할 데이터 추출할 때
• 정확한 계산이 필요할 때

---

🎯 Best Practices 정리

✨ 규칙 1: 서버에는 항상 UTC로 저장하기

// 사용자가 입력: 2024년 1월 15일
const userInput = new Date('2024-01-15');

// 서버에 보낼 때는 UTC로 변환
const dataForServer = userInput.toISOString();
// "2024-01-15T09:30:00.000Z"

// 서버에 저장
// DB: "2024-01-15T09:30:00.000Z" (UTC)

✨ 규칙 2: 브라우저에서는 로컬 시간으로 표시하기

// 서버에서 받은 UTC 시간
const serverDate = new Date('2024-01-15T09:30:00Z');

// 현재 지역 시간대로 자동 변환되어 표시됨
console.log(serverDate.toString());
// 서울: "Mon Jan 15 2024 18:30:00 GMT+0900"
// 정확하게 보여집니다!

✨ 규칙 3: 타임존이 중요하면 라이브러리 사용하기

날짜/시간 계산이 복잡하다면 라이브러리를 추천한다.

// 1. Day.js (가볍고 간단함)
// npm install dayjs

const dayjs = require('dayjs');
const date = dayjs('2024-01-15').tz('Asia/Seoul');
console.log(date.format());

// 2. Moment.js (많은 기능)
// npm install moment-timezone

const moment = require('moment-timezone');
const seoulTime = moment('2024-01-15').tz('Asia/Seoul');
console.log(seoulTime.format());

---

🎓 마무리

타임존 문제는 복잡해 보이지만 규칙을 따르면 간단하다.
1. 저장: UTC + ISO 8601 형식
2. 계산: getUTC~() 메서드 사용
3. 표시: 브라우저가 자동으로 지역 시간으로 변환