[개발자의품격][부트캠프][1기][22차시] Vue.js #13 | plugin 이용 다국어 처리

다국어 처리 이해

※ i18n(internationalization): 다국어 처리

 

plugins/i18n.js

plugins 폴더를 생성하고 i18n.js를 작성한다. eslint가 에러가 아닌 것을 에러로 표시하기 때문에 /* eslint-disable */을 넣어 해제한다.

// src/plugins/i18n.js
/* eslint-disable */
export default {
  install: (app, options) => { // 파라미터에 i18nPlugin, i18nStrings이 각각 들어간다.
    // globalProperties에 특정 키 $translate를 잡아두면 모든 컴포넌트에서 바로 접근이 가능해진다.
    app.config.globalProperties.$translate = (key) => {
      // 예를 들어 key "ko.hi"는 split() 함수에 의해 ['ko', 'hi']가 된다.
      // reduce() 함수를 통해 배열 ['ko', 'hi']의 'ko'를 키로하여
      return key.split('.').reduce((o, i) => { // o['ko'] = {hi: '안녕하세요'}를 찾고, 'hi'를 키로 하여
        if (o) return o[i] // o['hi'] = '안녕하세요'를 찾아 return하게 된다.
      }, options)
    }
  }
}

 

i18n/en.js

i18n 폴더를 생성하고 en.js를 작성한다.

// src/i18n/en.js
const i18nEN = {
  hi: 'hello'
}

export default i18nEN

 

i18n/ko.js

i18n 폴더를 생성하고 ko.js를 작성한다.

// src/i18n/ko.js
const i18nKO = {
  hi: '안녕하세요'
}

export default i18nKO

 

main.js

main.js에 아래 코드를 추가한다. 다국어 처리를 전역화 하기 위해서이다.

...
import i18nPlugin from './plugins/i18n'
import en from './i18n/en'
import ko from './i18n/ko'
...

const i18nStrings = { en, ko } // en.js, ko.js를 i18nStrings로 합친다.

...
app.use(i18nPlugin, i18nStrings)
...

 

views/5_advanced/PluginView.vue

<template> 태그에 아래 코드를 작성한다.

// src/views/5_advanced/PluginView.vue
<template>
  <div>
    <h1>{{ $translate('en.hi') }}</h1>
    <h1>{{ $translate('ko.hi') }}</h1>
 ...

 

[그림 1] PluginView 컴포넌트 렌더링 결과

 

i18n/en.js

i18n 폴더를 생성하고 en.js를 작성한다.

// src/i18n/en.js
const i18nEN = {
  ...
  search: 'Search',
  save: 'Save'
}
...

 

i18n/ko.js

i18n 폴더를 생성하고 ko.js를 작성한다.

// src/i18n/ko.js
const i18nKO = {
  ...
  search: '조회',
  save: '저장'
}
...

 

views/5_advanced/PluginView.vue

PluginView.vue에서 버튼을 추가하고  $translate() 함수의 파라미터를 수정한다. data 함수의 return 객체로 lang: 'ko'를 추가한다. 임의로 사용자의 언어가 'ko'라고 본 것이며 렌더링 결과는 [그림 2]와 같다.

// src/views/5_advanced/PluginView.vue
<template>
  <div>
    <h1>{{ $translate(`${lang}.hi`) }}</h1>
    <h1>{{ $translate(`${lang}.hi`) }}</h1>
    <button>{{ $translate(`${lang}.search`) }}</button>
  </div>
</template>
<script>
export default {
  ...
  data() {
    return {
      lang: 'ko'
    }
 ...

 

[그림 2] lang: 'ko'

 

---

 

실무에서 사용하는 다국어 처리

en.js와 ko.js의 {name}를 동적으로 처리하고자 한다.

 

i18n/en.js

i18n 폴더를 생성하고 en.js를 작성한다.

// src/i18n/en.js
const i18nEN = {
  ...
  welcome: 'Hi! Welcome {name}' // {name}를 동적으로 처리하고자 한다.
}
...

 

i18n/ko.js

i18n 폴더를 생성하고 ko.js를 작성한다.

// src/i18n/ko.js
const i18nKO = {
  ...
  welcome: '안녕하세요. {name}님 환영합니다.' // {name}를 동적으로 처리하고자 한다.
}
...

 

views/5_advanced/PluginView.vue

사용자의 데이터를 담은 userInfo를 작성한다.

<!-- src/views/5_advanced/PluginView.vue -->
<template>
  <div>
    <h1>
      {{ $translate(`${lang}.welcome`, userInfo) }}
    </h1>
...
<script>
export default {
  ...
  data() {
    return {
      lang: 'ko'
      userInfo: {
        name: 'Sewol',
        email: 'sewol@gmail.com',
        lang: 'en'
      }
    ...

 

plugins/i18n.js

{} 안의 키 값을 이용해 동적으로 처리하는 코드를 추가한다.

// src/plugins/i18n.js
/* eslint-disable */
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key, params={}) => { // userInfo를 받을 두번째 파라미터 params 추가(기본 값은 {})
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options).replace(/{\w+}/g,match => params[match.slice(1,-1)]) // match를 이용해 여러개의 동적 값을 찾는다. slice로 {} 안의 키를 찾고 userInfo의 키와 같을 경우 해당 값을 replace() 함수를 이용해 바꾼다.
    }
  }
}

 

[그림 3] {name}이 동적으로 적용되었다.

 

※ 태그를 넣고 싶다면

 v-html을 이용하면 태그를 넣을 수 있다.

// src/views/5_advanced/PluginView.vue
<template>
  <div>
    <h1 v-html="$translate(`${lang}.welcome`, userInfo)"></h1>
    ...

 

ko.js의 welcome 키의 값에 <br /> 태그를 넣어 [그림 4]와 같이 렌더링되었다.

// src/i18n/ko.js
const i18nKO = {
  ...
  welcome: '안녕하세요. <br/>{name}님 환영합니다.'
}
...

 

[그림 4] v-html을 이용해 <br /> 태그 적용