Today I Learned

최근 국제화(i18n)을 구현하기 위해 언어팩을 만들고 적용하는 작업을 했다.
블로그에 대략적으로 한번 정리해두려 한다.

i18n

i18n = internationalization(국제화, i와n사이에 18글자)

• 소프트웨어 애플리케이션에서 다양한 언어와 문화를 지원하기 위한 프로세스

• 다국어 지원, 날짜 및 시간 형식, 통화, 숫자 형식 등 지역에 따라 달라지는 요소를 처리하는 데 사용

• cf. l10n = Localization(현지화)

Nuxt-i18n

https://nuxt.com/modules/i18n

Nuxt.js 애플리케이션에서 다국어 지원을 쉽게 구현하도록 도와주는 모듈

• Vue-i18n을 기반으로 해서 다국어 지원을 제공

• 자동으로 다국어 지원을 위한 라우팅을 설정.
  각 언어에 맞는 URL 경로 생성해 SEO 최적화를 도움
  ex) /about을 /en/about과 /ko/about으로 자동으로 변환

• 번역 메시지 관리. 기본적으로 JSON으로 관리하고, .js / .ts / .yaml도 가능하다.

사용 방법

• Nuxt 모듈 추가(셋 중 택 1)

npx nuxi@latest module add @nuxtjs/i18n@next
npm install @nuxtjs/i18n
yarn add @nuxtjs/i18n

• i18n 설정 파일 생성(nuxt.config.js)

import ko from './locales/ko';
import en from './locales/en';

export default {
	modules: ['nuxt-i18n', ...],
  	i18n: {
    	baseUrl: 'https://velog.io',
    	vueI18nLoader: true,
    	locales: [
      	{ code: 'ko', iso: 'ko-KR', isCatchallLocale: true },
      	{ code: 'en', iso: 'en-US' },
    	],
    	defaultLocale: 'ko',
    	vueI18n: { fallbackLocale: 'ko', messages: { ko, en } },
    	seo: true,
    	detectBrowserLanguage: false,
  	},

• 번역 파일 JSON, JS 같은 파일로 Key-Value로 생성. key를 value로 번역함

// locales/ko/index.json
{
  "hello": "안녕하세요",
  "required": "필수"
}

// locales/en/index.json
{
  "hello": "Hello",
  "required": "Required"
}

• Vue 코드 상에서 $t 사용방법은 TIL #625 참고

• 언어 변경은 this.$i18n.locale = 'en' 처럼 사용