시간은 어디서나 흐르지만, 표현 방식은 다릅니다.
전 세계가 공유하는 UTC, 그리고 우리가 사용하는 KST. 이 둘의 차이를 정확히 알고 있어야 시간 처리 오류를 줄일 수 있습니다.
🌐 UTC란?
UTC는 Universal Time Coordinated, 즉 세계 협정시를 의미합니다.
전 세계 기준이 되는 시각으로, 모든 시간대의 기준점입니다.
예를 들어,
📍 UTC 기준 00:00은
📍 한국(KST) 기준 09:00입니다.
즉, KST는 UTC에 +9시간을 더한 시간대입니다.
🇰🇷 KST란?
KST는 Korean Standard Time, 즉 한국 표준시입니다.
한국은 UTC 기준 +9시간의 시차를 가지고 있으므로:
UTCKST
00:00 | 09:00 |
12:00 | 21:00 |
❗ 왜 UTC/KST가 중요한가요?
- 프론트엔드에서는 사용자의 현지 시각으로 보여줘야 합니다.
- 백엔드/DB에서는 통일된 기준(보통 UTC)으로 저장해야 합니다.
- 시차가 적용되지 않으면 날짜가 하루씩 밀리거나, 예약 기능이 엉뚱한 시각에 실행되는 문제가 생깁니다.
특히 해외 서비스를 다루거나, 서버와 클라이언트가 다른 타임존일 경우에는 더욱 중요합니다.
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault("Asia/Seoul");
// KST -> UTC
export const formatUTC = (date: Date | undefined) => {
try {
if (!dayjs(date ? date : "").isValid()) return undefined;
return dayjs(date).utc().format();
} catch {
return undefined;
}
};
// UTC -> KST
export const formatKST = (date: Date | undefined) => {
try {
let formatDate = dayjs(date ? date : "");
if (!formatDate.isValid()) return undefined;
return formatDate.tz().format();
} catch {
return undefined;
}
};
Day.js를 활용한 시간 변환 (UTC ↔ KST)
이전에는 날짜 객체를 new Date()로 처리했지만, 직관적이지 않고 timezone 지원이 부족했습니다.
그래서 우리는 dayjs와 timezone 플러그인을 사용했습니다.
🔧 설치
npm install dayjs
npm install dayjs-plugin-utc dayjs-plugin-timezone
📌 초기 설정
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault("Asia/Seoul"); // 기본 타임존을 KST로 설정
🔁 KST → UTC 변환 함수
export const formatUTC = (date: Date | undefined) => {
try {
if (!dayjs(date ? date : "").isValid()) return undefined;
return dayjs(date).utc().format(); // UTC 기준 포맷으로 반환
} catch {
return undefined;
}
};
- 예: 2025-05-26T09:00:00+09:00 → 2025-05-26T00:00:00Z
서버에 저장할 때는 일반적으로 이 UTC 포맷을 사용합니다.
🔁 UTC → KST 변환 함수
export const formatKST = (date: Date | undefined) => {
try {
let formatDate = dayjs(date ? date : "");
if (!formatDate.isValid()) return undefined;
return formatDate.tz().format(); // KST 기준으로 반환
} catch {
return undefined;
}
};
- 예: 2025-05-26T00:00:00Z → 2025-05-26T09:00:00+09:00
사용자에게 보여주는 시간은 보통 이렇게 변환된 KST 시간입니다.
사용 예시
const now = new Date();
console.log("KST 기준 현재 시각:", formatKST(now));
// KST 기준 현재 시각: 2025-05-26T09:00:00+09:00
console.log("UTC 기준 현재 시각:", formatUTC(now));
//UTC 기준 현재 시각: 2025-05-26T00:00:00Z
정리
구분 | UTC | KST |
의미 | 세계 협정시 | 한국 표준시 |
기준 | 기준값 (0) | UTC + 9시간 |
사용 | 서버 저장, 통합 로그 | 사용자 UI, 예약 시간 표시 등 |
마무리
시간은 언제나 흐르지만, 그 표현은 상황에 따라 달라집니다.
UTC와 KST의 차이를 명확히 이해하고, 이를 코드에서 정확히 처리하는 것은 예약, 일정, 만료 시간 등 핵심 기능의 신뢰도를 높이는 중요한 기초라고 생각합니다!
'TIL' 카테고리의 다른 글
설계 단계_아키텍처 설계 (0) | 2024.05.10 |
---|---|
React Query (0) | 2023.11.13 |
[React] React에서 모달을 활용한 날짜와 시간 선택 관리하기 (0) | 2023.11.12 |
TypeScript를 활용한 안전한 클라이언트-서버 통신 및 인증 관리 (0) | 2023.11.10 |
마크다운 사용 (0) | 2023.11.10 |