웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
nuxtjs를 사용하는 웹사이트에서 다국어를 사용하는 방법에 대하여 알아봅니다. 예를들어 현재 제공하는 언어가 한국어이지만 추가로 영어, 중국어, 일본어 등등 다른 언어를 제공하는 방법입니다.
웹사이트가 제공하는 콘텐츠가 여러 나라에서 관심있을 수 있는 주제라면 다국어를 제공하므로써 더 많은 방문자 유입을 기대할 수 있게됩니다. 유저가 늘어나면서 세션 수나 페이지 뷰가 늘어날 수 있고 광고를 사용할 때 광고 노출에 따른 더 많은 수입 역시 기대할 수 있겠습니다. 다만 여러 나라의 언어를 함께 제공해야하기 때문에 언어별로 다른 콘텐츠가 조금씩 달라지거나 여러 언어의 번역이 필요한만큼 관리적인 부분이 증가할 수 있겠습니다.
- 언어별로 json 형태의 파일 관리가 가능
- 해당 언어의 번역을 빠르게 보여주는 간단한 메소드 제공
- 언어별 자동으로 라우팅 생성
- 간단한 언어 변경 및 라우팅 변경 메소드 등을 제공
- 외부 저장소를 사용한 Lazy load 등 기능 제공
이 외에도 많은 장점들이 있습니다. 특히 서버에서 언어별로 파일을 만들 필요가 없게됩니다. 즉 index___en.vue 그리고 index___kr.vue 처럼 각각 다른 언어의 파일을 사용하여 서로 다른 언어를 적용한 페이지를 생성할 필요가 없기 때문에 관리적인 측면에서도 굉장히 큰 이점이 있습니다. 그럼 아래에서 어떻게 사용하는지 더 자세히 알아봅니다.
가장 먼저 설치 방법입니다. 앱에서 패키지를 설치합니다.
참고로 현재 vue3를 지원하고는 있으나 현재까지는 stable은 버전은 아닙니다.
설치가 끝났다면 아래와 같이 package.json에 추가된 것을 볼 수 있겠죠.
package.json
이제 @nuxtjs/i18n을 사용할 수 있도록 nuxt.config.js의 modules 블록 아래에 다음과 같이 설정합니다.
이제 기본적인 설정은 완료되었습니다. 위와 같이 다양한 옵션을 추가할 수 있습니다. 많이 사용되는 옵션 위주로 알아보겠습니다. 아래는 자주 사용되는 간단한 옵션 설정 내용입니다.
설정에 대한 간략한 설명입니다.
ko.json 등의 언어 파일은 해당 언어의 키와 값으로 되어 있게됩니다. 아래는 간단한 예로 원하는 텍스트 문구를 계속해 추가할 수 있겠죠.
en.json도 볼까요? 동일한 키를 가졌으나 영어 값을 가지게 되겠죠.
기본적인 설정은 여기까지입니다. 이제 앱 구동시 간단한 사용 방법을 알아봅니다.
@ 번역하여 화면에 출력하는 방법
가장 먼저 화면에 번역하여 노출해야 합니다. 해당 키를 아래와 같이 적용하여 template에서 노출할 수 있습니다.
참고로 현재 사용된 언어는 $i18n.locale을 사용하여 출력할 수 있습니다. 예를들어 아래는 'ko'처럼 나타나게 됩니다.
<script> 내부에서 사용할 경우 useI18n이나 useContext의 i18n을 사용할 수도 있습니다. 아래는 간단하게 useContext()를 사용한 방법의 예제입니다.
@ 특정 단어만 바뀌는 경우에 번역을 사용하는 방법
만약 특정 단어는 계속해서 바뀌는 텍스트 문장을 위해 모든 번역을 파일에 추가하면 번거롭습니다. 이를 위해서 아래와 같이 사용이 가능합니다.
위와 같이 {0}, {1}처럼 사용하여 해당하는 위치의 텍스트는 계속 보여줄 수 있습니다. 이제 위의 키와 값을 적용하기 위해서 <template> 내부에 아래와 같이 사용할 수 있습니다.
출력 결과가 어떻게 될까요? 이 경우 아래와 같이 나타나게 됩니다.
반복되는 텍스트 전체를 번역에 추가할 필요가 없기 때문에 관리적으로 매우 유용한 방법입니다.
여기까지 nuxtjs에서 다국어 사용을 위한 방법을 설치부터 예제까지 다양하게 알아보았습니다.
! 다국어를 사용하는 이유?
웹사이트가 제공하는 콘텐츠가 여러 나라에서 관심있을 수 있는 주제라면 다국어를 제공하므로써 더 많은 방문자 유입을 기대할 수 있게됩니다. 유저가 늘어나면서 세션 수나 페이지 뷰가 늘어날 수 있고 광고를 사용할 때 광고 노출에 따른 더 많은 수입 역시 기대할 수 있겠습니다. 다만 여러 나라의 언어를 함께 제공해야하기 때문에 언어별로 다른 콘텐츠가 조금씩 달라지거나 여러 언어의 번역이 필요한만큼 관리적인 부분이 증가할 수 있겠습니다.
# nuxtjs에서 nuxtjs/i18n을 사용하여 다국어 사용하기
nuxtjs는 vue 기반의 SSR을 제공하는 프레임워크로 다국어 적용을 쉽게 할 수 있는 nuxtjs/i18n 패키지가 존재합니다. 이 패키지를 사용하면 더 쉽게 간단하게 다국어 사용이 가능합니다. 편리한 여러가지 옵션들을 제공하는데요 ~ 기존에 i18n 관련 패키지를 사용한 경험이 있다면 잘 아실겁니다. 간단한 장점만 몇 가지 얘기하자면 아래와 같습니다.- 언어별로 json 형태의 파일 관리가 가능
- 해당 언어의 번역을 빠르게 보여주는 간단한 메소드 제공
- 언어별 자동으로 라우팅 생성
- 간단한 언어 변경 및 라우팅 변경 메소드 등을 제공
- 외부 저장소를 사용한 Lazy load 등 기능 제공
이 외에도 많은 장점들이 있습니다. 특히 서버에서 언어별로 파일을 만들 필요가 없게됩니다. 즉 index___en.vue 그리고 index___kr.vue 처럼 각각 다른 언어의 파일을 사용하여 서로 다른 언어를 적용한 페이지를 생성할 필요가 없기 때문에 관리적인 측면에서도 굉장히 큰 이점이 있습니다. 그럼 아래에서 어떻게 사용하는지 더 자세히 알아봅니다.
! @nuxtjs/i18n 설치하기
가장 먼저 설치 방법입니다. 앱에서 패키지를 설치합니다.
npm i @nuxtjs/i18n
or
yarn add @nuxtjs/i18n
참고로 현재 vue3를 지원하고는 있으나 현재까지는 stable은 버전은 아닙니다.
설치가 끝났다면 아래와 같이 package.json에 추가된 것을 볼 수 있겠죠.
package.json
{
"name": "webisfreecom",
"dependencies": {
"@nuxtjs/i18n": "^7.2.2",
...
}
"name": "webisfreecom",
"dependencies": {
"@nuxtjs/i18n": "^7.2.2",
...
}
이제 @nuxtjs/i18n을 사용할 수 있도록 nuxt.config.js의 modules 블록 아래에 다음과 같이 설정합니다.
modules: [
'@nuxtjs/axios',
[
'@nuxtjs/i18n',
{
// 설정 옵션이 있는 경우 여기 추가
}
]
...
]
'@nuxtjs/axios',
[
'@nuxtjs/i18n',
{
// 설정 옵션이 있는 경우 여기 추가
}
]
...
]
이제 기본적인 설정은 완료되었습니다. 위와 같이 다양한 옵션을 추가할 수 있습니다. 많이 사용되는 옵션 위주로 알아보겠습니다. 아래는 자주 사용되는 간단한 옵션 설정 내용입니다.
import ko from './messages/ko.json'
import en from './messages/en.json'
{
locales: ['ko', 'en'],
defaultLocale: 'ko',
strategy: 'prefix',
vueI18n: {
fallbackLocale: 'ko',
messages: {
ko,
en
},
},
}
import en from './messages/en.json'
{
locales: ['ko', 'en'],
defaultLocale: 'ko',
strategy: 'prefix',
vueI18n: {
fallbackLocale: 'ko',
messages: {
ko,
en
},
},
}
설정에 대한 간략한 설명입니다.
- locales : 사용할 언어를 설정할 수 있습니다.
- defaultLocale : 기본이 되는 언어를 얘기합니다.
- strategy: 다국어의 url 사용 방법을 결정합니다. 'prefix'를 사용하면 모든 url의 path 앞에 해당 언어 /ko/ 또는 /en/이 붙어서 나옵니다. 'prefix_except_default'가 기본값으로 기본 선택된 언어는 '/'처럼 언어 기호가 없고 나머지 언어들만 '/en'처럼 사용할 수 있습니다.
- vueI18n: messages를 여기에 설정할 수 있는데 선택된 언어의 텍스트가 번역되어 보여줄 텍스트를 여기서 추가하게됩니다. 여기서는 언어별로 별도의 json 파일을 만들어 사용했습니다. 일반적으로 별도의 파일 단위로 관리하는 편입니다.
ko.json 등의 언어 파일은 해당 언어의 키와 값으로 되어 있게됩니다. 아래는 간단한 예로 원하는 텍스트 문구를 계속해 추가할 수 있겠죠.
{
"gnb_greeting": "안녕하세요",
"gnb_bye": "안녕하가세요"
}
"gnb_greeting": "안녕하세요",
"gnb_bye": "안녕하가세요"
}
en.json도 볼까요? 동일한 키를 가졌으나 영어 값을 가지게 되겠죠.
{
"gnb_greeting": "Hello",
"gnb_bye": "Good bye"
}
"gnb_greeting": "Hello",
"gnb_bye": "Good bye"
}
기본적인 설정은 여기까지입니다. 이제 앱 구동시 간단한 사용 방법을 알아봅니다.
@ 번역하여 화면에 출력하는 방법
가장 먼저 화면에 번역하여 노출해야 합니다. 해당 키를 아래와 같이 적용하여 template에서 노출할 수 있습니다.
<template>
<div>
{{ $t('gnb_greeting') }}
</div>
</template>
<div>
{{ $t('gnb_greeting') }}
</div>
</template>
참고로 현재 사용된 언어는 $i18n.locale을 사용하여 출력할 수 있습니다. 예를들어 아래는 'ko'처럼 나타나게 됩니다.
<span>{{ $i18n.locale }}</span>
<script> 내부에서 사용할 경우 useI18n이나 useContext의 i18n을 사용할 수도 있습니다. 아래는 간단하게 useContext()를 사용한 방법의 예제입니다.
<script>
import { useContext } from 'vue';
setup() {
const { i18n } = useContext();
enText = i18n.t('gnb_greeting');
}
</script>
import { useContext } from 'vue';
setup() {
const { i18n } = useContext();
enText = i18n.t('gnb_greeting');
}
</script>
@ 특정 단어만 바뀌는 경우에 번역을 사용하는 방법
만약 특정 단어는 계속해서 바뀌는 텍스트 문장을 위해 모든 번역을 파일에 추가하면 번거롭습니다. 이를 위해서 아래와 같이 사용이 가능합니다.
{
"show_number": "{0} 번째 숫자입니다.",
}
"show_number": "{0} 번째 숫자입니다.",
}
위와 같이 {0}, {1}처럼 사용하여 해당하는 위치의 텍스트는 계속 보여줄 수 있습니다. 이제 위의 키와 값을 적용하기 위해서 <template> 내부에 아래와 같이 사용할 수 있습니다.
<template>
<div>
{{ $t('show_numbrer', ['100']) }}
</div>
</template>
<div>
{{ $t('show_numbrer', ['100']) }}
</div>
</template>
출력 결과가 어떻게 될까요? 이 경우 아래와 같이 나타나게 됩니다.
"100 번째 숫자입니다."
반복되는 텍스트 전체를 번역에 추가할 필요가 없기 때문에 관리적으로 매우 유용한 방법입니다.
여기까지 nuxtjs에서 다국어 사용을 위한 방법을 설치부터 예제까지 다양하게 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
