[Vue Ionic] 다국어 지원 (i18n 사용), ionic alert, ionic Globalization (시스템 언어)

2019-12 에 작성된 글입니다.

현재 진행중인 플젝은 다국어 지원이 되어야 하는데요, vue에서 이러한 기능이 있다고 하여 찾아 보았습니다.

Introduction | Vue I18n
Notice ⚠️ This documentation is for Vue I18n v6.0 or later. if you use v5.x, see the legacy section. Vue I18n is…kazupon.github.io

그것이 바로 i18n 입니다. 역시 필요한 기능들은 다 만들어져 있네요. 👏👏👏

이는 vue 3.x만 지원이 된다고 하니, 아직 설치가 되지 않으셨다면 아래를 입력하여 설치해 주세요.

$ npm install @vue/cli -g

그럼 i18n을 현재 프로젝트에 추가해 보겠습니다.

$ vue add i18n

몇 가지 물어보는 사항이 있을 텐데요, 저는 전부를 디폴트로 하였습니다.

모든 파일들이 생성되었다면, 지금부터 테스트를 해 보겠습니다.

src/locales에 생성된 en.json을 열어 수정해 주세요.

{
  "bread": "bread",
  "rice": "rice"
}

src/locales에 ko.json이라는 파일을 생성한 후 아래 내용을 집어넣겠습니다.

{
  "bread": "빵",
  "rice": "밥"
}

그런 다음, 사용할 컴포넌트에서 템플릿에 {{$t(‘메시지’)}} 형태로 넣어 주면 됩니다.

      <ion-row class="drawer_middle">
        <ion-row class="drawer_middle_menu">{{$t('bread')}}</ion-row>
        <ion-row class="drawer_middle_menu">{{$t('rice')}}</ion-row>
      </ion-row>

 

저는 시간을 덜기 위해 ionic에서 만든 경고창을 이용하여 언어를 바꾸도록 해 보겠습니다

ion-alert - Ionic Documentation
An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert…ionicframework.com

ionic-alert에서 사용할 수 있는 경고창이 많으니, 확인하여 본인에게 필요한 기능을 사용하시면 되겠습니다.

 

alert을 발생시킬 부분에 클릭 이벤트를 넣어 주고,

<ion-row class="setting_row" @click="presentAlert">Language</ion-row>

스크립트의 method에 ionic alert 이벤트를 추가해 주겠습니다.

presentAlert() {
      return this.$ionic.alertController
        .create({
          header: "Language",
          inputs: [
            {
              type: "radio",
              label: "한국어",
              value: "ko",
              checked: true
            },
            {
              type: "radio",
              label: "English",
              value: "en"
            },
            {
              type: "radio",
              label: "日本語",
              value: "jp"
            }
          ],
          buttons: [
            {
              text: "Cancel",
              role: "cancel",
              cssClass: "secondary",
              handler: () => {
                console.log("Confirm Cancel");
              }
            },
            {
              text: "Ok",
              handler: () => {
                console.log("Confirm");
              }
            }
          ]
        })
        .then(a => a.present());
    }
}

실행하면, 팝업이 정상적으로 작동합니다. 그럼, Ok를 눌렀을 때의 Handler 부분에 value를 넣어 콘솔에 찍어 볼까요?

{
  text: "Ok",
  handler: (value) => {
   console.log(value)
  }
}

선택 후 OK를 누를 때마다 콘솔에 해당 언어가 찍히는 것을 볼 수 있습니다.

그럼 이제, 언어 변경 플로우를 넣겠습니다.

{
  text: "Ok",
  handler: (value) => {
   if(value=='ko'){
    this.$i18n.locale='ko'
   } else if(value == 'en'){
    this.$i18n.locale='en'
    }
   }
}

 

이렇게 적용이 되었습니다!

다국어를 적용하는 방법은 세 가지가 있습니다.

1. json 파일로 만듦.
2. js 파일로 만듦.
3. vue에 i18n 섹션을 만들어 사용함.

저는 이 중에서 1번 json 파일로 만드는 것을 선택했습니다. 혹여나 다른 번역자에게 맡기게 된다면, 개발자가 아닌 사람에게는 json 파일이 가장 보기 편할 것이라고 생각했기 때문입니다. 각자 상황에 맞춰서 알맞는 방법을 선택하시면 되겠습니다.

저는 그럼, 다음 삽질로 다시 돌아오겠습니다!

 

++

다른 많은 앱들을 확인하니 시스템 언어에 따라 자동으로 언어가 바뀌더라구요.

ionic에 시스템 언어를 갖고 오는 플러그인이 있나 찾아 봤더니, 역시나 있었습니다.

Globalization — Ionic Documentation
The Globalization plugin provides access to user information including locale, language, and time zone. interfaces …ionicframework.com

그럼, 해당 플러그인 설치부터 하겠습니다.

$ npm install @ionic-enterprise/globalization
$ npx cap sync

저는 앱을 실행할 때 시스템 언어를 갖고 올 것이기 때문에, App.vue에 globaliztion 플러그인을 불러오겠습니다.

<script>
import { Globalization } from "@ionic-native/globalization";
export default {
  created() {
      Globalization.getPreferredLanguage(
        function(res) {
          console.log(res)
        },
        function(e) {
          console.log(e + "fail");
        }
      );
  }
};
</script>

xCode로 실행하면 콘솔에 ko-KR이 나오는 것을 확인할 수 있습니다. 해당 res를 가지고 윗 내용(i18n)과 합쳐서 번역을 하시면 되겠습니다.