느린 개발자

 

Nuxt 및 vue 환경에서 i18n으로 다국어를 작업하던 와중 문자열 데이터가 포함된 배열을 번역 설정을 할 때 언어 변경 시 선택된 언어로 렌더링이 되지 않는 현상이 있어 이를 해결하는 방법을 알아보겠습니다. 참고로 i18n 설정 방법을 모르신다 하시면 아래 포스팅을 참고해 주세요.

 

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

느린 개발자

 

---

 

다국어 Json 파일

• 예를 들어 한국어 및 영어 번역 파일을 한번 생성해보겠습니다.
• ※위 포스팅 구글 시트로 연결하셨으면, 구글 시트에서 key값 설정하여 만들어지는 json 파일로 사용하셔도 됩니다.

// ko.json
{
  "value": {
    "header01": "1번 헤더 입니다.",
    "header02": "2번 헤더 입니다.",
    "header03": "3번 헤더 입니다.",
  }
}

// en.json
{
"value": {
    "header01": "header 1.",
    "header02": "header 2.",
    "header03": "header 3.",
  }
}

 

Nuxt or Vue에서 배열 데이터 생성

• 문자열이 포함된 데이터 배열을 한번 작성해 봅니다.

// HelloWorld.vue
<template>
  <ul>
    <li v-for="item in items" :key="item.number">
      {{ item.header }}
    </li>
  </ul>
</template>

export default {
  name: "HelloWorld",
  data() {
    return {
      items: [
        {
          number: "1번",
          header:'header',
          name: "vue",
        },
        {
          number: "2번",
          header:'header',
          name: "react",
        },
        {
          number: "3번",
          header:'header',
          name: "nuxt",
        },
      ],
    };
  },
};

 

• 예를 들어서 Items 배열에 header 객체에 i18n을 적용한다고 하면 $i18n.t('key') 메서드를 사용하는데

// HelloWorld.vue
// ..생략

export default {
  name: "HelloWorld",
  data() {
    return {
      items: [
        {
          number: "1번",
          header: this.$i18n.t('value.header01'),
          name: "vue",
        },
        {
          number: "2번",
          header: this.$i18n.t('value.header02'),
          name: "react",
        },
        {
          number: "3번",
          header: this.$i18n.t('value.header03'),
          name: "nuxt",
        },
      ],
    };
  },
};

 

• 위와 같이 작성한다면 i18n이 적용되어 아래 이미지처럼 나옵니다.
• 그런데 여기서 문제가 하나 발생합니다.  위와 같이 설정한다면 언어를 변경할 때 렌더링이 되지 않아 언어가 변경되지 않는 문제가 생깁니다. 한번 언어 변경을 할 수 있는 버튼을 추가해 봅니다.

 

i18n 언어 변경 버튼

• 아래 언어 변경 버튼을 클릭 시 언어가 변경되지 않는 것을 확인할 수 있습니다.

// HelloWorld.vue
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.number">
        {{ item.header }}
      </li>
    </ul>
    <v-btn @click="handleKo">한국어로 변경</v-btn>
    <v-btn @click="handleEn">영어로 변경</v-btn>
  </div>
</template>

export default {
  name: "HelloWorld",
  data() {
    return {
      items: [
        {
          number: "1번",
          header: this.$i18n.t('value.header01'),
          name: "vue",
        },
        {
          number: "2번",
          header: this.$i18n.t('value.header02'),
          name: "react",
        },
        {
          number: "3번",
          header: this.$i18n.t('value.header03'),
          name: "nuxt",
        },
      ],
    };
  },
  methods:{
    handleKo() {
      this.$i18n.locale = 'ko'
    },
    handleEn() {
      this.$i18n.locale = 'en'
    },
  }
};

 

 

해결방안

• 위와 같이 언어를 변경했을 때 언어가 변경되지 않는다면 다국어를 적용한 의미가 없겠죠? 그러면 해결 방안으로 data 속성에서 번역키를 할당하여 적용을 해보도록 합니다. 

// HelloWorld.vue
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.number">
        {{ $t(item.header) }}  // 수정
      </li>
    </ul>
    <v-btn @click="handleKo">한국어로 변경</v-btn>
    <v-btn @click="handleEn">영어로 변경</v-btn>
  </div>
</template>

export default {
  name: "HelloWorld",
  data() {
    return {
      items: [
        {
          number: "1번",
          header: 'value.header01', //수정
          name: "vue",
        },
        {
          number: "2번",
          header: 'value.header02', //수정
          name: "react",
        },
        {
          number: "3번",
          header: 'value.header03', //수정
          name: "nuxt",
        },
      ],
    };
  },
  methods:{
    handleKo() {
      this.$i18n.locale = 'ko'
    },
    handleEn() {
      this.$i18n.locale = 'en'
    },
  }
};

 

---

배열 데이터에 관해서 i18n 다국어를 적용하는 방법에 대해서 알아보았습니다. 보통 data 속성에서 바로 this.$i18n.t('key')를 사용하면 되는 거 아닌가? 생각했었는데, $t 대신에 $tm 사용하라는데도 있고.. 참 개발 방법은 다양한 거 같습니다.. 그래서 저는 key값을 그냥 할당해서 저렇게 사용해서 해결했습니다. 물론 다른 방법이야 많은니 이런 방법 말고도 다른 방법이 있으면 댓글 부탁드립니다. 읽어주셔서 감사합니다.