날짜를 short, medium, long 또는 full로 형식화하는 방법

소개

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

JavaScript의 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")));
// Output: "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"

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

제한 사항 이해하기

dateStyle 및 timeStyle 옵션은 개별 구성 요소 옵션과 함께 사용할 수 없습니다. 스타일 사전 설정을 사용하거나 구성 요소를 개별적으로 구성하는 것 중 하나를 선택해야 합니다.

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

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // Error: cannot combine
});

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")));
// Output: "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")));
// Output: "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));
// Output varies by user's locale
// For en-US: "March 15, 2025 at 2:30 PM"
// For de-DE: "15. März 2025 um 14:30"
// For 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));
});
// Output:
// "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에서 사용자의 로케일을 사용하여 날짜를 형식화하면 각 사용자의 기대에 맞게 날짜를 표시할 수 있습니다. 여러 날짜를 형식화할 때는 포매터 인스턴스를 재사용하면 성능이 향상됩니다.