Today Yewon Learned

[API] JavaScript 국제화 (internationalization : i18n) 라이브러리 - i18next 본문

API

[API] JavaScript 국제화 (internationalization : i18n) 라이브러리 - i18next

데브워니 2022. 3. 25. 13:05

i18next

국제화는 때로 줄여서 그저 "I18N"이라고도 표기하는데, 그 의미는 이 용어의 영어 표기에서 첫 글자인 "I"자와 마지막 글자인 "N"의 사이에 18글자가 들어가 있다는 의미이다. (출처 : 위키백과)

 

웹사이트 개발 중 다양한 언어 지원이 필요한 경우가 생겨서,

JavaScript 기반의 다국어 라이브러리를 지원하는 i18next를 찾아보았다.

 

JavaScript외에도 React, Vue.js, Node.js 등에서 사용할 수 있다고 한다.

 

 

select 박스를 사용하여 4가지 언어를 지원하는 기능을 구현해보았다.

<!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>
    <select id="lang-select" onchange="i18next.changeLanguage(this.value)">
      <option value="en">English</option>
      <option value="ko">Korean</option>
      <option value="fr">French</option>
      <option value="vn">Vietnamese</option>
    </select>
    <h1 id="title"></h1>
    <p id="content"></p>
    <script>
      const isKorean = navigator.language === "ko-KR";
      if (isKorean) {
        document
          .getElementById("lang-select")
          .options[1].setAttribute("selected", true);
      }
      i18next.init(
        {
          lng: isKorean ? "ko" : "en",
          debug: true,
          resources: {
            ko: {
              translation: {
                title: "안녕하세요",
                content: "좋은 하루 되세요"
              }
            },
            en: {
              translation: {
                title: "Hello",
                content: "have a nice day"
              }
            },
            fr: {
              translation: {
                title: "Bonjour",
                content: "Passez une bonne journée!"
              }
            },
             vn: {
              translation: {
                title: "xin chào",
                content: "Chúc một ngày tốt lành"
              }
            }
          }
        },
        function(err, t) {
          // init set content
          if (err) {
            console.error(err);
          } else {
            updateContent();
          }
        }
      );

      function updateContent() {
        document.getElementById("title").innerHTML = i18next.t("title");
        document.getElementById("content").innerHTML = i18next.t("content");
      }

      i18next.on("languageChanged", () => {
        updateContent();
      });
    </script>
  </body>
</html>

 

- 구현 결과

'API' 카테고리의 다른 글

[API] Spring에서 Fullcalendar API 경로 지정  (0) 2021.11.22
[API] Fullcalendar API 사용해보기  (0) 2021.11.18
[API] 카카오 우편번호 API 사용해보기  (0) 2021.11.08
'API' Related Articles more
Comments