Unix Timestamp 변환기를 만들었고 3개의 JavaScript Date API 함정에 빠졌다

Source: Dev.to

위의 소스 링크 아래에 번역하고 싶은 텍스트를 제공해 주시면, 요청하신 대로 마크다운 형식과 코드 블록, URL은 그대로 유지하면서 한국어로 번역해 드리겠습니다.

개요

API 응답이 1709654400을 반환합니다.

한눈에 어떤 날짜인지 알 수 있나요? 저는 알 수 없었습니다. Unix 타임스탬프를 변환해야 할 때마다 “Unix Timestamp converter”를 구글에 검색하고 온라인 도구에 붙여넣었습니다. 그 작은 불편함이 쌓이기 때문에, 브라우저에서 바로 실행되는 클릭 없는 변환기를 만들었습니다.

이를 만들면서 JavaScript의 Date API에서 흔히 발생하는 세 가지 함정을 발견했습니다.

함정 1: new Date(1709654400)이 1970을 반환함

문제

const date = new Date(1709654400);
console.log(date.toISOString());
// => "1970-01-20T21:34:14.400Z"

JavaScript의 Date 생성자는 밀리초를 기대하지만, Unix 타임스탬프는 초 단위이므로 결과가 1,000배 차이 나게 됩니다.

해결 방법

const date = new Date(1709654400 * 1000);
console.log(date.toISOString());
// => "2024-03-05T00:00:00.000Z"

UI가 관대하도록 단위를 자리수로 자동 감지할 수 있습니다:

function toMillis(input) {
  if (/^\d{10}$/.test(input)) return Number(input) * 1000; // seconds
  if (/^\d{13}$/.test(input)) return Number(input);      // milliseconds
  return NaN;
}

지뢰 2: 하이픈과 슬래시가 다르게 파싱됨

문제

console.log(new Date('2024-03-05').toISOString());
// => "2024-03-05T00:00:00.000Z" (UTC로 해석)

console.log(new Date('2024/03/05').toISOString());
// => "2024-03-04T15:00:00.000Z" (로컬 시간으로 해석, 예: JST)

하이픈은 UTC로 파싱되는 ISO‑8601 문자열을 생성하지만, 슬래시는 로케일에 따라 파싱되어 입력을 로컬 시간으로 처리합니다. MDN은 이러한 불일치 때문에 Date 생성자로 비‑ISO‑8601 문자열을 파싱하는 것을 강력히 권장하지 않음이라고 경고합니다.

해결 방법

ISO‑8601 호환 문자열(예: YYYY‑MM‑DD)만 허용하거나, 직접 구성 요소를 분리하고 Date.UTC로 날짜를 생성합니다:

function parseISODate(str) {
  const [year, month, day] = str.split('-').map(Number);
  return new Date(Date.UTC(year, month - 1, day));
}

Source: …

랜드마인 3: 타임존 표시 미로

문제

const offset = new Date().getTimezoneOffset();
console.log(offset); // e.g., JST: -540

getTimezoneOffset()은 UTC로부터 분 단위의 오프셋을 반환하며, 부호가 반전됩니다 (JST +9 시간 → ‑540 분). 또한 사용자의 로컬 타임존만을 보고하므로 임의의 타임존을 표시할 수 없습니다.

해결 방법 – Intl.DateTimeFormat

const date = new Date('2024-03-05T10:00:00Z');
const formatted = date.toLocaleString('en-US', {
  timeZone: 'Asia/Tokyo',
  hour12: false,
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});
console.log(formatted); // "03/05/2024, 19:00:00"

timeZone 옵션에 IANA 타임존 식별자를 제공하면 외부 라이브러리 없이도 동일한 순간을 원하는 지역의 시간으로 렌더링할 수 있습니다. 이 앱은 이를 활용해 10개 도시(UTC, JST, EST, PST, CET, GMT, IST, CST, AEST, BRT)의 비교 표를 표시합니다.

전 / 후

세 가지 함정은 “알면 명확하지만” 몰라서 놓치면 몇 시간을 낭비할 수 있습니다. 이 글이 시간을 절약하는 데 도움이 되길 바랍니다.

컨버터 사용해 보기:

References

• Date – JavaScript | MDN
• Intl.DateTimeFormat – JavaScript | MDN
• IANA 시간대 데이터베이스