현대의 웹 애플리케이션은 글로벌 시장에 서비스를 제공하기 위해 다국어 지원을 필요로 합니다. 사용자에게 자연스러운 경험을 제공하기 위해서는 날짜, 시간, 숫자, 통화 등의 형태의 단어를 각 나라의 언어에 맞게 처리할 필요가 있습니다. 자바스크립트에서는 Intl API를 사용하여 다국어 형태의 단어를 처리할 수 있습니다.
Intl API란?
Intl API는 자바스크립트의 내장 객체로, 다국어 환경에서 문자열 형태의 데이터를 형식화할 수 있는 기능을 제공합니다. Intl API는 글로벌화된 웹 애플리케이션을 구현하는 데 필수적인 도구입니다. 다양한 언어와 문화권에 따라 다른 형식화 규칙을 적용할 수 있으며, 예를 들어 통화 단위, 날짜 형식, 숫자 포맷 등을 자유롭게 조정할 수 있습니다.
날짜와 시간 형식화하기
자바스크립트에서는 Intl.DateTimeFormat 객체를 사용하여 날짜와 시간을 형식화할 수 있습니다. 다음은 “ko-KR” (대한민국) 로케일을 기준으로 형식화된 날짜와 시간을 표시하는 예제입니다.
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);
위의 예제에서, Intl.DateTimeFormat
생성자 함수에 ‘ko-KR’과 같은 로케일과 옵션 객체를 인수로 전달하여 새로운 형식화 객체를 생성합니다. 그 후, format
메소드를 사용하여 형식화된 결과를 얻을 수 있습니다.
숫자 형식화하기
위와 같이 자바스크립트에서는 Intl.NumberFormat 객체를 사용하여 숫자를 형식화할 수 있습니다. 아래는 “en-US” (미국) 로케일을 기준으로 형식화된 통화를 표시하는 예제입니다.
const number = 123456.789;
const options = { style: 'currency', currency: 'USD' };
const formatter = new Intl.NumberFormat('en-US', options);
const formattedNumber = formatter.format(number);
console.log(formattedNumber);
위 예제에서도, Intl.NumberFormat
생성자 함수에 로케일과 옵션 객체를 전달하여 새로운 형식화 객체를 생성하고, format
메소드를 사용하여 형식화된 결과를 얻습니다.
마치며
Intl API를 사용하면 자바스크립트로 다국어 형태의 단어를 처리할 수 있습니다. 날짜와 시간, 숫자 등 다양한 데이터를 로케일과 형식화 옵션에 맞게 다양한 언어로 변환할 수 있습니다. 다국어 지원을 통해 사용자에게 더 나은 경험을 제공할 수 있고, 글로벌 시장에서 경쟁력을 갖출 수 있습니다.
참고 자료:
- MDN web docs - Intl
- JavaScript.info - Intl: Internationalization API
- Google developers - Working with internationalization
- W3Schools - JavaScript Internationalization
- ECMAScript® 2022 Internationalization API Specification