“ 당신은 소프트웨어 품질을 추구할 수도 있고, 포인터 연산을 할 수도 있다. 그러나 두 개를 동시에 할 수는 없다. ”
🔑 개요
국제화를 고려한 웹 애플리케이션을 구현하기 위해, 국제화 처리 모듈을 사용하여 구현한 예시를 입니다.
기본적인 nuxt-i18n 모듈만 사용한 방법과 public-google-sheets-parser 라이브러리를 기반으로 한 nuxt-google-sheets-parser 모듈을 사용하여 자동화 처리한 방법을 설명합니다.
🔑 nuxt-i18n
참고문서) nuxt-i18n
1. package install
npm install @nuxtjs/i18n
2. nuxt.config.js 설정
modules: [
[
'@nuxtjs/i18n',
{
// 대응할 언어들 셋팅
// 관련 옵션은 문서 참조
locales: [
{ code: 'ko', iso: 'ko_KR', file: 'ko/index.js' },
{ code: 'en', iso: 'en-US', file: 'en/index.js' },
],
defaultLocale: 'ko',
langDir: 'locales/',
strategy: 'prefix_except_default',
vueI18n: {
fallbackLocale: 'ko',
messages: {
ko: ko,
en: en,
},
},
lazy: false,
vueI18nLoader: true,
vuex: false,
detectBrowserLanguage: {
useCookie: true,
cookieKey: "i18n",
},
},
],
],
3. 폴더 셋팅 및 언어별로 정리
// ko/index.js
export default {
header:{
service:'서비스',
menu:'메뉴',
button:'버튼',
login:'로그인'
}
}
// en/index.js
export default {
header:{
service:'service',
menu:'menu',
button:'button',
login:'login'
}
4. 구현 - > 다국어 확인
<template>
// 다국어 적용되었는지 확인
// ko: 서비스 , en: service
<div>
{{ $t(header.service)}}
</div>
</template>
🔑 nuxt-google-sheets-parser
참조문서) nuxt-google-sheets-parser
참고블로그) 블로그
1.package install
npm install nuxt-google-sheets-parser
2. nuxt.config.js 설정
modules: [
[
'@nuxtjs/i18n',
{
// ...생략
},
// 위에 nuxt-i18n 모듈 설정 이후에 등록되어야합니다.
"nuxt-google-sheets-parser",
],
],
3. 구글 시트 준비
참고시트) Nuxt 국제화 구글 관리시트
ko | en | ja | key | key1 | key2 | ... | key10 |
제목 | title | タイトル | common.title | common | title | ||
내용 | Contents | 内容 | common.description | common | description |
en, ja 필드값 GOOGLETRANSLATE 함수를 사용하여 구글에서 번역된 값을 사용하도록 했습니다.
추후 실제 번역된 텍스트가 나오기 전까지 테스트용으로 사용하면 됩니다.
ex) GOOGLETRANSLATE($A1, $A$1, B$1)
4. default json 파일 생성
구글 시트 API에서 장애가 일어났을 때, 텍스트가 깨질 수 있는 단점이 있습니다. 이를 방지하여 사전에 구글시트 기반으로 locals별 json 파일을 생성하는 소스를 구현해 봅니다.
// makeSheetData.js
const fs = require('fs')
const _ = require('lodash')
const PublicGoogleSheetsParser = require('public-google-sheets-parser')
const parser = new PublicGoogleSheetsParser()
// https://docs.google.com/spreadsheets/d/<key값>/
const sheetId = '위 시트 URL key값'
//구글 시트 이름
const sheetName = 'value1'
//언어 추가시 작성필요
const Languages = ['ko', 'en']
parser.parse(sheetId, sheetName).then((rows) => {
const dictionary = {}
rows.forEach((row) => Languages.forEach((lang) => _.set(dictionary, `${lang}.${row.key}`, row[lang])))
// 필요한 언어들에 대한 default.json 파일을 생성합니다.
Languages.forEach((lang) => fs.writeFileSync(`./locales/${lang}/default.json`, JSON.stringify(dictionary[lang])))
})
default.json 파일을 생성합니다.
node makeSheetData
5. 구글 시트 데이터 세팅
구글 시트데이터 결과를 저장할 파일을 locale/${locale}/index.js 경로 안에 작성합니다.
구글 시트 API가 에러가 날 경우 위에 만들어준 default.json으로 연결해 줍니다.
※ 만약 구글시트 페이지별로 모듈화가 필요하다면 각 "sheetName"으로 조회해서 dictionary에 합치면 됩니다.
// locals/base.js
import set from 'lodash/set'
export default async (context, locale) => {
// https://docs.google.com/spreadsheets/d/<key값>/
const sheetId = '위 시트 URL key값'
const sheetName = 'value1'
const dictionary = {}
const response = await context.$gsparser.parse(sheetId, sheetName)
if(response.length<0){
// google api가 비정상 연결일때는 미리 만들어둔 default.json data를 사용한다.
const defaultDictionary = require(`./${locale}/default.json`);
Object.assign(dictionary, defaultDictionary);
}
response.forEach((item) => set(dictionary, item.key, item[locale]));
return Promise.resolve(dictionary)
}
언어별로 파일을 작성합니다.
// locale/ko/index.js
import base from '../base'
export default (context) => {
return base(context, 'ko')
}
이후 콘솔로 dictionary에 잘 담겼는지 확인해보거나, 위에 i18n 사용할때 방법으로 확인하시면됩니다.
❗주의
구글시트 값이 조회가 안된다면
공유 버튼 클릭 후 "일반 엑세스" 를 확인하시면됩니다.
i18n방식으로만 하는 방법과 구글시트로 동적으로 json파일을 가져와 처리하는 방법 두 가지를 해보았는데요.
참고한 블로그 내용을 토대로 한번 정리해 봤습니다. 국제화 작업이 필요한 웹 사이트에서 다양하게 적용해 볼 수 있을 거 같아서 많은 도움이 되었습니다. 물론 다른 방식과 구현방법이 있겠지만 조금이라도 도움이 되었으면 합니다.!