자바스크립트 Intl.DateTimeFormat을 사용하여 지역화된 날짜/시간 표시하기

10 Nov 2023

intl

자바스크립트의 Intl.DateTimeFormat 객체를 사용하면 브라우저에서 지역화된 형식으로 날짜와 시간을 표시할 수 있습니다. 이를 통해 사용자의 로캘에 따라 다른 날짜와 시간 형식을 제공할 수 있습니다. 이 글에서는 Intl.DateTimeFormat을 사용하여 어떻게 지역화된 날짜와 시간을 표시하는지 살펴보겠습니다.

Intl.DateTimeFormat 소개

Intl.DateTimeFormat은 지역화된 날짜와 시간 형식을 생성하는 JavaScript의 내장 객체입니다. 이 객체를 사용하여 날짜와 시간을 지정된 로캘에 맞게 표시할 수 있습니다. Intl.DateTimeFormat의 인스턴스를 생성할 때 로캘과 옵션을 지정할 수 있습니다. 로캘은 BCP 47 언어 태그를 사용하여 지정하며, 옵션을 사용하여 표시 형식을 세밀하게 제어할 수 있습니다.

간단한 예제

아래의 예제를 통해 Intl.DateTimeFormat을 사용하여 지역화된 날짜와 시간을 표시하는 방법을 살펴보겠습니다.

const date = new Date();

// 현재 로캘에 맞는 날짜 형식 표시
const formattedDate = new Intl.DateTimeFormat().format(date);
console.log(formattedDate);

// 로캘과 옵션을 지정하여 표시 형식 제어
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
const formattedDateWithOptions = new Intl.DateTimeFormat('ko-KR', options).format(date);
console.log(formattedDateWithOptions);

위의 코드에서 첫 번째 출력은 기본적으로 로캘에 맞는 날짜 형식으로 출력됩니다. 두 번째 출력은 로캘을 ‘ko-KR’로 지정하고 옵션으로 년, 월, 일, 요일을 표시하는 형식으로 지정되어 출력됩니다.

Intl.DateTimeFormat 옵션

Intl.DateTimeFormat의 옵션을 사용하여 표시 형식을 세부적으로 제어할 수 있습니다. 주요 옵션은 다음과 같습니다.

weekday: 요일 표시 여부 및 형식 설정 (short, long)
year: 연도 표시 여부 및 형식 설정 (numeric, 2-digit)
month: 월 표시 여부 및 형식 설정 (numeric, 2-digit, long, short)
day: 일 표시 여부 및 형식 설정 (numeric, 2-digit)
hour: 시간 표시 여부 및 형식 설정 (numeric, 2-digit)
minute: 분 표시 여부 및 형식 설정 (numeric, 2-digit)
second: 초 표시 여부 및 형식 설정 (numeric, 2-digit)
hour12: 12시간 형식 또는 24시간 형식 설정

옵션을 사용하여 날짜와 시간의 표시 형식을 자유롭게 조합할 수 있습니다. 자세한 옵션 설정에 대한 내용은 JavaScript 공식 문서를 참고하세요.

결론

자바스크립트 Intl.DateTimeFormat을 사용하면 사용자의 로캘에 맞춰 지역화된 날짜와 시간을 표시할 수 있습니다. 로캘과 옵션을 조합하여 다양한 형식의 표시를 구현할 수 있으며, 사용자 경험을 향상시킬 수 있습니다. 프로젝트에서 지역화된 날짜와 시간 표시가 필요하다면 Intl.DateTimeFormat을 적극적으로 활용해보세요!

References:

#javascript #지역화 #날짜 #시간