Skip to content

Latest commit

 

History

History
152 lines (117 loc) · 3.58 KB

i18n.md

File metadata and controls

152 lines (117 loc) · 3.58 KB

i18n

이 프로젝트는 다국어를 지원합니다. 새로운 언어 파일을 생성하여 여러 언어를 사용하는 방법을 알아봅시다.

lang 파일

$lib/module/common/i18n/lang 폴더에 lang 파일을 추가합니다. 이때 lang 파일은 LangFile 타입의 객체를 내보내야 합니다.

export type LangFile = LayoutLangFile & PathLangFile
export interface SubLangFile{
    [key: string]: string|SubLangFile
}

export interface PathLangFile{
    [pathname: string]: SubLangFile
}

export interface LayoutLangFile{
    layout?: {
        [layoutName: string]: SubLangFile
    };
}
// $lib/module/common/i18n/lang/ko.ts
const ko: LangFile = {
    ...
}

export default ko;

lang 파일의 구성 - 레이아웃

lang 파일에 레이아웃에 대한 언어 정보를 담기 위해선 다음과 같이 작성합니다.

const ko = {
    layout: {
        layout1: {
            ...
        },
        layout2: {
            ...
        },
        ...
    }
}

각 LangFile 객체에는 layout 이라는 key를 가진 객체가 존재할 수 있습니다. 이 layout 객체는 하위 객체로 각 레이아웃의 이름을 key 값으로 하는 객체를 가질 수 있습니다.

각 레이아웃 이름의 하위 객체는 프로퍼티의 값으로 string 이나, string을 프로퍼티 값으로 가지는 반복되는 객체를 가질 수 있습니다.

const ko = {
    layout: {
        layout1: {
            header: '헤더',
            aside: {
                asideNewSong: {
                    foo:{
                        bar: '...'
                    },
                    ...
                },
                ...
            }
        },
        ...
    }
}

lang 파일의 구성 - 페이지

각 페이지에 대한 lang 파일의 구성은 다음과 같습니다.

const ko = {
    '/경로': {
        ...//반복되는 string 객체
    },
    '/경로2': {
        ...//빈복되는 string 객체
    }
}

lang 파일 사용하기

레이아웃

레이아웃에서 lang 파일을 사용하려면 다음과 같이 작성합니다.

<script>
import i18n, {getLang} from '$lib/module/common/i18n/i18n';

const lang = getLang();//최상위 레이아웃의 경우 useLang()을 대신 사용합니다.
$: i18nLayout = i18n[$lang].layout.main

</script>

{$i18nLayout[key]}

페이지

페이지에서 lang 파일을 사용하려면 다음과 같이 작성합니다.

우선 최상위 레이아웃에서

<script>
import i18n, {useLang, setI18N} from '$lib/module/common/i18n/i18n';

const lang = useLang();
const i18nPage = writable<PathLangFile>(setI18N($lang, $page.url.pathname))
setContext('i18n', i18nPage);
$: $i18nPage = setI18N($lang, $page.url.pathname);
</script>

를 작성합니다.

그런 다음 각 페이지 또는 컴포넌트에서

<script>
import {getI18N} from '$lib/module/common/i18n/i18n';

const i18n = getI18N();
</script>

{$i18n.key}

와 같이 작성합니다. i18n 스토어는 url의 pathname에 따라 갑이 변화합니다.

페이지 - 다이나믹 라우팅

Rest parameter 등을 사용하는 경우 비슷한 페이지이지만 경로가 모두 달라지기 때문에 사용법이 조금 다릅니다.

각 페이지나 컴포넌트에서

<script>
    const lang = getLang();
    $: i18n = getI18N(key, $lang);//여기서 key는 LangFile의 key값입니다. 원래는 경로 이름이 사용되나, 다이나믹 라우팅을 사용할 경우 자유롭게 정해도 됩니다.
</script>

{i18n['foo']}

와 같이 사용합니다.