다국어 처리하기 with vue-i18n

아래의 블로그에 적힌대로 진행합니다.

https://minhanpark.github.io/today-i-learned/vue-i18n/

vue로 다국어 적용(국제화) 하기

 

이후에 아래의 prcess.env.VUE_APP_I18N_LOCALE 처럼 저장된 환경변수를 가져오는 것이 아니라, 브라우저에 설정된 언어를 읽어서 언어설정에 맞게 변경해주도록 하겠습니다.

 

브라우저 언어를 읽어옵니다.

// 브라우저의 언어설정을 읽어온다.
const lang = (navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage

// 만약 이미 로컬스토리지에 저장한 언어가 없거나 로컬스토리지에 저장된 언어와 lang이 다를 경우에는
// if문으로 들어간다.
if (!window.localStorage.getItem('language') || windw.localStorage.getItem('language') !== lang) {
	middleware.setLanguageBylocale(lang.toString())
}

 

setLanguageBylocale 함수를 만듭니다. 국가코드는 'ko'일 수도 있고 'ko_KR'이 될 수도 있으므로 브라우저마다 다르게 설정되어 있는 국가코드에 대한 예외처리를 해줍니다.

const setLanguageBylocale = function (locale) {
  console.log(locale) // ko-KR
  let langId = null
  // 뒤에 붙는 language 코드가 소문자 또는 대문자인 경우가 있다
  const matched = locale.match(/^([a-z]{2})-([a-zA-Z]{2})$/)
  console.log(matched) // ['ko-KR', 'ko', 'KR', index: 0, input: 'ko-KR', groups: undefined]
  if (!matched || matched.length < 1) {
    const supportedLanguage = ['en', 'ko', 'ja']
    if (supportedLanguage.includes(locale)) {
      langId = locale
    } else {
      langId = 'en'
    }
  } else {
  	// 여기로 들어온다. langId에는 'ko'가 들어가게 된다.
    langId = matched[1]
  }
  window.localStorage.setItem('language', langId)
  i18n.locale = langId
}

const setLanguageBylocale = function (locale) {
  console.log(locale) // ko
  let langId = null
  // 뒤에 붙는 language 코드가 소문자 또는 대문자인 경우가 있다
  const matched = locale.match(/^([a-z]{2})-([a-zA-Z]{2})$/)
  console.log(matched) // null
  if (!matched || matched.length < 1) {
  // 여기로 들어온다.
    const supportedLanguage = ['en', 'ko', 'ja']
    if (supportedLanguage.includes(locale)) {
      langId = locale
    } else {
      langId = 'en'
    }
  } else {
    langId = matched[1]
  }
  window.localStorage.setItem('language', langId)
  i18n.locale = langId
}

 

이제 아래와 같이 변경해줍니다.