자바스크립트 Intl API를 사용하여 다국어로 표시된 시간대 정보 사용하기

10 Nov 2023

intl

현대 웹 애플리케이션은 전 세계 사용자를 대상으로 하기 때문에 다국어 지원이 필수적입니다. 시간대 정보는 사용자가 위치한 지역에 따라 다를 수 있으므로, 사용자가 이해하기 쉽고 편리한 방식으로 표시되어야 합니다. 자바스크립트의 Intl API를 사용하면 다국어로 표시된 시간대 정보를 쉽게 제공할 수 있습니다.

Intl API 소개

Intl API는 자바스크립트에서 지역화된 형식의 데이터를 다루는 데 사용되는 API입니다. 이 API를 사용하면 날짜, 시간, 숫자, 통화 등의 데이터를 다국어로 형식화할 수 있습니다.

Intl API는 다양한 기능과 객체를 제공합니다. 이 중에서도 시간대 정보를 표시하는 데 사용되는 DateTimeFormat 객체가 있습니다. DateTimeFormat 객체를 사용하면 원하는 언어, 지역 및 시간대에 맞게 형식화된 시간 정보를 생성할 수 있습니다.

다국어로 표시된 시간대 정보 사용하기

다국어로 표시된 시간대 정보를 사용하기 위해서는 다음과 같은 단계를 따를 수 있습니다.

DateTimeFormat 객체를 생성하고 원하는 언어를 지정합니다.
format 메서드를 사용하여 형식화된 시간대 정보를 생성합니다.
생성된 형식화된 시간대 정보를 웹 페이지에 표시합니다.

다음은 자바스크립트에서 Intl API를 사용하여 다국어로 표시된 시간대 정보를 사용하는 예제 코드입니다.

const timeZone = 'America/Los_Angeles'; // 표시할 시간대 정보
const language = 'ko-KR'; // 표시할 언어

const options = {
  timeZone,
  hour: 'numeric',
  minute: 'numeric',
  hour12: true,
};

const formatter = new Intl.DateTimeFormat(language, options);
const formattedTime = formatter.format(new Date());

document.getElementById('time').textContent = formattedTime;

위 예제 코드에서는 ‘America/Los_Angeles’ 시간대를 ‘ko-KR’ 언어로 표시하도록 설정하였습니다. DateTimeFormat 객체의 format 메서드를 호출하여 형식화된 시간대 정보를 생성하고, 이를 time이라는 id를 가진 HTML 요소에 표시하는 방식입니다.

이와 같이 Intl API를 활용하면 다국어로 표시된 시간대 정보를 웹 애플리케이션에서 쉽게 사용할 수 있습니다.

마무리

Intl API를 사용하여 다국어로 표시된 시간대 정보를 사용하는 방법을 알아보았습니다. 다국어 지원은 현대적인 웹 애플리케이션에서 필수적인 요소이며, 사용자 경험을 향상시키는 데 큰 역할을 합니다. 자바스크립트의 Intl API를 활용하여 다국어로 표시된 시간대 정보를 손쉽게 제공할 수 있으며, 사용자들에게 더 나은 서비스를 제공할 수 있습니다.

더 많은 정보와 예제 코드는 MDN web docs를 참조하시기 바랍니다.

#javascript #IntlAPI