vue로 다국어 적용(국제화) 하기

국제화란 무엇인가?

서비스의 경우 사용자가 선택한 언어에 따라서 제공되는 언어를 변경해 서비스를 제공할 수 있다. 이러한 과정을 국제화 및 현지화라고 한다.
vue의 경우 해당 기능을 가지고 있는 플러그인을 제공하기 때문에 손쉽게 적용할 수 있다.
vue-i18n 플러그인을 적용해보자.

설치방법

vue add i18n

vue-cli버전이 3 이상부터는 vue add 명령어를 통해서 플러그인을 추가할 수 있다.
위의 명령어로 vue의 플러그인을 추가하면 기본적으로 만들어야 할 파일 등 제공해주는 것들이 있어서 사용하기 편하다.

? The locale of project localization. ko_KR
? The fallback locale of project localization. ko_KR
? The directory where store localization messages of project. It's stored under `src` directory. locales
? Enable locale messages in Single file components ? No

보통은 locale 값을 en이나 kr 등으로 설정하기도 하지만 좀 더 상세한 로케일 설정을 위해서 ko_KR 형태로 로케일을 지정했다.

플러그인 추가 시 생기는 파일 알아보기

src/locales
src/i18n.js
src/main.js
.env
vue.config.js

플러그인 추가 시 자동으로 코드가 추가되는 부분은 위의 파일들이다.
우선 locales 폴더를 보자.
기본적으로 ko_KR.json 폴더가 추가되어 있다.
이는 우리가 맨 처음 질문에 ko_KR이라고 대답했기 때문이다.
기본 로케일과 fallback 시에 ko_KR로 설정되어 있다.
다른 언어가 추가된다면 여기에 로케일.json 형태로 추가하면 된다.

우선 ko_KR.json 파일을 아래와 같이 바꿔보자.

//ko_KR.json

{
  "index": {
    "greeting": "안녕 i18n!!!"
  },
  "main": {
    "greeting": "어서오세요."
  }
}

index나 main을 페이지로 생각한다면 페이지별로 쉽게 나눠서 다국어를 적용시킬 수 있다.
접근 방법은 “index.greeting” 과 같은 형태이다.

그리고 locales 폴더에 en_US.json 파일을 추가하고 아래 내용을 추가해보자.

//en_US.json

{
  "index": {
    "greeting": "hello i18n!!!"
  },
  "main": {
    "greeting": "Wellcome"
  }
}

형태는 똑같고 바꿔야할 값만 바뀐다고 생각하면 된다.

그러면 로케일 폴더에 json 파일을 추가하면 어떻게 뷰에서 알아서 적용시켜주는 것일까?
해답은 i18n.js 파일에 있다.

//i18n.js

function loadLocaleMessages() {
  const locales = require.context(
    "./locales",
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  );
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || "en",
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
  messages: loadLocaleMessages(),
});

vue-i18n을 추가하면 vue 인스턴스에 $i18n이 추가되고, 여기서 locale값을 바꾸면 해당 locale의 값에 대응되는 텍스트로 다 바뀌게 된다.
즉 locales 폴더에 json 파일을 넣으면 i18n에 있는 loadLocaleMessages 함수가 해당 이름에 맞게 $i18n.locale의 값들로 들어간다고 생각하면 된다.

main.js 파일엔 플러그인을 적용시킨 모습을 볼 수 있다.

//main.js

new Vue({
  i18n,
  render: (h) => h(App),
}).$mount("#app");

.env 파일엔 fallback 시 사용할 로케일 값등이 들어가 있다.
내용은 아래와 같다.

VUE_APP_I18N_LOCALE=ko_KR
VUE_APP_I18N_FALLBACK_LOCALE=ko_KR

vue.config.js 파일에는 플러그인이 추가되었을 때 설정이 들어가있다.

module.exports = {
  pluginOptions: {
    i18n: {
      locale: "ko_KR",
      fallbackLocale: "ko_KR",
      localeDir: "locales",
      enableInSFC: false,
    },
  },
};

맨 처음 플러그인을 설정할 때 지정했던 값들이 나타나있는 것을 확인할 수 있다.

사용해보기

1. 태그 안에서 사용하기

<p>{{ $t("index.greeting") }}</p>

1. v-bind로 연결시키기

<input :placeholder="$t('main.greeting')" />

1. 스크립트 내에서 사용할 때

this.$t("main.greeting");

위와 같이 $t 메소드에 정의한 값을 넣으면 된다. 기본 로케일이 ko_KR이기 때문에 한글로 보이는 것을 확인할 수 있다.

버튼을 통해서 값 바꾸기

<button @click="$i18n.locale='ko_KR'">한국어</button>
<button @click="$i18n.locale='en_US'">영어</button>

위와 같이 인스턴스의 $i18n.locale의 값을 변경하고 싶은 로케일로 지정해주면 해당 로케일에 맞는 값들로 변경이 된다.
스크립트 내에서는 **this.$i18n.locale**으로 접근할 수 있다.