Vue.js를 활용한 다국어 지원 구현하기

by

다국어 지원은 국제적인 사용자를 대상으로 하는 웹 애플리케이션에서 중요한 부분입니다. 이 블로그 포스트에서는 Vue.js와 Vue I18n 라이브러리를 사용하여 간단한 다국어 지원 기능을 구현하는 방법을 살펴보겠습니다. 한국어(Korean)와 영어(English)를 지원하는 예제를 제공하겠습니다.


단계 1: Vue I18n 라이브러리 설치

먼저 Vue I18n 라이브러리를 설치합니다.

npm install vue-i18n


단계 2: Vue I18n 설정

Vue 애플리케이션에 Vue I18n을 설정합니다. i18n.js 파일을 생성하고 다음과 같이 설정합니다.

// i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export const i18n = new VueI18n({
  locale: 'en', // 기본 언어 설정
  fallbackLocale: 'en', // 언어가 지원되지 않을 때의 대체 언어 설정
  messages: {
    en: {
      hello: 'Hello, World!',
      greeting: 'Welcome to my app.',
    },
    ko: {
      hello: '안녕하세요, 세계!',
      greeting: '내 앱에 오신 것을 환영합니다.',
    },
  },
});


단계 3: 다국어 지원 컴포넌트 작성

Vue 컴포넌트에서 다국어 지원을 사용하려면 $t 메서드를 사용하여 다국어 문자열을 불러옵니다.

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('greeting') }}</p>
  </div>
</template>


단계 4: 언어 변경

사용자가 언어를 변경할 수 있도록 언어 선택 UI를 제공하고, 해당 이벤트를 통해 언어를 변경합니다.

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('ko')">한국어</button>
    <!-- 나머지 컴포넌트 내용 -->
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(locale) {
      this.$i18n.locale = locale;
    },
  },
};
</script>


단계 5: 다국어 문자열 파일 관리

다국어 문자열은 messages 속성에 정의됩니다. 이 속성을 다국어 파일로 분리하고 필요한 언어별로 정의합니다. 예를 들어, en.json 및 ko.json과 같은 파일로 저장하고 로딩합니다.

// en.json
{
  "hello": "Hello, World!",
  "greeting": "Welcome to my app."
}
// ko.json
{
  "hello": "안녕하세요, 세계!",
  "greeting": "내 앱에 오신 것을 환영합니다."
}


단계 6: 다국어 지원 컴포넌트 사용

Vue 컴포넌트에서 $t 메서드를 사용하여 다국어 문자열을 사용합니다.

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('greeting') }}</p>
  </div>
</template>

다음과 같이 간단한 Vue.js 애플리케이션에서 다국어 지원을 구현할 수 있습니다. 사용자가 언어를 변경하면 해당 언어로 메시지가 표시됩니다. i18n.js 파일을 통해 다국어 설정을 관리하고, $t 메서드를 통해 컴포넌트에서 다국어 문자열을 사용할 수 있습니다.

이렇게 구현된 다국어 지원은 국제 사용자들에게 웹 애플리케이션을 제공하는 데 도움이 됩니다.



Leave a Comment