다국어 지원은 국제적인 사용자를 대상으로 하는 웹 애플리케이션에서 중요한 부분입니다. 이 블로그 포스트에서는 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 메서드를 통해 컴포넌트에서 다국어 문자열을 사용할 수 있습니다.
이렇게 구현된 다국어 지원은 국제 사용자들에게 웹 애플리케이션을 제공하는 데 도움이 됩니다.