국제화(i18n)는 소프트웨어를 다국어 환경에서 동작하도록 하는 과정입니다. 자바스크립트에서는 JSON 데이터를 활용하여 국제화를 처리할 수 있습니다. 이번 포스트에서는 자바스크립트에서 JSON 데이터를 사용하여 국제화를 처리하는 방법에 대해 알아보겠습니다.

1. JSON 파일 준비하기

먼저, 국제화를 처리하기 위해 다국어별로 번역된 텍스트 정보를 담은 JSON 파일을 준비해야 합니다. 예를 들어, 다음과 같은 형태의 JSON 파일을 만들 수 있습니다.

{
  "en": {
    "greeting": "Hello!",
    "welcome": "Welcome to our website!"
  },
  "ko": {
    "greeting": "안녕하세요!",
    "welcome": "우리 웹사이트에 오신 것을 환영합니다!"
  }
}

위 예시에서는 영어와 한국어에 대한 번역 정보를 가지고 있습니다. 각 언어별로 키와 해당하는 번역된 값이 포함되어 있습니다.

2. JSON 파일 로드하기

자바스크립트에서는 fetch 함수를 사용하여 JSON 파일을 로드할 수 있습니다. 다음은 JSON 파일을 로드하는 예제 코드입니다.

const lang = 'ko'; // 사용할 언어 선택

fetch('/path/to/translations.json')
  .then(response => response.json())
  .then(data => {
    // 로드한 JSON 데이터를 변수에 저장
    const translations = data;
    
    // 사용자가 선택한 언어에 맞는 번역값을 불러와서 화면에 표시
    console.log(translations[lang].greeting); // 출력: "안녕하세요!"
    console.log(translations[lang].welcome); // 출력: "우리 웹사이트에 오신 것을 환영합니다!"
  })
  .catch(error => {
    console.error('Error:', error);
  });

위 코드에서는 fetch 함수를 사용하여 /path/to/translations.json 경로의 JSON 파일을 로드합니다. 로드한 JSON 데이터는 translations 변수에 저장됩니다. 사용자가 선택한 언어에 따라 translations 객체에서 해당하는 번역값을 불러와서 화면에 표시할 수 있습니다.

3. 국제화 적용하기

이제 로드한 JSON 데이터를 활용하여 국제화를 적용해보겠습니다. 예를 들어, 웹페이지에서 인사말과 환영 메시지를 국제화하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

const langSelect = document.getElementById('lang-select');
const greetingMessage = document.getElementById('greeting-message');
const welcomeMessage = document.getElementById('welcome-message');

langSelect.addEventListener('change', () => {
  const lang = langSelect.value; // 선택된 언어 값 가져오기

  // 선택된 언어에 맞는 번역값을 불러와서 화면에 표시
  greetingMessage.textContent = translations[lang].greeting;
  welcomeMessage.textContent = translations[lang].welcome;
});

위 코드에서는 언어 선택에 따라 langSelect 요소의 change 이벤트가 발생하면 해당 언어에 맞는 번역값을 불러와서 화면에 표시합니다.

마무리

자바스크립트에서 JSON 데이터를 사용하여 국제화를 처리하는 방법에 대해 알아보았습니다. JSON 파일을 준비하고 로드한 후, 언어 선택에 따라 해당 언어의 번역값을 화면에 표시할 수 있습니다. 이를 통해 소프트웨어를 다국어 환경에서 효과적으로 사용할 수 있습니다.