728x90

순수 자바스크립트로 다국어 지원을 구현하는 것은 다양한 방식으로 접근할 수 있습니다. 여기서는 간단한 예제를 통해 언어 선택 및 변경이 가능한 다국어 지원 기능을 구현하는 방법을 설명하겠습니다.

순수 자바스크립트 다국어 지원

1. HTML 구조

먼저, 언어 선택을 위한 드롭다운 메뉴와 번역할 텍스트를 포함하는 간단한 HTML 페이지를 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multilingual Support</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f9;
        }
        select {
            margin: 10px;
            padding: 5px;
            font-size: 16px;
        }
        h1, p {
            margin: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 id="title">Welcome!</h1>
    <p id="description">This is a multilingual application example.</p>

    <select id="language-selector">
        <option value="en">English</option>
        <option value="ko">한국어</option>
        <option value="es">Español</option>
    </select>

    <script src="script.js"></script>
</body>
</html>

2. 번역 데이터

이제 자바스크립트에서 사용할 번역 데이터를 객체 형태로 정의합니다. 언어 코드(en, ko, es 등)를 키로 하여 각각의 번역 텍스트를 포함하는 객체를 만들어 줍니다.

script.js 파일

const translations = {
  en: {
    title: 'Welcome!',
    description: 'This is a multilingual application example.',
  },
  ko: {
    title: '환영합니다!',
    description: '이것은 다국어 애플리케이션 예제입니다.',
  },
  es: {
    title: '¡Bienvenido!',
    description: 'Este es un ejemplo de aplicación multilingüe.',
  },
};

// 페이지 요소 참조
const titleElement = document.getElementById('title');
const descriptionElement = document.getElementById('description');
const languageSelector = document.getElementById('language-selector');

// 언어 변경 함수
function changeLanguage(language) {
  const translation = translations[language];
  if (translation) {
    titleElement.textContent = translation.title;
    descriptionElement.textContent = translation.description;
  }
}

// 드롭다운 메뉴에서 언어 선택 시 이벤트 핸들러
languageSelector.addEventListener('change', (event) => {
  changeLanguage(event.target.value);
});

// 초기 언어 설정
changeLanguage('en');

3. 설명

위의 코드 예제를 통해 간단한 다국어 지원 기능을 구현할 수 있습니다. 다음은 각 부분에 대한 설명입니다.

  1. 번역 데이터 구조: translations 객체는 각 언어에 대한 번역된 텍스트를 저장합니다. 여기서 각 언어는 고유의 언어 코드로 식별됩니다.

  2. 요소 선택 및 초기화: document.getElementById를 사용하여 HTML 요소를 선택하고, changeLanguage 함수를 호출하여 초기 언어를 설정합니다.

  3. 언어 변경 로직:

    • changeLanguage 함수는 전달된 언어 코드에 따라 적절한 번역을 선택하고, 페이지의 텍스트 내용을 업데이트합니다.
    • 번역이 존재하는지 확인하고, 존재할 경우에만 텍스트를 변경하여 안전성을 확보합니다.

  4. 이벤트 리스너: 언어 선택 드롭다운 메뉴에 이벤트 리스너를 추가하여 사용자가 언어를 선택할 때마다 changeLanguage 함수를 호출합니다.

4. 다국어 지원 확장

위 예제는 기본적인 다국어 지원 기능을 제공합니다. 이를 기반으로 더 복잡한 요구 사항을 충족하기 위해 확장할 수 있습니다.

(1) 동적 콘텐츠 업데이트

만약 페이지에 더 많은 번역이 필요하다면, data-* 속성을 활용하여 동적으로 번역할 요소를 식별하고 업데이트할 수 있습니다.

<h1 data-i18n="title">Welcome!</h1>
<p data-i18n="description">This is a multilingual application example.</p>
function changeLanguage(language) {
  const translation = translations[language];
  if (translation) {
    document.querySelectorAll('[data-i18n]').forEach((element) => {
      const key = element.getAttribute('data-i18n');
      if (translation[key]) {
        element.textContent = translation[key];
      }
    });
  }
}

(2) JSON 파일로 번역 관리

번역 데이터를 별도의 JSON 파일로 관리하면, 더 많은 번역 문자열을 체계적으로 관리할 수 있습니다.

  • locales/en.json:

    {
  "title": "Welcome!",
  "description": "This is a multilingual application example."
}

  • locales/ko.json:

    {
  "title": "환영합니다!",
  "description": "이것은 다국어 애플리케이션 예제입니다."
}

(3) 비동기 번역 로드

많은 언어와 번역 데이터가 있을 경우, JSON 파일을 비동기로 로드하여 초기 로딩 시간을 줄일 수 있습니다.

async function loadTranslations(language) {
  try {
    const response = await fetch(`locales/${language}.json`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error loading translation:', error);
    return null;
  }
}

async function changeLanguage(language) {
  const translation = await loadTranslations(language);
  if (translation) {
    document.querySelectorAll('[data-i18n]').forEach((element) => {
      const key = element.getAttribute('data-i18n');
      if (translation[key]) {
        element.textContent = translation[key];
      }
    });
  }
}

// 초기 언어 설정
changeLanguage('en');

5. 추가 고려 사항

  • 사용자 언어 감지: navigator.language 또는 navigator.languages를 사용하여 사용자의 브라우저 언어 설정을 감지하고, 이를 통해 초기 언어를 설정할 수 있습니다.

    const userLang = navigator.language || navigator.userLanguage;
changeLanguage(userLang.split('-')[0]);

  • 쿠키 또는 로컬 스토리지 사용: 사용자가 선택한 언어를 쿠키나 localStorage에 저장하여, 페이지를 새로고침해도 이전에 선택한 언어를 유지할 수 있도록 할 수 있습니다.

    // 언어 변경 시 저장
languageSelector.addEventListener('change', (event) => {
  const selectedLanguage = event.target.value;
  changeLanguage(selectedLanguage);
  localStorage.setItem('selectedLanguage', selectedLanguage);
});

// 초기 언어 설정 시 저장된 언어 사용
const savedLanguage = localStorage.getItem('selectedLanguage');
changeLanguage(savedLanguage || 'en');

  • 다양한 텍스트 포맷 지원: 날짜, 숫자, 통화 등의 포맷은 각 지역에 맞게 변경되어야 합니다. 이는 Intl API를 사용하여 구현할 수 있습니다.

    const number = 1234567.89;
const formattedNumber = new Intl.NumberFormat('en-US').format(number);
console.log(formattedNumber); // "1,234,567.89"

이러한 방법을 통해 순수 자바스크립트 환경에서 효율적으로 다국어 지원을 구현할 수 있습니다. 이 예제를 기반으로 실제 프로젝트의 요구 사항에 맞게 확장하고, 추가적인 국제화 기능을 구현할 수 있습니다.

728x90
반응형
저작자표시 비영리 동일조건

'Software > JavaScript' 카테고리의 다른 글

Javascript 시작하기 - 다국어 방안 2  (0) 2024.07.26
Vue.js 시작하기 - 다국어 지원  (0) 2024.07.26
React 시작하기 - 다국어 지원  (0) 2024.07.26
React 시작하기 - 웹 컴포넌트 및 라이브러리 사용  (0) 2024.07.26
React 시작하기 - 웹 컴포넌트 사용  (0) 2024.07.26

+ Recent posts

티스토리툴바