느린 개발자

 

저번 포스팅에서 구글시트와 i18n을 설정하여 다국어 세팅을 해보았습니다. 이 설정 방법으로 버튼이나 HTML 태그에 글자들을 구글 시트 key 값을 참조하여 쿠키에 저장해 둔 i18n_redirected 값으로 한국어든 영어로든 설정을 할 수 있었습니다. 그러면 이번 포스팅에서는 다국어 변경하는 버튼과 각 텍스트필드(TextField)에 Validation을 적용했을 때 error Message에 대해서 다국어 적용을 하는 방법을 알아보겠습니다. 참고로 아래 구글 시트와 i18n이 적용되어 있는 상태에서 진행됩니다. 설정을 안 했으면 아래에 이전 포스팅에서 설정방법을 진행하고 보셔야 합니다.

 

2023.01.30 - [IT/Nuxt & vue] - [Nuxt] 구글시트(google sheet)를 이용한 다국어(i18n) 자동화 처리

느린 개발자

 

---

환경구성

• package.json

이름	버전
Nuxt	2.15.8
vuetify	2.6.10
vue-i18n	8.27.1
vee-validate	3.4.9

 

• vuetify를 설치하지 않으셨으면 아래 포스팅을 참고하세요.

2023.03.17 - [IT/Nuxt & vue] - [Nuxt] Vuetify 설치 방법 및 Material icon 설정

느린 개발자

 

 

Vee-validate 설치 및 설정

라이브러리 버전에 대해서 충돌 위험이 있을 수 있어 위에 환경구성 버전대로 해보시길 바랍니다.

npm install vee-validate@3.4.9 // 3.4.9 version을 설치합니다.

 

• Plugins 폴더 vee-i18n.js, vee-validate.js 파일을 생성합니다.

plugins

 

• vee-validate.js

import Vue from 'vue'
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'

//rule 설정
extend('emailTest', email)
extend('requiredTest', required)

Vue.component("ValidationObserver", ValidationObserver);
Vue.component("ValidationProvider", ValidationProvider);

 

• vee-i18n

vee-validate에 설정한 Rule들을  validate.message. [Rule]이라는 i18n Key 값으로 만들어 줍니다.

import { configure } from 'vee-validate'

export default function ({ app }) {
  configure({
    defaultMessage: (field, values) => {
      return app.i18n.t(`validate.messages.${values._rule_}`, values)
    }
  })
}

 

 

Nuxt.config.js 설정

plugins: [
    '~/plugins/vee-i18n.js',
    '~/plugins/vuetify.js',
    {
      src: '~/plugins/vee-validate',
      ssr: true
    }
  ],
  
  ...
  
    // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [
      'vuetify/lib',
      'vee-validate/dist/rules',
      'vee-validate/dist/locale/ko',
      'vee-validate/dist/locale/en'
    ],
    loaders: {
      extend(config, ctx) {}
    },
    babel: {
      compact: true
    }
  }

 

 

구글 시트 Key 값 설정 방법

vee-validate.js와 vee-i18n에서 설정한 대로 하면 validate.messages.requiredTest라는 Key 값이 설정이 됩니다.
구글 시트에서 이 key값을 설정해 보도록 합니다.

 

• {_field_}가 에러메시지 name가 연결되기 때문에 ko 아래에 한글로 입력합니다.
• en 항목과 ja 항목은  =GOOGLETRANSLATE($A2, $A$1, B$1)로 구글 번역기를 돌린 상태라서 번역본이 있으시면 굳이 저 함수를 사용하지 않고 직접 입력하셔도 됩니다.
• v-textfiled에 label도 있으니 입력합니다.

구글 시트

 

사용방법

validation-observer로 validation 체크할 전체 부분을 감싸고 validation-provider로 태그 항목을 감쌉니다. validation-provider에 구글 시트에 작성한 Key 값을 아래처럼 작성합니다. 그리고 v-slot errors를 v-text-field에 error-messages에 작성합니다.

<template>
  <div>
    <validation-observer ref="observer">
      <validation-provider
        v-slot="{ errors }"
        :name="$t('test.btn.label').toString()"
        :rules="{
          requiredTest: Rule_required
        }"
      >
        <v-text-field
          v-model="text"
          style="width: 300px; margin-top: 50px"
          hide-details="auto"
          solo
          :error-messages="errors"
          :label="$i18n.t('test.btn.label')"
        />
      </validation-provider>
    </validation-observer>
        <v-btn style="margin-top: 20px" @click="handlelangEn"> 영어로 변경</v-btn>
    <v-btn style="margin-top: 20px" @click="handlelangKO"> 한국어로 변경</v-btn>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  name: 'Test',
  data: () => ({
    text: ''
  }),
  computed: {
    Rule_required() {
      return this.$i18n.t('validate.messages.requiredTest').toString()
    }
  },
  methods:{
    handlelangEn() {
      this.$i18n.locale = 'en'
    },
    handlelangKO() {
      this.$i18n.locale = 'ko'
    },
  }
})
</script>

<style scoped></style>

 

• Key 값을 작성하기 전에 위와 같이 구성하면 보이는 화면은 아래와 같습니다.

 

• Key 값을 적용한 이후는 다국어가 잘 적용된 모습을 확인할 수 있습니다.

i18n 한국어 설정

 

i18n 영어 설정

 

 

---

이제 위와 같이 설정 방법대로 진행하시면 구글 시트와 UI 태그 간에 다국어 작업을 진행할 수 있습니다.
i18n안에 번역을 그대로 넣는 방법보다 구글 시트를 사용하여 시트에서 작업을 진행하면 다국어 작업을 할 때 이전 보다 능률이 오를 거라고 생각합니다. 물론 다른 방식이야 많겠지만 제가 프로젝트를 진행할 때 이렇게 구성하면 추후에도 편하게 작업을 할 수 있어서 설정하는 방법을 공유해드린 내용이니 혹시나 저와 같이 다국어 작업 할 때 불편했던 경험이 있으시면 이런 방법으로도 구성하면 좋다고 생각합니다. 긴 글 읽어주셔서 감사합니다.