[Vue.js] vue-i18n

vue-i18n

회사에 입사하고 코드를 분석하는데 위와 같은 라이브러리를 사용하는 걸 발견했습니다. 그동안 프로젝트나 공부를 진행하면서 본적이 없는 라이브러리라서 찾아보니 국제화를 위한 라이브러리 였습니다. 

i18n

i18n의 사전적 정의는 국제화라고 합니다.(i와 n 사이 18개의 알파벳이 있다는 의미) 소프트웨어 맥락 안에서 국제화란 어떤 것이 있느냐하면 제일 먼저 국가 마다 다른 언어를 지원하는 것입니다. 예를 들어, 한국어를 사용하고 있지만 영어를 사용하는 사람들에게 어떤 서비스를 제공하고자 한다면 한국어를 모르기 때문에, 번역해서 서비스해야합니다.

언어뿐만 아니라, 어떤 국가에서는 왼쪽에서 오른쪽으로 글을 읽지 않을 수도 있고, 숫자, 화폐의 표기도 다를 수 있습니다. 물론 시간도 당연히 제각각입니다.

국제화를 위한 많은 부분을 지원하기에 신경써야 할 부분이 많고 애매모호한 부분도 많습니다. 프론트엔드 분야에서는 사용하는 프레임워크/라이브러리마다 이런 부분을 손쉽게 관리할 수 있게 개발된 i18n 솔루션이 있습니다.

설치

npm install vue-i18n
# or
yarn add vue-i18n

기본설정

지원하고자 하는 언어들과 그 언어의 번역된 텍스트를 키/값 쌍으로 json파일을 만듭니다. 여기에서는 영어와 한국어를 지원하기 위해 en.json, ko.json을 작성합니다.

{
  "button": {
    "add": "Add",
    "delete": "Delete"
  }
}

{
  "button": {
    "add": "추가",
    "delete": "삭제"
  }
}

json파일과 i18n을 연결시키기 위한 js파일을 만듭니다.

// i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locales/en.json'
import ko from './locales/ko.json'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'ko',
  fallbackLocale: 'ko',
  messages: { en, ko }
})

그 후에 Vue 인스턴스에 추가해줍니다.

// main.js
import Vue from 'vue'
import i18n from './i18n'

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

<template>
  <div>
    <button>
      {{ $t('button.add') }}
    </button>
  </div>
</template>

위와 같이 사용하면 locale 값에 따라 '추가'나 'add' 가 출력됩니다.