Intl(Internationalization) API

1. Intl이란?

Intl은 JavaScript의 국제화 API로, 다양한 언어와 지역에 맞는 날짜, 숫자, 통화 등의 서식을 지원합니다. Intl 객체는 여러 생성자를 제공하여 각각의 용도에 맞는 포맷팅을 할 수 있게 해줍니다.

2. NumberFormat

Intl.NumberFormat은 숫자를 해당 언어의 표현 방식에 맞게 변환해주는 생성자입니다.

기본 사용법

const number = 123456.789;

// 기본 숫자 포맷
console.log(new Intl.NumberFormat('ko-KR').format(number));
// 결과: "123,456.789"

// 통화 표시
console.log(new Intl.NumberFormat('ko-KR', {
  style: 'currency',
  currency: 'KRW'
}).format(number));
// 결과: "₩123,457"

// 단위 표시
console.log(new Intl.NumberFormat('ko-KR', {
  style: 'unit',
  unit: 'kilometer-per-hour'
}).format(number));
// 결과: "123,456.789km/h"

주요 옵션

const options = {
  style: 'decimal' | 'currency' | 'percent' | 'unit',
  currency: 'USD' | 'EUR' | 'KRW' | ...,
  notation: 'standard' | 'scientific' | 'engineering' | 'compact',
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
};

단위 표기 예시

// 백만, 억, 조 단위로 표시
const largeNumber = 1234567890;
console.log(new Intl.NumberFormat('ko-KR', {
  notation: 'compact',
  maximumFractionDigits: 1
}).format(largeNumber));
// 결과: "12.3억"

3. DateTimeFormat

Intl.DateTimeFormat은 날짜와 시간을 지역화된 형식으로 표현합니다.

const date = new Date();

// 기본 날짜 표시
console.log(new Intl.DateTimeFormat('ko-KR').format(date));
// 결과: "2024. 3. 21."

// 상세 옵션 지정
console.log(new Intl.DateTimeFormat('ko-KR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  timeZone: 'Asia/Seoul'
}).format(date));
// 결과: "2024년 3월 21일 목요일 오후 2시 30분 45초"

4. Collator

Intl.Collator는 문자열 비교와 정렬을 지역화된 방식으로 수행합니다.

const texts = ['제시카', '안나', '바나나', '사과'];
const collator = new Intl.Collator('ko-KR');

// 한글 정렬
console.log(texts.sort(collator.compare));
// 결과: ['안나', '바나나', '사과', '제시카']

5. 실제 활용 사례

전자상거래 사이트

// 상품 가격 표시
const price = 1250000;
const formatter = new Intl.NumberFormat('ko-KR', {
  style: 'currency',
  currency: 'KRW'
});

console.log(formatter.format(price));  // "₩1,250,000"

// 할인율 표시
const discount = 0.15;
const percentFormatter = new Intl.NumberFormat('ko-KR', {
  style: 'percent',
  minimumFractionDigits: 0
});

console.log(percentFormatter.format(discount));  // "15%"

소셜 미디어 앱

// 조회수 표시
const views = 1234567;
const compactFormatter = new Intl.NumberFormat('ko-KR', {
  notation: 'compact',
  maximumFractionDigits: 1
});

console.log(compactFormatter.format(views));  // "123.5만"

// 게시 시간 표시
const postDate = new Date('2024-03-20T15:30:00');
const dateFormatter = new Intl.DateTimeFormat('ko-KR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(dateFormatter.format(postDate));
// "2024년 3월 20일 오후 3시 30분"

6. 브라우저 지원 현황

Intl API는 현재 모든 주요 브라우저에서 지원됩니다:

• Chrome: 24+
• Firefox: 29+
• Safari: 10+
• Edge: 12+

결론

Intl API는 웹 애플리케이션의 국제화를 매우 쉽게 만들어줍니다. 복잡한 포맷팅 로직을 직접 구현할 필요 없이, 브라우저의 내장 기능을 활용하여 안정적이고 효율적인 국제화를 구현할 수 있습니다.

이 API를 활용하면 다국어 지원이 필요한 웹사이트나 숫자, 날짜 등의 지역화된 표시가 필요한 애플리케이션을 더욱 쉽게 개발할 수 있습니다.