# i18n (국제화)

Vuesion에는 다국어 관리를 좀 더 쉽게 만들어 줄 유용한 도구들이 있습니다.

# 기본 로케일 및 지원되는 로케일

./vuesion/config.json 파일에서 기본 로케일을 지정할 수 있습니다.

지원하길 원하는 다른 로케일을 추가할 수도 있습니다. extract-i18n-messages 스크립트를 사용하면 선택한 로케일의 번역본을 추가할 수 있습니다.

아래는 예시 설정값입니다.

  "i18n": {
    "defaultLocale": "en",
    "locales": [
        {
          "code": "en",
          "file": "en.json"
        },
        {
          "code": "ru",
          "file": "ru.json"
        }
    ]
    }

# 메시지 설정 및 사용

파일을 수정합니다. (예: ./src/pages/index.vue)

<template>
  <div>
      <landing-page-header />
      ...
  </div>
</template>

$t 와 주석을 사용하여 번역을 추가합니다. (현재 기본 로케일: en)

<template>
  <div>
      {{ $t('home.test' /* this is a test!!! */) }}
      <landing-page-header />
      ...
  </div>
</template>

이후 npm run extract-i18n-messages 를 실행한 뒤, http://localhost:3000/ (opens new window) 로 이동합니다. this is a test!!! 라는 메시지를 좌상단에서 확인할 수 있습니다.

./i18n/en.json 파일을 확인해 보면, 아래와 같은 값이 등록되어 있습니다.

{
...
  "home.test": "this is a test!!!"
}

./i18n/ko.json 파일도 확인을 해 보면, 정확히 동일한 키와 값이 추가되어 있습니다.

해당 값을 한국어로 번역해 봅시다.

{
...
  "home.test": "헬로월드는 테스트입니다."
}

이후 다시 npm run extract-i18n-messages 를 실행합니다.

기본 로케일이 en(영문) 이므로 ko(한국어)로 번역한 값은 덮어쓰기 되지 않습니다.

Vue 컴포넌트에서 기본값을 변경하길 원한다면, 주석을 변경하면 됩니다

<template>
  <div>
      {{ $t('home.test' /* this is not a test!!! */) }}
      <landing-page-header />
      ...
  </div>
</template>

npm run extract-i18n-messages 명령어를 실행 한 뒤 ./i18n/en.json 파일을 확인해 보면 값이 덮어쓰기 되어 있습니다.

{
...
  "home.test": "this is not a test!!!"
}

기본 로케일 파일이 아닌 ./i18n/ko.json 은 변경되지 않습니다.

{
...
  "home.test": "헬로월드는 테스트입니다."
}

# 제약사항

HTML 태그를 메시지로 등록하려면, <> 대신 [] 를 사용해야 합니다.

<template>
  <div>
    <div v-html="$t('home.link' /* [a href='https://example.com' target='_blank']this is a link[/a] */)" />
    ...
  </div>
</template>