웹 애플리케이션을 개발하다보면 날짜를 다양한 형식으로 표시해야 할 때가 있습니다. 이러한 경우, 지역화된 날짜 형식을 사용하는 것이 중요합니다. 자바스크립트에는 이러한 요구를 해결하기 위한 Intl.DateTimeFormat이라는 내장 객체가 있습니다.
Intl.DateTimeFormat 객체는 사용자의 지역 설정을 자동으로 감지하고 그에 따라 날짜 및 시간 형식을 지정할 수 있습니다. 이를 통해 사용자는 보다 익숙한 형식으로 날짜를 표시할 수 있고, 애플리케이션은 지역별로 다른 날짜 형식을 지원할 수 있게 됩니다.
Intl.DateTimeFormat 기본 사용법
Intl.DateTimeFormat을 사용하려면 대상 날짜를 Date 객체로 변환한 다음, 해당 객체를 Intl.DateTimeFormat에 전달하고 필요한 옵션을 설정해야 합니다.
const date = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formatter = new Intl.DateTimeFormat('ko-KR', options);
const formattedDate = formatter.format(date);
console.log(formattedDate);
위의 예제에서는 현재 날짜를 Date 객체로 생성한 다음, ko-KR로 지정된 한국어 지역 설정과 함께 Intl.DateTimeFormat 객체를 생성합니다. 이후 options 객체를 통해 원하는 날짜 형식을 지정하고, format() 메서드를 통해 형식에 맞게 날짜를 포맷합니다.
위의 예제를 실행하면 “2021년 1월 15일”과 같은 형식으로 날짜가 출력될 것입니다.
Intl.DateTimeFormat 옵션
Intl.DateTimeFormat 객체의 옵션을 조정해서 날짜를 다양한 형식으로 표시할 수 있습니다. 가장 일반적인 옵션은 다음과 같습니다.
year: 연도 표시 옵션 (numeric, 2-digit)month: 월 표시 옵션 (numeric, 2-digit, long, short, narrow)day: 일 표시 옵션 (numeric, 2-digit)hour: 시간 표시 옵션 (numeric, 2-digit)minute: 분 표시 옵션 (numeric, 2-digit)second: 초 표시 옵션 (numeric, 2-digit)hour12: 12시간 단위 표시 여부 (true, false)timeZone: 시간대 설정
옵션을 조합하고 자신에게 필요한 형식을 만들 수 있습니다.
결론
Intl.DateTimeFormat을 사용하면 웹 애플리케이션에서 지역화된 날짜 형식을 쉽게 지정할 수 있습니다. 이를 통해 사용자는 익숙한 형식으로 날짜를 볼 수 있고, 애플리케이션은 지역별로 형식을 제공할 수 있게 됩니다. 날짜를 지역화할 때는 항상 사용자의 편의를 고려하고, Intl.DateTimeFormat의 다양한 옵션을 적절히 활용하시기 바랍니다.
Reference: