Discussing the DataHub UI and internationalization features

ui
1

Original Slack Thread

<@U06TM7M40RK> UI의 라벨이 모두 영문으로 되어 있는데, 다국어를 지원할려면 어떻게 해야 되나?

2

DataHub의 UI는 현재 영어만 지원하고 있으며, 다국어 지원을 위한 공식적인 기능은 아직 제공되지 않습니다. 다국어 지원을 위해서는 커스터마이징이 필요합니다. 다음은 다국어 지원을 구현하기 위한 몇 가지 단계입니다:

  1. 프론트엔드 커스터마이징:

    • DataHub의 프론트엔드를 로컬에서 빌드하고, 다국어 지원을 위한 번역 파일을 추가해야 합니다.
    • DataHub 프론트엔드의 Docker 이미지를 빌드하는 방법에 대한 가이드는 <https://datahubproject.io/docs/docker/development|DataHub Docker Development> 문서에서 확인할 수 있습니다.

  2. 번역 파일 추가:

    • 번역 파일을 추가하여 각 언어에 대한 라벨을 정의합니다. 예를 들어, i18n 폴더를 생성하고, en.json, de.json, zh.json 등의 파일을 추가합니다.
    • 각 파일에는 해당 언어로 번역된 라벨을 포함합니다.

  3. 국제화 라이브러리 사용:

    • React 기반의 프론트엔드에서 국제화(i18n)를 지원하는 라이브러리(예: react-i18next)를 사용하여 다국어 지원을 구현합니다.
    • react-i18next를 사용하여 번역 파일을 로드하고, 컴포넌트에서 번역된 라벨을 사용할 수 있습니다.

  4. 언어 선택 기능 추가:

    • 사용자 인터페이스에 언어 선택 기능을 추가하여 사용자가 원하는 언어를 선택할 수 있도록 합니다.
    • 선택된 언어에 따라 번역 파일을 로드하고, UI 라벨을 업데이트합니다.

  5. 백엔드 설정:

    • 백엔드에서 다국어 지원을 위해 필요한 설정을 추가합니다. 예를 들어, 다국어로 된 메타데이터를 저장하고 검색할 수 있도록 데이터베이스 스키마를 확장합니다.

다음은 react-i18next를 사용하여 다국어 지원을 구현하는 예시 코드입니다:

import React from 'react';
import { useTranslation } from 'react-i18next';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 번역 파일 로드
const resources = {
  en: {
    translation: {
      "welcome": "Welcome",
      "description": "This is a description"
    }
  },
  de: {
    translation: {
      "welcome": "Willkommen",
      "description": "Dies ist eine Beschreibung"
    }
  },
  zh: {
    translation: {
      "welcome": "欢迎",
      "description": "这是一个描述"
    }
  }
};

// i18n 초기화
i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "en", // 기본 언어 설정
    interpolation: {
      escapeValue: false
    }
  });

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => i18n.changeLanguage('de')}>Deutsch</button>
      <button onClick={() => i18n.changeLanguage('zh')}>中文</button>
    </div>
  );
}

export default App;

이 코드는 react-i18next를 사용하여 다국어 지원을 구현하는 예시입니다. 버튼을 클릭하여 언어를 변경할 수 있습니다.

더 자세한 정보가 필요하신가요?

Sources:

Sources: