자바스크립트 Intl.DateTimeFormat을 사용하여 지역화된 날짜 형식 지정하기

10 Nov 2023

javascript

개요

웹 애플리케이션을 개발할 때, 사용자에게 보여지는 날짜 형식을 지역화하여 제공하는 것은 중요한 요소입니다. 자바스크립트에는 날짜와 시간을 지역화된 형식으로 표시하기 위한 Intl.DateTimeFormat 객체가 있습니다. 이를 사용하여 사용자의 로케일에 따라 날짜 형식을 자동으로 설정할 수 있습니다.

Intl.DateTimeFormat 객체 사용하기

Intl.DateTimeFormat 객체는 다양한 옵션을 제공하여 날짜와 시간을 지역화된 형식으로 표시할 수 있습니다. 이를 구현하기 위해서는 다음과 같은 단계를 따릅니다.

Intl.DateTimeFormat 객체를 생성합니다. 생성자에는 로케일과 옵션을 지정할 수 있습니다.
```
const dateFormatter = new Intl.DateTimeFormat('ko-KR', {
  // 옵션 설정
});
```

형식화할 날짜를 format() 메서드에 전달합니다.

const formattedDate = dateFormatter.format(new Date());

지역화된 형식으로 변환된 날짜를 사용합니다.
```
console.log(formattedDate); // 예: 2022. 3. 15.
```

옵션 설정하기

Intl.DateTimeFormat 객체의 옵션을 사용하여 날짜 형식을 세부적으로 제어할 수 있습니다. 몇 가지 일반적인 옵션은 다음과 같습니다.

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’ 등으로 지정하여 초 표시 방식을 설정합니다.

옵션을 사용하여 지역화된 날짜 형식을 원하는대로 조정할 수 있습니다.

예제 코드

다음은 Intl.DateTimeFormat 객체를 사용하여 한국 로케일에 맞게 날짜를 형식화하는 예제 코드입니다.

const dateFormatter = new Intl.DateTimeFormat('ko-KR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});

const formattedDate = dateFormatter.format(new Date());
console.log(formattedDate); // 예: 2022년 3월 15일

결론

자바스크립트의 Intl.DateTimeFormat 객체를 사용하면 사용자의 로케일에 맞게 날짜 형식을 지정할 수 있습니다. 이를 통해 웹 애플리케이션에서 사용자가 이해하기 쉬운 형태로 날짜를 표시할 수 있습니다.

#javascript #날짜지역화

참고 자료

[Intl.DateTimeFormat - JavaScript MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)