[typescript] 타입스크립트 모듈 번들러를 사용하여 다국어 번역 처리하기

14 Dec 2023

typescript

다국어 번역 처리는 모바일 앱 또는 웹 애플리케이션을 개발할 때 중요한 요소입니다. 이번 블로그에서는 타입스크립트(TypeScript)와 모듈 번들러를 사용하여 다국어 지원 기능을 어떻게 구현하는지 알아보겠습니다.

모듈 번들러 선택

우선, 번들링 도구로는 웹팩(Webpack)이나 롤업(Rollup)과 같은 모듈 번들러를 선택할 수 있습니다. 이번 예제에서는 웹팩을 사용하여 다국어 번역 처리를 구현해 보겠습니다.

다국어 번역 라이브러리 선택

가장 인기 있는 다국어 번역 라이브러리 중 하나인 i18next를 사용하여 다국어 번역 처리를 구현할 것입니다. i18next는 다양한 기능과 풍부한 지원을 제공하여 번역 처리를 효율적으로 할 수 있도록 도와줍니다.

타입스크립트와 함께 i18next 설정하기

1. 프로젝트에 필요한 라이브러리 설치

먼저, 프로젝트에 필요한 라이브러리를 설치합니다.

npm install i18next i18next-xhr-backend @types/i18next --save

2. i18next 초기화

다국어 번역을 위해 i18next를 초기화하고 번들링된 번역 파일을 불러오는 설정을 합니다.

import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';

i18next
  .use(XHR)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    backend: {
      loadPath: '/locales/{{lng}}/translation.json'
    }
  });

3. 번역 사용하기

이제, 다국어 번역을 사용할 때는 아래와 같이 코드를 작성할 수 있습니다.

import i18next from 'i18next';

// 번역 키에 해당하는 값을 얻어옵니다.
const translatedText = i18next.t('hello');

위와 같이 타입스크립트와 i18next를 함께 사용하여 간단하게 다국어 번역 처리를 구현할 수 있습니다. 이를 통해 유저들은 자신이 선호하는 언어로 애플리케이션을 이용할 수 있게 됩니다.

마치며

이번 글에서는 타입스크립트와 모듈 번들러인 웹팩을 사용하고, i18next 라이브러리를 통해 다국어 번역 처리를 구현하는 방법을 살펴보았습니다. 다국어 지원 기능을 추가하여 앱 또는 웹사이트를 전 세계 사용자들에게 보다 친근하게 만드는 것은 매우 중요합니다. 이를 통해 사용자 경험을 향상시키고, 국제적으로 서비스를 제공할 수 있는 기반을 마련할 수 있습니다.