다국어 웹 애플리케이션을 개발할 때, 통화 표시를 올바르게 다국어로 표시하는 것은 중요한 과제 중 하나입니다. 자바스크립트에서 이를 처리하기 위해 Intl API를 활용할 수 있습니다. Intl API는 다양한 지역과 통화에 대한 다국어 지원을 제공합니다. 이번 블로그 게시물에서는 자바스크립트를 사용하여 다국어 통화 표시를 하는 방법을 알아보겠습니다.

1. 통화 코드 얻기

우선 통화를 표시할 때 필요한 통화 코드를 얻어야 합니다. 통화 코드는 ISO 4217 표준에 따라 정의되어 있습니다. 자바스크립트 Intl API를 사용하여 통화 코드를 얻는 방법은 다음과 같습니다.

const currencyCode = new Intl.NumberFormat().resolvedOptions().currency;

위 코드를 실행하면 현재 사용자의 로캘에 맞는 통화 코드가 얻어집니다.

2. 지역과 통화 표시하기

다음으로는 얻은 통화 코드를 사용하여 지역과 함께 통화를 표시해야 합니다. 아래의 예제 코드를 통해 이를 확인해 보겠습니다.

const price = 1234.56;
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: currencyCode });

console.log(formatter.format(price));

위 코드는 영어(미국) 로캘이라고 가정하고, currencyCode에 해당하는 통화로 price를 표시하는 예제입니다. 이를 실행하면 “USD 1,234.56” 같은 형태로 통화가 표시됩니다.

3. 세부 설정하기

Intl API를 사용하여 통화를 표시할 때, 세부 설정을 추가할 수도 있습니다. 예를 들어, 소수점의 자릿수를 조절하거나 통화 기호의 위치를 바꿀 수도 있습니다. 아래의 예제 코드는 소수점 이하 두 자리까지 표시하고, 통화 기호를 숫자 앞에 표시하는 방법을 보여줍니다.

const price = 1234.56;
const formatter = new Intl.NumberFormat('en-US', { 
  style: 'currency', 
  currency: currencyCode, 
  minimumFractionDigits: 2, 
  maximumFractionDigits: 2,
  currencyDisplay: 'symbol'
});

console.log(formatter.format(price));

위 코드를 실행하면 “USD 1,234.56”과 같이 통화가 표시됩니다.

결론

이와 같이 자바스크립트의 Intl API를 활용하여 다국어 통화 표시를 할 수 있습니다. 통화 코드를 얻고, 해당 통화 코드와 설정을 활용하여 통화를 표시하는 방법을 알아보았습니다. 자세한 내용은 MDN web docs를 참조하시기 바랍니다.

#javascript #i18n