[javascript] Vue Router를 사용한 다국어 지원

18 Dec 2023

javascript

다국어 지원은 모던한 웹 애플리케이션의 필수적인 요소 중 하나입니다. 사용자들에게 직관적이고 친숙한 경험을 제공하기 위해서는 웹 앱을 여러 언어로 제공하는 것이 중요합니다. Vue.js 앱을 개발하고 있는데, Vue Router를 사용하여 다국어 지원을 추가하고자 한다면 어떻게 해야 할까요? 이번 포스트에서는 Vue Router를 사용하여 다국어 지원을 추가하는 방법에 대해 알아보겠습니다.

Vue Router 설정

먼저, Vue 애플리케이션에 Vue Router를 설치하고 설정해야 합니다. Vue Router를 사용하여 앱 내에서 다국어 라우팅을 구현하려면 routes 옵션을 사용하여 각 언어에 대한 라우트를 설정해야 합니다. 또한 언어 선택을 위한 링크를 제공해야 합니다. 다음은 Vue Router를 사용하여 다국어 지원 기능을 추가한 예제 코드입니다.

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/:lang',
    component: {
      render(c) { return c('router-view'); }
    },
    children: [
      {
        path: '',
        name: 'home',
        component: Home
      },
      {
        path: 'about',
        name: 'about',
        component: About
      },
      // Add more routes for different languages
    ]
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

위의 코드에서는 /:lang을 통해 선택된 언어에 따라 적절한 컴포넌트를 렌더링하도록 설정하고 있습니다.

언어 선택 컴포넌트

다음으로, 사용자가 언어를 선택할 수 있는 컴포넌트를 구현해야 합니다. 이 컴포넌트는 다국어 어플리케이션에서 선택 가능한 언어 목록을 제공해야 합니다. 사용자가 언어를 선택하면 해당 언어에 맞는 라우트로 이동해야 합니다. 아래는 언어 선택 컴포넌트의 예제 코드입니다.

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('ko')">한국어</button>
    <!-- Add buttons for more languages -->
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$router.push({ path: `/${lang}` });
    }
  }
};
</script>

위 코드에서는 각 언어에 대한 버튼을 통해 changeLanguage 메소드를 호출하여 해당 언어에 맞는 라우트로 이동하도록 설정하고 있습니다.

다국어 지원 컴포넌트

마지막으로, 각 언어에 맞는 문구를 제공하는 다국어 지원 컴포넌트를 구현해야 합니다. 이 컴포넌트는 선택된 언어에 따라 해당 언어에 맞는 문구를 렌더링해야 합니다. 아래는 다국어 지원 컴포넌트의 예제 코드입니다.

<template>
  <div>
    <h1>{{ $t('home.title') }}</h1>
    <p>{{ $t('home.welcome') }}</p>
  </div>
</template>

<script>
export default {
  // Add language-specific content here
};
</script>

위 코드에서 {{ $t('home.title') }}와 {{ $t('home.welcome') }}는 각 언어에 따라 다른 문구를 표시하기 위해 다국어 라이브러리를 사용하여 설정해야 합니다.

이제 Vue Router를 사용하여 다국어 지원을 추가하는 방법에 대해 알아보았습니다. Vue.js를 사용하여 다국어 웹 앱을 개발하면 사용자들에게 더욱 친숙하고 개인화된 경험을 제공할 수 있습니다.

References

Vue Router 공식 문서: https://router.vuejs.org/
Vue I18n 공식 문서: https://kazupon.github.io/vue-i18n/