국제화(i18n)는 웹 애플리케이션을 다국어로 제공하는 방법을 의미합니다. 자바스크립트에서 이를 처리하기 위해 일반적으로 JSON 데이터를 사용하며, 이번 블로그 포스트에서는 자바스크립트에서 JSON 데이터를 활용하여 국제화를 처리하는 방법을 알아보겠습니다.

JSON 파일 작성하기

먼저, 국제화를 위한 다국어 문장과 해당 문장에 대한 번역을 JSON 형식으로 작성해야 합니다. 예를 들어, 다음과 같이 translations.json 파일을 작성할 수 있습니다.

{
  "en": {
    "greeting": "Hello",
    "message": "Welcome to our website"
  },
  "ko": {
    "greeting": "안녕하세요",
    "message": "우리 웹사이트에 오신 것을 환영합니다"
  },
  "ja": {
    "greeting": "こんにちは",
    "message": "ウェブサイトへようこそ"
  }
}

위의 JSON 파일은 영어(en), 한국어(ko), 일본어(ja)로 작성된 국제화 문장들을 포함하고 있습니다. greeting은 인사를 위한 문장이고, message는 웹사이트에 대한 환영 메시지입니다.

자바스크립트에서 JSON 파일 불러오기

불러온 JSON 데이터를 자바스크립트에서 활용하기 위해 Ajax를 사용하여 JSON 파일을 불러올 수 있습니다. 예를 들어, 다음과 같은 코드를 사용하여 translations.json 파일을 불러올 수 있습니다.

function loadTranslations(locale) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `translations.json`);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = function() {
      reject(xhr.statusText);
    };
    xhr.send();
  });
}

위의 코드는 loadTranslations 함수를 정의하고, XMLHttpRequest를 사용하여 translations.json 파일을 비동기적으로 로드합니다. 성공적으로 파일을 불러오면 Promise를 통해 JSON 데이터를 반환합니다.

국제화 문장 표시하기

불러온 JSON 데이터를 활용하여 웹 애플리케이션에서 국제화 문장을 표시할 수 있습니다. 예를 들어, 다음과 같은 코드를 사용하여 greeting 문장을 표시할 수 있습니다.

function displayGreeting(locale) {
  loadTranslations(locale)
    .then((translations) => {
      const greeting = translations[locale].greeting;
      document.getElementById('greeting').textContent = greeting;
    })
    .catch((error) => {
      console.error('Failed to load translations:', error);
    });
}

위의 코드는 displayGreeting 함수를 정의하고, loadTranslations 함수를 사용하여 JSON 데이터를 불러온 뒤 해당 번역을 화면에 표시합니다. 이를 위해 greeting 문장이 표시될 HTML 요소에 id를 부여해야 합니다.

결론

JSON 데이터를 사용하여 국제화(i18n)를 처리하는 방법을 알아보았습니다. JSON 파일을 작성하고, 자바스크립트에서 이를 비동기적으로 로드하여 다국어 문장을 적절하게 표시할 수 있습니다. 자바스크립트를 통해 국제화를 구현하면 사용자들에게 더욱 다양한 언어 옵션을 제공할 수 있으며, 전세계 사용자들에게 웹 애플리케이션을 더욱 친숙하게 만들 수 있습니다.