Aurelia는 모던하면서도 강력한 JavaScript 프레임워크로, 다국어 지원이 필요한 웹 애플리케이션을 개발하는 데 매우 효과적입니다. 이 글에서는 Aurelia 애플리케이션에서 로컬라이제이션과 국제화를 구현하는 방법을 설명하겠습니다.

1. 플러그인 설치

먼저, Aurelia-i18n 플러그인을 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 플러그인을 설치합니다.

npm install aurelia-i18n

2. 구성 설정

다음으로, Aurelia 애플리케이션의 구성 파일(예: aurelia_project/aurelia.json)을 열고 aurelia-i18n과 관련된 설정을 추가합니다. 아래는 이를 위한 예제 구성입니다.

"dependencies": [
  {
    "name": "aurelia-i18n",
    "path": "../node_modules/aurelia-i18n/dist/amd",
    "main": "aurelia-i18n"
  }
],
"prepend": [
  "node_modules/aurelia-i18n/dist/amd",
  "node_modules/intl-messageformat/dist/"
]

3. 언어 파일 준비

다음으로, 애플리케이션의 지원할 다국어에 맞게 번역된 메시지를 파일로 준비합니다. 예를 들어, locales/en/translation.json 및 locales/ko/translation.json과 같은 형식으로 준비합니다.

// en/translation.json
{
  "welcomeMessage": "Welcome to our app!"
}

// ko/translation.json
{
  "welcomeMessage": "우리 앱에 오신 것을 환영합니다!"
}

4. 설정 및 초기화

이제 main.js 또는 애플리케이션의 진입점 파일에서 i18n을 설정하고 초기화해야 합니다. 아래는 간단한 예제입니다.

import {I18N} from 'aurelia-i18n';
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  aurelia.use.plugin('aurelia-i18n', (instance) => {
    let aliases = ['t', 'i18n'];
    instance.i18next.use(XHR);
    return instance.setup({
      resStore: {
        en: { translation: { welcomeMessage: 'Welcome to our app!' } },
        ko: { translation: { welcomeMessage: '우리 앱에 오신 것을 환영합니다!' } }
      },
      lng: 'en',
      attributes: aliases,
      fallbackLng: 'en',
      debug: false
    });
  });
}

5. 뷰 바인딩

마지막으로, 지역화된 메시지를 뷰에 연결(bind)합니다. Aurelia에 내장된 t 바인딩 명령을 사용하여 메시지를 표시합니다.

<template>
  <h1>${'welcomeMessage' | t}</h1>
</template>

이제 애플리케이션을 실행하면 언어 설정에 따라 해당 언어로 메시지가 표시됩니다.

Aurelia를 사용하면 로컬라이제이션과 국제화를 쉽게 구현할 수 있으며, 사용자 경험을 향상시키는 다국어 지원 웹 애플리케이션을 쉽게 개발할 수 있습니다.

참고자료: Aurelia-i18n GitHub Repository

위와 같은 방법으로 Aurelia에서 로컬라이제이션 및 국제화를 구현할 수 있습니다.