i18n을 사용하여 다국어 처리 하기

다국어 처리를 위해 먼저 파일을 생성했다.

src/lib/i18n

svelte를 사용하고 있기 때문에 svelte-18n 공식문서를 채택했다. 

 

각각의 json 파일에는 언어를 작성해두었다. 

// en-US.json
{
​​"common": {
​​​​"cancel": "Cancel",
​​​​"close": "Close",
​​​​"delete": "Delete"
​​},
​}
​
​// ko-KR.json
​{
​​"common": {
​​​​"cancel": "취소",
​​​​"close": "닫기",
​​​​"delete": "삭제하기"
​​},
​}

 

그리고 index.ts 파일에는 공식 깃헙에 나와있는 그대로를 작성해줬다. 

locale 변수는 현재 선택된 언어의 코드이다. store에 사용하고 있는 언어를 저장하는 방식으로 사용했다. 

import { init, locale, register } from 'svelte-i18n';
import { languages } from '@/types/i18n';
import { storeLanguageCode } from '@/routes/store';
import { get } from 'svelte/store';

const defaultLocale = get(storeLanguageCode);

languages.forEach((language) => {
​​register(language.code, () => import(`./locales/${language.code}.json`));
});

init({
​​fallbackLocale: defaultLocale,
​​initialLocale: defaultLocale,
});

const initI18n = () => {
​​console.log('i18n initialized');
};

locale.subscribe((loc) => {
​​if (loc) {
​​​​storeLanguageCode.set(loc || '');
​​}
});

export default initI18n;

 

 

이제 그럼 작성해둔 문자열을 다국어 처리하는 과정이 필요하다. 

import { t, locale, locales } from 'svelte-i18n';

locale.subscribe(() => {
​​menuTabs = {
​​​​[APP_ROUTE.MAIN]: $t('menu.search'),
​​};
});

<select
​​class="select-bordered select h-auto min-h-fit border border-zinc-500 bg-transparent py-2 text-xs text-white focus:border focus:border-zinc-100"
​​bind:value={$locale}
>
​​{#each $locales as item_locale}
​​​​<option value={item_locale}>
​​​​​​{languages.find((lang) => lang.code === item_locale)?.icon}
​​​​​​{languages.find((lang) => lang.code === item_locale)?.name}
​​​​</option>
​​{/each}

여기서 사용되는 t는 반응형으로 사용하며 주어진 key에 해당하는 다국어 문자열을 반환한다. 

locales 변수는 지원되는 모든 언어 코드의 배열이다. 

 

i18n을 사용하면 웹에서 쉽게 다국어화를 구현할 수 있고, 유지보수에도 편리하다는 장점이 있다. 

 

 

참고자료

---

• https://www.npmjs.com/package/svelte-i18n