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