SMALL
지원하는 언어에 따라 html 페이지를 분리하는 것을 방지하기 위해 작성하였다.
또한 지원하는 언어를 미리 json으로 저장해 두고, 사용자가 설정한 언어(또는 기본 언어)로 변경하여 번역된 텍스트를 제공하고자 한다.
폴더 구조는 아래와 같이 구성되어 있다.
translationModule.js는 아래와 같이 작성한다.
const translationsCache = {};
// JSON 파일 불러오기
export async function loadTranslations(lang) {
if (translationsCache[lang]) {
return translationsCache[lang];
}
const res = await fetch(`./locales/${lang}.json`);
if (!res.ok) {
throw new Error(`Failed to load ${lang} translations`);
}
const data = await res.json();
translationsCache[lang] = data;
return data;
}
// 화면 내 data-i18n 텍스트 치환
export function applyTranslations(translations) {
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n');
const translation = translations[key];
if (translation) {
if (el.tagName.toLowerCase() === 'title') {
document.title = translation;
} else {
el.textContent = translation;
}
}
});
}
// 언어 변경 시 호출 함수
export async function changeLanguage(lang) {
const translations = await loadTranslations(lang);
applyTranslations(translations);
return translations;
}
번역 파일인 ko.json과 en.json은 아래와 같이 각각 작성한다.
{
"welcome_message": "환영합니다",
"description": "이것은 간단한 다국어 지원 예제입니다."
}{
"welcome_message": "Welcome",
"description": "This is a simple multilingual support example."
}
화면을 출력하는 html을 작성하고, translationModule.js를 import 한다.
그리고 기능 제공 용 태그도 추가한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-i18n="welcome_message"></title>
</head>
<body>
<p data-i18n="description"></p>
<hr size="3">
<!-- 존재하지 않는 키-->
<p data-i18n="unknown_key"></p>
<hr size="3">
<!-- 언어 변경 -->
<select id="lang-select">
<option value="en">English</option>
<option value="ko">한국어</option>
</select>
<!-- 번역 관련 스크립트 -->
<script type="module">
import { changeLanguage } from './locales/translationModule.js';
window.addEventListener('DOMContentLoaded', async () => {
// URL에서 language 파라미터 값 얻기
const urlParams = new URLSearchParams(window.location.search);
let defaultLang = urlParams.get('language');
// language 파라미터가 없거나 지원하지 않는 값이면 기본을 en으로 설정
if (!defaultLang || (defaultLang !== 'en' && defaultLang !== 'ko')) {
defaultLang = 'en';
}
// 언어 변경 함수 호출
await changeLanguage(defaultLang);
// 언어 선택 셀렉터가 있다면 선택값 변경 (있으면)
const langSelectElem = document.getElementById('lang-select');
if (langSelectElem) {
langSelectElem.value = defaultLang;
langSelectElem.addEventListener('change', async (e) => {
await changeLanguage(e.target.value);
// URL의 language 파라미터를 바꿔서 페이지를 리로드하거나
// 히스토리 API를 이용해 깨끗하게 URL을 변경할 수 있음
});
}
});
</script>
</body>
</html>
아래는 출력 내용이다.
키가 파일에서 누락된 경우 공백으로 나오며, js에서 changeLanguage()를 호출하는 경우나
url에서 language=ko인 부분을 language=en으로 변경할 시 html 페이지가 번역된다.
LIST