날짜를 짧게, 중간, 길게 또는 전체로 포맷팅하는 방법

소개

날짜 형식을 지정하려면 표시할 구성 요소와 표시 방법을 선택해야 합니다. 요일, 월 이름, 일 번호, 연도, 시간, 분, 시간대를 표시할 수 있습니다. 각 구성 요소에는 고유한 형식 지정 옵션이 있습니다. 이러한 모든 옵션을 개별적으로 구성하면 코드가 장황해지고 어떤 조합이 잘 작동하는지 이해해야 합니다.

자바스크립트의 Intl.DateTimeFormat은 일반적인 형식 지정 선택을 간단한 옵션으로 묶은 사전 설정 스타일을 제공합니다. 숫자 월, 숫자 일, 숫자 연도를 지정하는 대신 dateStyle: "short"를 요청할 수 있습니다. 시간, 분, 초 표시를 구성하는 대신 timeStyle: "medium"을 요청할 수 있습니다.

이러한 사전 설정은 모든 로케일에서 작동합니다. 동일한 스타일이 미국 영어, 독일어, 일본어 또는 아랍어로 형식을 지정하든 적절한 출력을 생성합니다. 이 강의에서는 각 스타일 수준이 제공하는 내용과 각각을 사용해야 하는 시기를 설명합니다.

dateStyle과 timeStyle이란

dateStyle 옵션은 날짜가 표시되는 방식을 제어합니다. 이는 어떤 날짜 구성 요소가 표시되고 얼마나 상세하게 표시되는지에 영향을 미칩니다. 이 옵션은 "short", "medium", "long", "full" 네 가지 값을 허용합니다.

timeStyle 옵션은 시간이 표시되는 방식을 제어합니다. 이는 어떤 시간 구성 요소가 표시되고 얼마나 상세하게 표시되는지에 영향을 미칩니다. 이 옵션은 동일한 네 가지 값을 허용합니다: "short", "medium", "long", "full".

두 옵션 모두 여러 형식 지정 옵션을 한 번에 설정하는 단축키를 제공합니다. 스타일을 지정하면 포맷터는 로케일에 따라 요일, 월, 일, 연도, 시간, 분, 초, 시간대 이름과 같은 구성 요소에 대해 적절한 값을 자동으로 선택합니다.

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

console.log(formatter.format(new Date("2025-03-15")));
// 출력: "3/15/25"

이 단일 옵션은 여러 개별 구성 요소 옵션을 설정해야 하는 것을 대체합니다.

네 가지 스타일 레벨 이해하기

각 스타일 레벨은 간결함과 상세함 사이의 서로 다른 균형을 나타냅니다. 짧은 스타일은 구성 요소를 생략하고 숫자 형식을 사용하여 공간을 최소화합니다. 전체 스타일은 모든 관련 구성 요소를 포함하고 단어를 철자 그대로 표기하여 명확성을 극대화합니다.

"short" 스타일은 좁은 공간에 적합한 간결한 출력을 생성합니다. 일반적으로 숫자 형식을 사용하고 요일 이름과 같은 보충 정보를 생략합니다.

"medium" 스타일은 적당한 수준의 세부 정보를 제공합니다. 종종 월 이름을 약어로 표시하고 균형 잡힌 시간 정밀도를 포함합니다.

"long" 스타일은 더 많은 컨텍스트를 추가합니다. 일반적으로 월 이름을 완전히 철자로 표기하고 시간대 정보와 같은 추가 구성 요소를 포함합니다.

"full" 스타일은 가장 완전한 표현을 생성합니다. 요일 이름, 전체 월 이름 및 완전한 시간대 이름과 같은 모든 관련 구성 요소를 포함합니다.

각 스타일에 대한 정확한 구성 요소와 형식은 로케일에 따라 다릅니다. 미국 영어는 독일어나 일본어와 다르게 월을 표시할 수 있지만, 상대적인 세부 수준은 모든 로케일에서 일관되게 유지됩니다.

dateStyle로 날짜 형식 지정하기

'dateStyle' 옵션은 날짜 형식을 제어합니다. 각 스타일 레벨은 동일한 날짜에 대해 다른 출력을 생성합니다.

const date = new Date("2025-03-15T14:30:00");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "3/15/25"

console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"

console.log(longFormatter.format(date));
// Output: "March 15, 2025"

console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"

짧은 스타일은 모든 숫자 값을 사용하여 가장 간결합니다. 중간 스타일은 월 이름을 약어로 표시합니다. 긴 스타일은 월을 완전히 철자로 표기합니다. 전체 스타일은 완전한 컨텍스트를 위해 요일 이름을 추가합니다.

timeStyle로 시간 형식 지정하기

timeStyle 옵션은 시간 형식을 제어합니다. 각 스타일 레벨은 서로 다른 시간 구성 요소를 표시합니다.

const date = new Date("2025-03-15T14:30:45");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "2:30 PM"

console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"

console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"

console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"

짧은 스타일은 시간과 분만 표시합니다. 중간 스타일은 초를 추가합니다. 긴 스타일은 약어로 된 시간대를 포함합니다. 전체 스타일은 시간대 이름을 완전히 철자로 표기합니다.

dateStyle과 timeStyle 결합하기

두 옵션을 함께 사용하여 완전한 타임스탬프 형식을 지정할 수 있습니다. 포맷터는 두 스타일을 독립적으로 적용합니다.

const date = new Date("2025-03-15T14:30:45");

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "short"
});

console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"

날짜는 긴 형식으로 표시되는 반면 시간은 짧은 형식을 사용합니다. 이 조합은 상세한 날짜 컨텍스트를 제공하면서 시간은 간결하게 유지합니다.

필요에 따라 모든 날짜 스타일과 시간 스타일을 혼합할 수 있습니다.

const date = new Date("2025-03-15T14:30:45");

const combinations = [
  { dateStyle: "short", timeStyle: "short" },
  { dateStyle: "medium", timeStyle: "medium" },
  { dateStyle: "long", timeStyle: "long" },
  { dateStyle: "full", timeStyle: "full" }
];

combinations.forEach(options => {
  const formatter = new Intl.DateTimeFormat("en-US", options);
  console.log(formatter.format(date));
});

// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

일치하는 스타일 레벨을 사용하면 날짜와 시간 모두에서 일관된 세부 정보를 제공합니다. 스타일을 혼합하면 한 측면을 다른 측면보다 강조할 수 있습니다.

로케일에 따른 날짜 스타일 차이

각 로케일은 자체 규칙에 따라 날짜를 형식화합니다. 동일한 스타일이라도 다른 로케일에서는 다른 출력을 생성하지만, 상대적인 세부 수준은 일관되게 유지됩니다.

const date = new Date("2025-03-15T14:30:00");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "short"
  });

  const fullFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "full"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Full:  ${fullFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 3/15/25
//   Full:  Saturday, March 15, 2025
// de-DE:
//   Short: 15.03.25
//   Full:  Samstag, 15. März 2025
// fr-FR:
//   Short: 15/03/2025
//   Full:  samedi 15 mars 2025
// ja-JP:
//   Short: 2025/03/15
//   Full:  2025年3月15日土曜日

미국 영어는 월/일/년 순서를 사용합니다. 독일어는 일.월.년 형식에 구분자로 마침표를 사용합니다. 프랑스어는 일/월/년 형식을 사용합니다. 일본어는 년/월/일 형식에 한자를 사용합니다. 전체 스타일은 각 언어에 맞는 형식으로 요일 이름을 추가합니다.

로케일에 따른 시간 스타일 차이

시간 형식도 로케일 규칙에 맞게 조정됩니다. 일부 로케일은 AM/PM 표시가 있는 12시간제를 사용하고, 다른 로케일은 24시간제를 사용합니다.

const date = new Date("2025-03-15T14:30:45");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "short"
  });

  const longFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Long:  ${longFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 2:30 PM
//   Long:  2:30:45 PM PST
// de-DE:
//   Short: 14:30
//   Long:  14:30:45 PST
// fr-FR:
//   Short: 14:30
//   Long:  14:30:45 UTC−8
// ja-JP:
//   Short: 14:30
//   Long:  14:30:45 PST

미국 영어는 AM/PM이 있는 12시간 형식을 사용합니다. 독일어, 프랑스어, 일본어는 24시간 형식을 사용합니다. 긴 스타일은 각 로케일에 적합한 형식으로 시간대 정보를 추가합니다.

짧은 스타일을 사용해야 하는 경우

짧은 스타일은 공간이 제한되어 있거나 날짜가 컴팩트한 레이아웃에 맞아야 할 때 가장 효과적입니다. 모바일 인터페이스, 데이터 테이블 및 컴팩트한 디스플레이는 최소한의 날짜 형식을 사용하는 것이 좋습니다.

테이블 열, 목록 항목 또는 가로 공간이 제한된 곳에서 날짜를 표시할 때는 짧은 날짜 스타일을 사용하세요. 숫자 형식은 철자가 표기된 월이나 요일 이름보다 적은 문자를 차지합니다.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "short"
});

const events = [
  { name: "Team meeting", date: new Date("2025-03-15") },
  { name: "Project deadline", date: new Date("2025-03-28") },
  { name: "Conference", date: new Date("2025-04-05") }
];

events.forEach(event => {
  console.log(`${event.name}: ${formatter.format(event.date)}`);
});

일정, 캘린더 또는 초 단위의 정밀도가 불필요한 곳에서 시간을 표시할 때는 짧은 시간 스타일을 사용하세요. 대부분의 상황에서는 시간과 분만 필요합니다.

중간 스타일을 사용해야 하는 경우

중간 스타일은 세부 정보와 공간 사이의 균형을 맞춥니다. 짧은 스타일보다 더 많은 컨텍스트를 제공하면서도 긴 스타일이나 전체 스타일의 장황함은 피합니다. 이는 대부분의 일반적인 날짜 및 시간 표시에 적합합니다.

적당한 공간이 있고 순수한 숫자 형식보다 더 읽기 쉬운 날짜를 원할 때는 중간 날짜 스타일을 사용하세요. 축약된 월 이름은 사용자가 숫자보다 월을 더 빠르게 식별하는 데 도움이 됩니다.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium"
});

const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"

초 단위의 정밀도가 필요하지만 시간대를 암시적으로 유지하고 싶을 때는 중간 시간 스타일을 사용하세요. 이는 사용자가 시간대 컨텍스트를 이해하는 애플리케이션 로그나 활동 피드에서 정확한 타임스탬프를 표시하는 데 적합합니다.

긴 스타일을 사용해야 하는 경우

긴 스타일은 전체 스타일처럼 장황해지지 않으면서도 추가적인 세부 정보를 제공합니다. 요일 이름과 같은 보조 구성 요소를 생략하면서 정보를 완전히 철자로 표기합니다.

강조가 필요한 중요한 날짜나 날짜를 더 자연스럽게 읽고 싶을 때 긴 날짜 스타일을 사용하세요. 완전히 철자로 표기된 월 이름은 약어보다 스캔하기 쉽습니다.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long"
});

const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"

시간대 정보가 중요할 때는 긴 시간 스타일을 사용하세요. 이는 사용자가 자신의 시간대를 기준으로 이벤트가 발생했거나 발생할 시간을 이해하는 데 도움이 됩니다.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "long",
  timeZone: "America/New_York"
});

const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"

전체 스타일을 사용해야 하는 경우

전체 스타일은 가장 완전한 날짜 및 시간 표현을 생성합니다. 모든 관련 구성 요소를 포함하므로 공간 효율성보다 명확성과 완전성이 더 중요한 상황에 적합합니다.

최대한의 컨텍스트가 필요한 날짜를 표시할 때 전체 날짜 스타일을 사용하세요. 요일을 추가하면 사용자가 주간 일정 내에서 날짜를 배치하는 데 도움이 되며, 이는 일정 관리, 계획 및 시간적 관계를 이해하는 데 유용합니다.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full"
});

const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"

완전한 시간대 컨텍스트가 필요한 시간을 표시할 때 전체 시간 스타일을 사용하세요. 전체 시간대 이름을 철자로 표기하면 다른 지역의 사용자에게 모호함이 제거됩니다.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full",
  timeStyle: "full"
});

const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

전체 스타일은 중요한 단일 이벤트, 확인 메시지 또는 사용자가 완전한 시간적 컨텍스트를 보는 것이 유익한 모든 곳에서 잘 작동합니다.

제한 사항 이해하기

The dateStyle과 timeStyle 옵션은 개별 구성 요소 옵션과 함께 사용할 수 없습니다. 스타일 프리셋을 사용하거나 구성 요소를 개별적으로 구성하는 방법 중 하나를 선택해야 합니다.

다음은 작동하지 않습니다:

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // 오류: 함께 사용할 수 없음
});

dateStyle 옵션은 이미 요일 형식을 결정합니다. 명시적인 weekday 옵션을 추가하면 충돌이 발생합니다. 동일한 제한이 timeStyle과 hour, minute, second와 같은 구성 요소 옵션에도 적용됩니다.

특정 구성 요소에 대해 더 많은 제어가 필요한 경우, 스타일 옵션을 생략하고 구성 요소를 개별적으로 구성하세요.

const formatter = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(formatter.format(new Date("2025-03-15")));
// 출력: "Saturday, March 15, 2025"

dateStyle과 timeStyle은 서로 다른 형식 지정 측면을 제어하기 때문에 함께 사용할 수 있습니다. 또한 timeZone, calendar, numberingSystem과 같이 충돌하지 않는 옵션과 함께 사용할 수 있습니다.

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "long",
  timeZone: "America/New_York"
});

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// 출력: "March 15, 2025 at 2:30:45 PM EST"

사용자 로케일에 맞는 날짜 형식 지정

브라우저의 언어 환경설정을 사용하여 각 사용자의 기대에 맞게 날짜 형식을 지정하세요. navigator.language 속성은 사용자가 선호하는 로케일을 제공합니다.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long",
  timeStyle: "short"
});

const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// 출력은 사용자의 로케일에 따라 다름
// en-US의 경우: "March 15, 2025 at 2:30 PM"
// de-DE의 경우: "15. März 2025 um 14:30"
// fr-FR의 경우: "15 mars 2025 à 14:30"

전체 navigator.languages 배열을 전달하여 폴백 동작을 활성화할 수도 있습니다. 포맷터는 배열에서 지원하는 첫 번째 로케일을 사용합니다.

const formatter = new Intl.DateTimeFormat(navigator.languages, {
  dateStyle: "medium"
});

성능을 위한 포맷터 재사용

Intl.DateTimeFormat 인스턴스를 생성하는 것은 로케일 데이터와 옵션을 처리하는 작업을 포함합니다. 동일한 설정으로 여러 날짜를 포맷팅할 때는 포맷터를 한 번 생성하고 재사용하세요.

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium",
  timeStyle: "short"
});

const events = [
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-16T10:00:00"),
  new Date("2025-03-17T16:45:00")
];

events.forEach(date => {
  console.log(formatter.format(date));
});
// 출력:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"

이 패턴은 날짜 배열을 포맷팅하거나 사용자 인터페이스에서 많은 타임스탬프를 표시할 때 성능을 향상시킵니다.

기억해야 할 사항

dateStyle과 timeStyle 옵션은 "short", "medium", "long", "full" 네 가지 사전 설정 포맷팅 레벨을 제공합니다. 각 레벨은 간결함과 상세함 사이의 균형을 다르게 나타내며, short가 가장 간결하고 full이 가장 완전합니다.

개별 날짜 및 시간 구성 요소를 수동으로 구성하는 대신 이러한 사전 설정을 사용하세요. 사전 설정은 로케일별 포맷팅 규칙을 이해할 필요 없이 모든 로케일에 대해 적절한 출력을 생성합니다.

dateStyle과 timeStyle을 함께 사용할 수 있지만 weekday나 hour와 같은 개별 구성 요소 옵션과 함께 사용할 수는 없습니다. 단순성을 위해 사전 설정 스타일을 선택하거나 세밀한 제어를 위해 개별 구성 요소를 선택하세요.

사용자의 기대에 맞게 날짜를 표시하려면 navigator.language에서 사용자의 로케일을 사용하여 날짜를 포맷팅하세요. 여러 날짜를 포맷팅할 때는 더 나은 성능을 위해 포맷터 인스턴스를 재사용하세요.