Vue.js 시작하기 - 다국어 지원

Vue.js 애플리케이션에서 다국어 지원을 구현하기 위해서는 vue-i18n 라이브러리를 사용하는 것이 일반적입니다. 이 라이브러리는 Vue와 잘 통합되어 있으며, 다양한 기능을 제공하여 다국어 애플리케이션을 쉽게 개발할 수 있도록 도와줍니다. 다음은 vue-i18n을 사용하여 다국어 지원을 설정하는 방법을 단계별로 설명합니다.

1. 프로젝트 설정

먼저, Vue 프로젝트를 생성하고 vue-i18n 패키지를 설치합니다.

Vue 프로젝트 생성

# Vue CLI를 사용하여 프로젝트 생성
npm install -g @vue/cli
vue create my-vue-i18n-app

# 생성한 프로젝트 디렉토리로 이동
cd my-vue-i18n-app

패키지 설치

vue-i18n 패키지를 설치합니다.

npm install vue-i18n

2. Vue I18n 설정

다음으로, vue-i18n을 설정하여 Vue 애플리케이션에 다국어 지원을 추가합니다.

src/i18n.js 파일 생성

이 파일에서 번역 리소스를 정의하고, vue-i18n을 초기화합니다.

import { createI18n } from 'vue-i18n';

// 번역 리소스 정의
const messages = {
  en: {
    welcome: 'Welcome to our application!',
    description: 'This is a sample description.',
  },
  ko: {
    welcome: '우리 애플리케이션에 오신 것을 환영합니다!',
    description: '이것은 샘플 설명입니다.',
  },
  es: {
    welcome: '¡Bienvenido a nuestra aplicación!',
    description: 'Esta es una descripción de muestra.',
  },
};

// i18n 설정
const i18n = createI18n({
  locale: 'en', // 초기 언어 설정
  fallbackLocale: 'en', // 언어를 찾지 못했을 때 대체 언어
  messages, // 번역 메시지 설정
});

export default i18n;

3. Vue 애플리케이션에 I18n 통합

이제 vue-i18n을 Vue 애플리케이션에 통합합니다.

src/main.js 파일 수정

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n'; // i18n 설정 파일 불러오기

const app = createApp(App);

app.use(i18n); // Vue 애플리케이션에 i18n 사용 설정

app.mount('#app');

4. 컴포넌트에서 번역 사용

vue-i18n을 설정했으므로 Vue 컴포넌트에서 번역 문자열을 사용할 수 있습니다. 다음은 i18n을 사용하는 방법을 보여주는 간단한 컴포넌트 예제입니다.

src/App.vue 파일 수정

<template>
  <div id="app">
    <h1>{{ $t('welcome') }}</h1> <!-- 번역 키 사용 -->
    <p>{{ $t('description') }}</p> <!-- 번역 키 사용 -->

    <!-- 언어 선택 드롭다운 -->
    <select v-model="selectedLanguage" @change="changeLanguage">
      <option value="en">English</option>
      <option value="ko">한국어</option>
      <option value="es">Español</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedLanguage: 'en', // 초기 언어 설정
    };
  },
  methods: {
    changeLanguage() {
      this.$i18n.locale = this.selectedLanguage; // 선택된 언어로 변경
    },
  },
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

select {
  margin-top: 20px;
  padding: 10px;
  font-size: 16px;
}
</style>

5. 번역 리소스 외부 파일로 분리

번역 리소스를 외부 파일로 관리하면 더 많은 언어와 번역을 쉽게 관리할 수 있습니다. 이를 위해 번역 파일을 JSON 형식으로 분리합니다.

번역 파일 생성

• src/locales/en.json

  {
    "welcome": "Welcome to our application!",
    "description": "This is a sample description."
  }

• src/locales/ko.json

  {
    "welcome": "우리 애플리케이션에 오신 것을 환영합니다!",
    "description": "이것은 샘플 설명입니다."
  }

• src/locales/es.json

  {
    "welcome": "¡Bienvenido a nuestra aplicación!",
    "description": "Esta es una descripción de muestra."
  }

src/i18n.js 파일 수정

번역 리소스를 외부 파일에서 가져오도록 수정합니다.

import { createI18n } from 'vue-i18n';

// 번역 리소스 로드
const messages = {
  en: require('./locales/en.json'),
  ko: require('./locales/ko.json'),
  es: require('./locales/es.json'),
};

// i18n 설정
const i18n = createI18n({
  locale: 'en', // 초기 언어 설정
  fallbackLocale: 'en', // 언어를 찾지 못했을 때 대체 언어
  messages, // 번역 메시지 설정
});

export default i18n;

6. 자동 언어 감지

브라우저의 언어 설정을 감지하여 초기 언어를 자동으로 설정할 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

const userLang = navigator.language || navigator.userLanguage;
const i18n = createI18n({
  locale: userLang.split('-')[0] || 'en', // 브라우저 언어 또는 기본 언어 설정
  fallbackLocale: 'en',
  messages,
});

7. 추가 기능 및 고려 사항

• 플레이스홀더와 변수: 번역 문자열에서 변수를 사용할 수 있습니다. 이를 통해 동적인 번역이 가능합니다.

  {
    "greeting": "Hello, {name}!"
  }

  <template>
    <p>{{ $t('greeting', { name: 'John' }) }}</p>
  </template>

• 날짜 및 숫자 포맷팅: vue-i18n은 날짜 및 숫자 포맷팅 기능도 제공합니다.

  <template>
    <div>
      <p>{{ $d(new Date(), 'short') }}</p>
      <p>{{ $n(1234567.89) }}</p>
    </div>
  </template>

• 언어 선택 유지: localStorage 또는 sessionStorage를 사용하여 사용자가 선택한 언어를 저장하고, 페이지를 새로고침하거나 다시 방문했을 때 유지할 수 있습니다.

  // 언어 변경 시 저장
  methods: {
    changeLanguage() {
      this.$i18n.locale = this.selectedLanguage;
      localStorage.setItem('selectedLanguage', this.selectedLanguage);
    },
  },
  
  // 초기 언어 설정 시 저장된 언어 사용
  created() {
    const savedLanguage = localStorage.getItem('selectedLanguage');
    if (savedLanguage) {
      this.selectedLanguage = savedLanguage;
      this.$i18n.locale = savedLanguage;
    }
  }

• 번역 관리 도구: 번역 관리 도구(TMS, Translation Management System)를 사용하여 대규모 프로젝트에서 번역 작업을 효율적으로 관리할 수 있습니다.

• 다국어 URL 지원: Vue Router와 함께 사용하여 다국어 URL을 지원할 수 있습니다. 이를 통해 사용자가 언어에 따라 다른 URL을 사용할 수 있습니다.

결론

vue-i18n을 사용하여 Vue.js 애플리케이션에서 다국어 지원을 쉽게 구현할 수 있습니다. 이 기본 예제를 기반으로 다양한 언어를 추가하고, 복잡한 요구 사항을 충족할 수 있는 애플리케이션을 개발할 수 있습니다. 추가적으로, vue-i18n 문서를 참고하여 더욱 고급 기능을 적용해보세요.