728x90

언어 파일을 사용하여 다국어 지원을 구현하려면, 번역 데이터를 JSON 파일 형태로 분리하여 관리하고 자바스크립트에서 이를 로드하여 사용하는 방법이 일반적입니다. 이 방법을 사용하면 번역 데이터를 외부 파일로 쉽게 관리하고, 유지보수할 수 있습니다.

다음은 언어 파일을 사용하여 다국어 지원을 구현하는 방법을 설명합니다.

1. 언어 파일 생성

각 언어에 대한 JSON 파일을 생성하여 번역 데이터를 저장합니다. 예를 들어, en.json, ko.json, es.json 파일을 생성합니다.

en.json

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

ko.json

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

es.json

{
  "welcome": "¡Bienvenido!",
  "description": "Este es un ejemplo de aplicación multilingüe."
}

2. HTML 구조

HTML 구조는 기본적으로 동일합니다. 언어를 선택할 수 있는 드롭다운 메뉴와 텍스트 및 포맷팅 결과를 표시할 요소가 포함됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internationalization Example</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="welcome">Welcome!</h1>
    <p id="description">This is a multilingual application example.</p>
    <p id="number"></p>
    <p id="date"></p>
    <p id="currency"></p>
    <p id="unit"></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>

3. 자바스크립트 코드

번역 데이터 로드 및 적용

자바스크립트에서 언어 파일을 로드하고, 선택된 언어에 맞는 번역을 적용합니다.

// 숫자 포맷팅 함수
function formatNumber(number, locale) {
  return new Intl.NumberFormat(locale).format(number);
}

// 날짜 포맷팅 함수
function formatDate(date, locale) {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }).format(date);
}

// 통화 포맷팅 함수
function formatCurrency(amount, locale, currency) {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency,
  }).format(amount);
}

// 단위 포맷팅 함수
function formatUnit(value, unit, locale) {
  return new Intl.NumberFormat(locale, {
    style: 'unit',
    unit: unit,
  }).format(value);
}

// 번역 파일을 로드하는 함수
async function loadTranslations(language) {
  try {
    const response = await fetch(`./locales/${language}.json`);
    if (!response.ok) {
      throw new Error(`Could not load ${language}.json`);
    }
    return await response.json();
  } catch (error) {
    console.error('Error loading translation file:', error);
    return {};
  }
}

// 페이지 요소 참조
const titleElement = document.getElementById('welcome');
const descriptionElement = document.getElementById('description');
const numberElement = document.getElementById('number');
const dateElement = document.getElementById('date');
const currencyElement = document.getElementById('currency');
const unitElement = document.getElementById('unit');
const languageSelector = document.getElementById('language-selector');

// 언어 변경 함수
async function changeLanguage(language) {
  const translations = await loadTranslations(language);

  titleElement.textContent = translations.welcome || 'Welcome!';
  descriptionElement.textContent = translations.description || 'This is a multilingual application example.';

  // 숫자 및 날짜 업데이트
  const number = 1234567.89;
  const date = new Date();
  const currencyAmount = 123456.78;
  const unitValue = 25;

  numberElement.textContent = `Number: ${formatNumber(number, language)}`;
  dateElement.textContent = `Date: ${formatDate(date, language)}`;
  currencyElement.textContent = `Currency: ${formatCurrency(currencyAmount, language, 'USD')}`;
  unitElement.textContent = `Unit: ${formatUnit(unitValue, 'kilogram', language)}`;
}

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

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

주요 포인트

  1. 언어 파일 로드: fetch API를 사용하여 선택된 언어의 JSON 파일을 로드합니다.

  2. Intl API 사용: Intl.NumberFormat, Intl.DateTimeFormat 등을 사용하여 숫자, 날짜, 통화 및 단위 포맷팅을 처리합니다.

  3. 페이지 업데이트: 로드된 번역 데이터를 사용하여 페이지의 내용을 업데이트합니다.

  4. 초기화: 페이지가 로드될 때 기본 언어로 영어(en)를 설정합니다.

디렉토리 구조

이 코드를 사용하려면 다음과 같은 디렉토리 구조를 사용할 수 있습니다:

/project-root
    /locales
        en.json
        ko.json
        es.json
    index.html
    script.js

이 구조를 사용하면 각 언어의 번역 파일을 locales 폴더에 저장하고, 자바스크립트에서 이를 로드하여 다국어 지원을 구현할 수 있습니다.

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

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

Javascript 시작하기 - 사물 인식  (0) 2024.07.27
Javascript 시작하기 - 음성인식  (0) 2024.07.26
Vue.js 시작하기 - 다국어 지원  (0) 2024.07.26
Javascript 시작하기 - 다국어 방안 1  (0) 2024.07.26
React 시작하기 - 다국어 지원  (0) 2024.07.26

+ Recent posts

티스토리툴바