[React-i18next] 웹페이지에 '더 효율적으로' 다국어 적용하기 (with: typescript)

불러와야하는 json파일이 길 때, json파일을 항상 호출하는 것은 매우 비효율적이다.

이에 i18next에는 네트워크를 통해 번역 파일을 서버에서 가져오게 하는 기능이 있다.

1. 초기세팅

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpBackend from "i18next-http-backend";

i18n
  .use(initReactI18next)
  .use(HttpBackend)
  .init({
    fallbackLng: false, // 지원하지 않는 언어 또는 키가 사용되었을 때 fallback 언어로 사용할 언어 설정
    fallbackNS: false, // fallback 언어로 사용할 네임스페이스 설정
    lng: localStorage.getItem("userContryCode") as string, // 기본 언어 설정
    ns: ["assetDeposit", "myAssetSpot"], // 사용할 네임스페이스 설정
    debug: true, // 디버그 모드 설정
    interpolation: {
      escapeValue: false, // 문자열 내에 변수를 사용할 때 사용할 구분자 설정
    },
  });

export default i18n;

 

2. 속성 설명

- 1. HttpBackend 모듈

i18next 라이브러리의 백엔드 모듈 중 하나로, 네트워크를 통해 번역 파일을 서버에서 가져오는 역할이다.

 

i18next에서 번역 파일은 JSON 형식으로 작성되며, HttpBackend 모듈을 사용하면 이러한 번역 파일을 HTTP 프로토콜을 사용하여 서버에서 가져올 수 있다. 이렇게 서버에서 번역 파일을 가져오면 클라이언트 측에서 번역 파일을 유지보수하는 것보다 편리하다.

 

HttpBackend 모듈은 i18next-http-backend 패키지에 포함되어 있으며, i18next에서 사용하기 위해서는 이 패키지를 설치해야 한다. HttpBackend 모듈을 사용하기 위해서는 i18next 라이브러리의 use() 메소드를 사용하여 등록해야 하고 이후 i18next 라이브러리의 init() 메소드에서 HttpBackend 모듈을 사용하도록 설정하면, HttpBackend 모듈이 서버에서 번역 파일을 가져와서 i18next 라이브러리에서 사용할 수 있게 된다.

 

- 2. fallbackLng: false
: 지원하지 않는 언어 또는 키가 사용되었을 때 fallback 언어로 사용할 언어를 설정하지 않는다.

지원하지 않는 언어나 키가 사용되었을 때 i18next는 해당 값을 반환하지 않고, 에러를 발생시키게 된다.

 

이렇게 fallback 언어를 설정하지 않은 경우, 해당 언어가 지원되지 않는다는 에러 메시지를 사용자에게 보여주거나, 언어 선택 기능을 제공하여 사용자가 지원되는 언어를 선택할 수 있도록 구현해야한다.

 

- 3. fallbackLng, fallbackNS, ns는 모두 네임스페이스(namespace)에 관련된 옵션

네임스페이스는 서로 다른 기능을 수행하는 애플리케이션 요소들을 분리하여 관리하는 방법이다. 각각의 요소마다 고유한 이름 공간(namespace)을 지정함으로써 충돌을 방지하고, 관련된 리소스들을 모아서 사용하기 용이하게 한다.

 

fallbackLng은 지원하지 않는 언어나 키가 사용될 경우에 대처하는 방법을 설정하는 옵션이다. fallbackLng에 설정한 언어로 대체해서 사용자에게 제공한다.

 

fallbackNS는 fallbackLng와 비슷한 역할을 수행하지만, fallback 언어가 아니라 fallback 네임스페이스를 설정한다. fallbackNS를 사용하여 해당 네임스페이스에 대한 번역이 없을 때 다른 네임스페이스에서 해당 키를 찾아 대체할 수 있다.

 

ns는 i18n에서 사용할 네임스페이스를 설정한다. 여러 개의 네임스페이스를 설정할 수 있으며, 설정한 모든 네임스페이스의 키와 값들이 번역 대상이 된다. 네임스페이스는 기능 또는 컴포넌트 단위로 나누어 설정하면 좋다. 이렇게 나누어 놓으면 해당 기능이나 컴포넌트를 사용하는 곳에서 번역이 필요한 키만 가져와서 사용할 수 있기 때문에 번역 파일이 불필요하게 커지는 것을 방지할 수 있다.

 

- 4. 네임스페이스

네임스페이스는 번역 파일의 구조를 조직화하고, 번역 키를 그룹화하는 데 사용된다. 보통 프로젝트의 규모와 구조에 따라 네임스페이스를 어떻게 구성할지 결정하게 된다.

따라서, 네임스페이스 파일은 해당되는 컴포넌트 또는 모듈과 함께 위치시키는 것이 일반적이다. 예를 들어, myAssetSpot 네임스페이스는 myAssetSpot.js 또는 myAssetSpot.json 파일과 함께 위치시킬 수 있다. 이렇게 하면 해당 컴포넌트 또는 모듈에서 네임스페이스를 import하여 번역을 사용할 수 있다.

그러나, public 폴더는 보통 정적인 파일들을 위치시키는 곳이며, 번역 파일은 보통 동적인 데이터로 사용되기 때문에, public 폴더에 네임스페이스 파일을 위치시키는 것은 일반적으로 권장되지 않는다.