국가마다 다른 날짜 포맷

미국에 갔을때 가장 헷갈렸던 것 중 하나가 바로 날짜 표기였다.
한국은 yyyy/mm/dd로 표기하지만 미국은 mm/dd/yyyy 순서로 표기한다.
연도를 두자리만 표기한 인보이스는 실수를 유발했다.

내가 개발한 제품이나 서비스가 해외 유저를 대상으로 사용된다면, 유저의 지역과 언어셋을 알아내어 해당 국가의 날짜 표기 방법이나 단위를 사용하여야 한다.

다행히 모던 자바스크립트에는 Internationalizing Dates(Intl) 객체를 사용하여 이 문제를 손쉽게 해결할 수 있다.

Intl

브라우저 API 중 하나로써 언어권, 국가마다 다른 단위, 표시 방법 등의 포맷을 자동으로 변환해주는 기능을 한다.

// Syntax
new.Intl.DateTimeFormat(언어-국가, 표시옵션).format();

언어-국가 코드는 [ISO language code table]을 참고할 것

옵션으로 hour, minutes 등을 표현할 수 있는데 숫자만을 표시하는 'numeric'과 해당 언어권, 국가의 문자열 표기 방법을 사용하는 'long'을 값으로 선택할 수 있다. 하지만 설정에 따라 문자열 대신 숫자가 표시될 수도 있으니 유의할 것

// 우선 새로운 날짜 객체를 변수에 할당한다
const now = new Date();

// DateTimeFormat은 두번째 옵션 인자로서 Object parameter를 받는다
const options = {
  hour: 'numeric', // 시간은 숫자로
  minutes: 'numeric', // 분도 숫자로
  day: 'numeric', // 날도 숫자로
  month: 'long', // 달은 글자로
  year: 'numeric', // 연도는 숫자로
  weekday: 'long', // 요일은 글자로
};

// 내 브라우저로부터 설정된 언어, 지역 알아오기
const locale = navigator.language;
console.log(locale); // ko-KR

// ISO language code table
const locale = navigator.language;
console.log(locale); // ko-KR

console.log(new Intl.DateTimeFormat('en-US', options).format(now));
// Wednesday, July 21, 2021, 11 PM (북미)

console.log(new Intl.DateTimeFormat('en-UK', options).format(now));
// Wednesday, 21 July 2021, 23 (영국)

console.log(new Intl.DateTimeFormat(locale, options).format(now));
// 2021년 7월 21일 수요일 오후 11시 (나의 위치 -> 한국)

console.log(new Intl.DateTimeFormat('pt-PT', options).format(now));
// quarta-feira, 21 de julho de 2021, 23 (포르투갈)