국제화(Internationalization)는 홈페이지의 내용을 다국어로 지원하는 것을 뜻합니다.
백엔드 측에서 하는 방법이 있고 프론트엔드 측에서 하는 방법이 있는데 백엔드에 대한 국제화 작업은 스프링 부트, Thymeleaf 기준으로 한 다음 글을 참조해주세요. Spring Boot: 국제화(Internationalization)
제이쿼리에서도 국제화 지원을 위한 기능이 있고 이러한 라이브러리(i18n)도 있는데 처음에는 라이브러리 없이 진행해보도록 하겠습니다.
먼저 자바스크립트에서 브라우저의 언어를 알아내는 방법은 다음과 같습니다.
function getLanguage() {
return navigator.language || navigator.userLanguage;
}
출처 바로가기
최신 브라우저라면 ko-KR, en-US 등으로 값이 리턴될 것입니다. 이러한 언어 코드 테이블은 이 사이트에 가면 표로 나와 있습니다.
예제: 라이브러리 없는 간단한 다국어 적용 페이지
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
1개의 댓글
Pneumonoultramicroscopicsilicovolcanoconiosis · 2021년 8월 28일 5:50 오후
감사합니다!