[javascript] 웹 컴포넌트의 국제화(i18n) 처리 방법

07 Dec 2023

javascript

웹 컴포넌트는 재사용 가능한 웹 요소를 개발하기 위한 기술로, 다국어 지원이 필요한 애플리케이션에서 국제화(i18n) 처리를 위해 사용될 수 있습니다. 이 글에서는 웹 컴포넌트에서 국제화를 처리하는 방법에 대해 알아보겠습니다.

I18n 라이브러리 사용

웹 컴포넌트에서 국제화 처리를 위해 I18n 라이브러리를 사용할 수 있습니다. I18n 라이브러리는 다국어 문자열의 번역 및 형식 변환을 도와주는 유용한 도구입니다. 대표적인 I18n 라이브러리로는 i18next와 Polymer.i18n이 있습니다.

i18next

i18next는 JavaScript 기반의 국제화 라이브러리로, 간편한 설정과 다양한 번역 기능을 제공합니다. 웹 컴포넌트에서 i18next를 사용하기 위해서는 다음과 같은 단계를 따라야 합니다:

i18next 라이브러리를 프로젝트에 추가합니다.

npm install i18next

다국어 번역 파일을 작성합니다.

{
  "en": {
    "hello": "Hello",
    "welcome": "Welcome to our website!"
  },
  "ko": {
    "hello": "안녕하세요",
    "welcome": "우리 웹사이트에 오신 것을 환영합니다!"
  }
}

웹 컴포넌트에서 i18next를 사용하여 다국어 문자열을 처리합니다.

import i18next from "i18next";

i18next.init({
  lng: navigator.language,
  resources: {
    en: {
      translation: {
        // ...
      }
    },
    ko: {
      translation: {
        // ...
      }
    }
  }
});

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.render();
  }
  
  render() {
    const hello = i18next.t('hello');
    const welcome = i18next.t('welcome');
    
    this.innerHTML = `
      <h1>${hello}</h1>
      <p>${welcome}</p>
    `;
  }
}

customElements.define('my-component', MyComponent);

Polymer.i18n

Polymer.i18n은 Google Polymer 라이브러리에서 제공하는 국제화 도구입니다. 해당 라이브러리는 웹 컴포넌트에서 다국어 문자열의 번역과 형식 변환 작업을 쉽게 처리할 수 있도록 도와줍니다. Polymer.i18n의 사용 방법은 다음과 같습니다:

Polymer.i18n을 프로젝트에 추가합니다.

npm install @polymer/polymer

i18n-behavior와 i18n-message를 사용하여 다국어 문자열을 처리합니다.

import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
import '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
import '@polymer/polymer/lib/elements/dom-module.js';
import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
import { htmlLiteral } from '@polymer/polymer/lib/utils/html-tag.js';
import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';


class MyComponent extends PolymerElement {
  static get template() {
    return html`
      <h1>${this.localize('hello')}</h1>
      <p>${this.localize('welcome')}</p>
    `;
  }

  static get properties() {
    return {
      locale: {
        type: String,
        value: 'en',
        observer: '_localeChanged'
      }
    };
  }

  static localize(key) {
    return this.i18n.t(key);
  }

  _localeChanged() {
    this.importHref(this.resolveUrl(`locales/${this.locale}.json`), () => {
      this.i18n.data = this.imports[this.locale];
    });
  }
}

customElements.define('my-component', MyComponent);

위의 코드에서 locales 디렉토리에는 다국어 번역 파일이 위치하며, Polymer.i18n의 data 속성을 통해 다국어 데이터를 동적으로 로드합니다.

I18n 라이브러리 사용

i18next

Polymer.i18n

참고 링크