국제화(Internationalization)는 홈페이지의 내용을 다국어로 지원하는 것을 뜻합니다.

백엔드 측에서 하는 방법이 있고 프론트엔드 측에서 하는 방법이 있는데 백엔드에 대한 국제화 작업은 스프링 부트, Thymeleaf 기준으로 한 다음 글을 참조해주세요. Spring Boot: 국제화(Internationalization)

제이쿼리에서도 국제화 지원을 위한 기능이 있고 이러한 라이브러리(i18n)도 있는데 처음에는 라이브러리 없이 진행해보도록 하겠습니다.

먼저 자바스크립트에서 브라우저의 언어를 알아내는 방법은 다음과 같습니다.

function getLanguage() {
  return navigator.language || navigator.userLanguage;
}

출처 바로가기

최신 브라우저라면 ko-KR, en-US 등으로 값이 리턴될 것입니다. 이러한 언어 코드 테이블은 이 사이트에 가면 표로 나와 있습니다.

 

예제: 라이브러리 없는 간단한 다국어 적용 페이지


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="title" data-lang="title">[title]</h1>
<p id="content" data-lang="content">[content]</p>
<p id="language"><span data-lang="now_sys_lang">[now-sys-lang]</span> : <span id="locale"></span></p>
<button id="btn-en">English</button> <button id="btn-ko">한국어</button>
<script>
// 언어별 JSON 파일 (간략화)
const lang = {
en: {
title: "Hello.",
content: "This is a content area",
now_sys_lang: "System locale"
},
ko: {
title: "안녕하세요.",
content: "여기는 컨텐츠 구역입니다.",
now_sys_lang: "시스템 로캘"
}
}
// ** 현재 브라우저의 언어 가져오기 **
function getLanguage() {
return navigator.language || navigator.userLanguage;
}
// 언어별 적용
function init(localeStr) {
document.getElementById("locale").textContent = localeStr
}
// 초기 작업
const currentLang = getLanguage()
init(currentLang)
render(currentLang.substr(0, 2))
// 언어별 렌더링
function render(locale) {
const $lang = document.querySelectorAll("[data-lang]")
$lang.forEach(el => {
const code = el.dataset.lang
el.textContent = lang[locale][code]
})
}
// 버튼 이벤트
document.getElementById("btn-en").addEventListener("click", e => {
render("en")
})
document.getElementById("btn-ko").addEventListener("click", e => {
render("ko")
})
</script>
</body></html>

문의 | 코멘트 또는 yoonbumtae@gmail.com


카테고리: WEB: Frontend


1개의 댓글

Pneumonoultramicroscopicsilicovolcanoconiosis · 2021년 8월 28일 5:50 오후

감사합니다!

답글 남기기

Avatar placeholder

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다