안녕하세요. 이번 시간에는 자바스크립트에서 간단하게 언어를 변환 처리 할 수 있는 방법을 알아보려 합니다. i18next는 자바스크립트에서 언어 변환등의 국제화(i18n)처리를 가능하게 해주는 라이브러리입니다. i18n이란 국제화 (internationalization)의 약자로 첫 글자 i와 마지막 글자 n 사이에 18글자가 들어가 있다는 의미입니다. 이번 포스팅에서는 국제화 라이브러리인 i18next을 활용하여 웹페이지의 한/영 변환을 할 수 있는 예제를 만들어보겠습니다.
i18next 활용 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>i18n</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/i18next/17.0.18/i18next.min.js"
type="text/javascript"
></script>
</head>
<body>
<!-- 한국어, 영어 선택을 할 수 있는 selector -->
<select id="language_select" onchange="i18next.changeLanguage(this.value)">
<option value="en">English</option>
<option value="ko">Korean</option>
</select>
<!-- 웹페이지 텍스트 (제목 + 내용) -->
<h1 id="title"></h1>
<p id="content"></p>
<script>
// 현재의 웹 브라우저에 설정된 언어 확인 (만약 한국어라면 true, 아니라면 false)
const isKorean = navigator.language === "ko-KR";
// 웹 브라우저 언어가 한국어면 select에 한국어 선택, 아닐 경우 영어 선택
if (isKorean) {
document
.getElementById("language_select")
.options[1].setAttribute("selected", true);
}
else {
document
.getElementById("language_select")
.options[0].setAttribute("selected", true);
}
// 웹페이지 텍스트 변환을 위한 세팅
i18next.init(
{
lng: isKorean ? "ko" : "en", // 한국어인지, 영어인지 표시
debug: true,
resources: { // 웹페이지를 구성하는 텍스트들을 json 형태로 입력
ko: {
translation: {
title: "한국어 제목",
content: "한국어 내용"
}
},
en: {
translation: {
title: "English title",
content: "English content"
}
}
}
},
function(err, t) {
if (err) {
console.error(err);
} else { // 에러가 없을 경우 설정한 언어로 json 안의 텍스트들 대입
updateContent();
}
}
);
function updateContent() { // i18nest.init에서 세팅한 텍스트들 html 태그에 대입
document.getElementById("title").innerHTML = i18next.t("title");
document.getElementById("content").innerHTML = i18next.t("content");
}
// 언어 변환 시 이벤트 (위의 select에서 onchange="i18next.changeLanguage(this.value)" 이벤트)
i18next.on("languageChanged", () => {
updateContent(); // 바뀐 언어에 따라 웹페이지 텍스트 재대입
});
</script>
</body>
</html>
결과 영상
구현한 페이지는 한국어/영어에 대한 선택이 가능하게 되어 있고, 다른 언어를 추가하고 싶을 경우 다른 나라의 언어 코드를 추가한 뒤 분기처리 할 수 있습니다.
i18next에 대한 더 자세한 내용은 아래의 공식 홈페이지를 참고해주세요.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 두 개의 range slider로 최소/최대 지정하기 (0) | 2023.04.21 |
|---|---|
| [ javascript ] EJS 사용해서 서버가 보낸 값 출력하기 (0) | 2023.04.14 |
| [JavaScript] 입력한 내용을 텍스트 파일에 저장하기 (0) | 2023.04.07 |
| [javascript] mousemove 이벤트 사용하여 마우스 효과 주기. (0) | 2023.04.05 |
| [JavaScript] clipboard api를 사용해서 클립보드에 특정 텍스트를 복사하는 방법 (0) | 2023.04.03 |
