[WebOrder] 다국어 처리 (VueDatePicker, IBSheet)

 

다국어처리를 위해 locale="ko" 하던 것을 변경하려고 한다.

(en추가.. Vue-date-picker  및 IBSheet 등에 적용)

 

방법은 크게 두 가지가 있다.

 

 

1. getLanguage() 버전 (JS생성하여 참조)

: localStorage 저장값 참조

: 비반응형. 화면에서 언어를 변경해도 이 값은 자동 갱신이 되지 않음.

: 최초 로딩 시 저장된 언어값 조회하거나 서버 API요청 시 언어 파라미터 전달 등에 활용

 

 

2. useI18n + computed 버전

 

:  vue-i18n 내부 locale 상태 참조

:  반응형. locale 변경되면 자동 변경.

 

 

나는 itemDialog.vue에서 2번을 사용했고 나머지는 1을 사용했다.

 

 

---

 

 

 

 

1. getLanguage() 버전

/**
 * 로컬 스토리지에서 현재 설정되어 있는 언어를 return한다.
 * @returns {*}
 */
export const getLanguage = () =>{
    let locale = getLocalStorage("locale")
    return locale.lang
}

 

이렇게 js 파일을 생성해두고 갖다 쓰면 된다.

 

import {getLanguage} from '@/assets/js/common/common.js';

const locale = getLanguage();

 

ex)

locale === "ko" ? "itemName" : "itemEngName"

---

 

 

/**
 * 로컬 스토리지 데이터 리턴.
 * @param key 로컬 스토리지 키 값
 * @returns {any} sessionStorage에 저장된 json string을 javascript 객치로 parse해서 리턴한다.
 */
export function getLocalStorage(key){
    return JSON.parse(window.localStorage.getItem(key))
}

 

common.js 에 로컬 스토리지 데이터를 리턴하는 메서드를 만들어두고 아래처럼 써도 된다.

let lang = getLocalStorage("locale").lang;

 

 

 

사이드바에 Language.vue 참조하고

Language.vue의 v-select에 onChange 메서드 연결해서

const onChange = (value) => {

    let locale = getLocalStorage("locale")
    if (locale.lang !== value.codeNickName){
        setLocalStorage("locale",{lang: value.codeNickName});
        location.href = location.href
    }

}

 

이렇게 해두면

locale에 따라 자동으로 값이 바뀌는 것처럼 보이게 할 수 있다. (반응형은 아님)

localStorage에 저장된 언어값을 갱신해서 전체 페이지를 리로드

앱 시작 시 i18n이 초기 locale을 localStorage에서 읽어서 설정하도록 되어있으므로

새로 고침 후 locale이 변경된 상태로 시작하게 됨

 

즉 새로고침하여 재설정하는 방식

 

---

---

 

 

다른 방법도 있다.

 

 

2. useI18n + computed 버전

 

 

기존 구현 코드 일부 

 

<templates>

<VueDatePicker
    v-model="itemData.applyStartDate"
    format="yyyy-MM-dd"
    placeholder="yyyy-MM-dd"
    :text-input="true"
    :auto-apply="true"
    :editable="true"
    clearable
    locale="ko"
    :week-start="0"
    :enable-time-picker="false"
    :calendar="markWeekends"/>

 

<script>

// VueDatePicker 토,일 Font Color
const markWeekends = (weeks) =>
    weeks.map((week) => ({
        ...week,
        days: week.days.map((d) => {
            const w = d.value.getDay();
            if (w === 0) d.classData = { ...(d.classData || {}), 'ko-sun': true };
            if (w === 6) d.classData = { ...(d.classData || {}), 'ko-sat': true };
            return d;
        }),
    }));

 

 

import {_t, consoleLog, doRequestJson} from '@/assets/js/common/common';

 

시트 헤더나 버튼, autoComplete의 label 등은

_t( ) 를 import 해서 위치 지정해서 사용했었는데

 

이건~

locale 을 동적 바인딩해서 쓰면 된다.

import { useI18n } from 'vue-i18n';

const { locale } = useI18n();

const dateLocale = computed(() => {
    switch (locale.value) {
        case 'en': return 'en';
        default: return 'ko';
    }
});

<VueDatePicker
    v-model="itemData.applyStartDate"
    format="yyyy-MM-dd"
    placeholder="yyyy-MM-dd"
    :text-input="true"
    :auto-apply="true"
    :editable="true"
    clearable
    :locale="dateLocale"
    :week-start="0"
    :enable-time-picker="false"
    :calendar="markWeekends"/>

 

VueDatePicker에 추가하는 부분은 한 줄~

원래 locale="ko" 였음

:locale="dateLocale"

 

 

 

---

 

 

++

이건 IBSheet 의 다국어처리

 

Cfg에 MsgLocale 속성 주면 된다.

Cfg : {
	MsgLocale: locale.lang,
    ...