Vue에서 다국어 처리 - DB 로 다국어 관리

안녕하세요.

이전에는 json 파일로 다국어 메시지를 관리하는 법에 대해 적어보았습니다.

https://dong-queue.tistory.com/64

Vue에서 다국어 처리 - JSON 파일을 이용한 관리

오늘은 메시지를 DB에서 관리하고 i18n으로 불러오는 법에 대해 설명드리겠습니다.

(db연결은 구성되어 있다고 가정하고 data를 db에서 읽어오는 부분에 대한 설명은 하지 않겠습니다.)

 

1. Table 구성 및 data 입력

어떻게 구성해도 사실 큰 상관은 없지만 저는 아래와 같이 구성하였습니다. (db는 maria db 입니다.)

categoryCd 와 code는 다국어를 변환하기 위한 코드값이고

name은 단순 참고 목적, 언어 코드와 value는 langJson에 json 포맷으로 넣었습니다.

이제 필요한 다국어 메시지를 db에 모두 입력하였으면 기존에 있던 json 파일과 디렉토리는 더이상 필요하지 않으므로 삭제 하셔도 좋습니다.

 

2. main.js 수정

import Vue from 'vue'

import VueI18n from 'vue-i18n'
import _ from 'lodash'

import axios from '@/axios' // server에 data 요청을 하기 위해서 사용하므로 사용자 환경에 맞게 수정

async function setI18n () {
  Vue.use(VueI18n)
  let langs = (await axios().post('getLangs')).data // 다국어 메시지를 DB에서 가져오는 부분이므로 사용자 환경에 맞게 수정
  langs.map(x => {
    x.lang = JSON.parse(x.langJson)
    return x
  })
  let messages = {}
  let baseLangs = ['ko', 'en'] // 시스템에서 사용할 언어코드 목록
  let temp = _.groupBy(langs, 'categoryCd') 
  // {'common': [{categoryCd: 'common', code: 'requiredItem', lang: {ko: ..., en: ...}}], 'message': [{categoryCd: 'common', code: 'requiredItem', lang: {ko: ..., en: ...}}]}
  baseLangs.map(x => {
    messages[x] = {} // x = 'ko', 'en' 이므로 언어코드별 초기화 작업
    Object.keys(temp).map(y => {    // y = 'common', 'message'
      messages[x][y] = {} // 언어코드.categoryCd 별 초기화 작업 예) messages.ko.common = {}
      let value = _.mapValues(_.keyBy(temp[y], 'code'), 'lang') 
      //categoryCd가 'common'인 langJson을 가져옴
      Object.keys(value).map(z => { // x, y가 'ko', 'common' 일때 z = 'requiredItem'
        messages[x][y][z] = value[z][x] // 예) meassages.ko.common.requiredItem = '필수항목'
      })
    })
  })
  return new VueI18n({
    locale: 'ko', // 기본 locale
   fallbackLocale: 'ko',
   messages
  })
}

// DB 에서 다국어 메시지를 읽어오는 시차를 고려하여 promise then 으로 처리하여 다국어 코드가 누락되지 않도록 합니다.
setI18n()
  .then((i18n) => {
    new Vue({
      i18n,
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
  })

 

 

언뜻 복잡해 보이지만 기존 json을 이용하던 방식과 비교하여 달라진 점은 두가지 밖에 없습니다.

 

1. messages에 값을 담는 방법

-  기존 json을 이용할때는 이미 언어코드>category>code> value 구조로 되어 있어서 언어코드 별로 path를 읽어들였다면 db로 변경 후에는 cateogy>code>(언어코드>value) 구조로 되어 있어 이부분을 처리하는 부분만 조금 변경되었습니다. 

 

저는 db에서 code단위로 값을 관리하는게 더 편해서 위와 같이 구성했지만,

db column을 언어코드와 value를 분리하는 구조로 만들어 놓는다면 messages 구성이 좀 더 쉬워질 수 있습니다.

 

2. new Vue 처리

- db 에서 값을 읽어와서 처리하는 부분에서 동기화 처리를 위해 setI18n function을 먼저 처리하고 then 부분에서 new Vue를 하였습니다.

 

DB로 다국어 메시지를 구성하면 다국어 코드가 추가 또는 변경될 때마다 배포를 할 필요가 없고 즉시 반영되므로 편리한 부분이 있어 이번 포스팅을 작성해 보았습니다.

 

감사합니다.