[javascript] 웹 컴포넌트를 활용한 다국어 지원 방법

07 Dec 2023

javascript

웹 애플리케이션을 개발할 때 다국어 지원은 매우 중요한 요소입니다. 웹 컴포넌트를 활용하면 간편하게 다국어 지원 기능을 구현할 수 있습니다. 이번 포스트에서는 웹 컴포넌트를 사용하여 다국어 지원을 구현하는 방법에 대해 알아보겠습니다.

1. 다국어 데이터 정의

우선, 다국어 지원에 필요한 다국어 데이터를 정의해야 합니다. 예를 들어, 한국어와 영어로 애플리케이션을 지원한다고 가정해보겠습니다. 아래와 같이 다국어 데이터를 정의할 수 있습니다.

// languages.json
{
  "ko": {
    "greeting": "안녕하세요!",
    "description": "웹 컴포넌트를 활용한 다국어 지원 예제입니다."
  },
  "en": {
    "greeting": "Hello!",
    "description": "An example of multilingual support using web components."
  }
}

2. 웹 컴포넌트 생성

이제 웹 컴포넌트를 생성하여 다국어 지원 기능을 구현해보겠습니다. 아래는 간단한 웹 컴포넌트의 예입니다.

// MultilingualText.js
class MultilingualText extends HTMLElement {
  connectedCallback() {
    const lang = navigator.language;
    const text = this.getAttribute('data-text');
    this.innerHTML = this.getTranslatedText(text, lang);
  }

  getTranslatedText(text, lang) {
    const languages = JSON.parse(this.getAttribute('data-languages'));
    return languages[lang][text];
  }
}

customElements.define('multilingual-text', MultilingualText);

위의 예제에서 MultilingualText라는 웹 컴포넌트를 정의하였습니다. connectedCallback 메소드에서 현재 언어를 확인하고, data-text 속성과 data-languages 속성을 통해 원하는 다국어 텍스트를 가져옵니다. getTranslatedText 메소드는 언어와 텍스트를 매개변수로 받아 해당 언어에 맞는 다국어 텍스트를 반환합니다.

3. 웹 컴포넌트 사용

이제 웹 컴포넌트를 사용하여 다국어 지원 기능을 구현해봅시다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Multilingual Support Example</title>
</head>
<body>
  <multilingual-text data-text="greeting" data-languages='{"ko":{"greeting":"안녕하세요!"},"en":{"greeting":"Hello!"}}'></multilingual-text>
  <multilingual-text data-text="description" data-languages='{"ko":{"description":"웹 컴포넌트를 활용한 다국어 지원 예제입니다."},"en":{"description":"An example of multilingual support using web components."}}'></multilingual-text>

  <script src="MultilingualText.js"></script>
</body>
</html>

위의 예제에서는 multilingual-text라는 웹 컴포넌트를 두 번 사용하였습니다. data-text 속성을 통해 표시할 다국어 텍스트의 키를 지정하고, data-languages 속성을 통해 다국어 데이터를 전달해줍니다.

웹 애플리케이션을 실행하면 현재 설정된 언어에 맞는 다국어 텍스트가 표시되는 것을 확인할 수 있습니다.

참고 자료

MDN web docs: Web Components