Discussing Multi-language Localization for DataHub and DataHub Web-React

ingestion
1

Original Slack Thread

<@U06TM7M40RK> 다국어지원을 위한 가이드라인이나 프레임워크를 제공하나?

2

DataHub는 현재 영어만 지원하며, 다국어 지원을 위한 공식적인 기능이나 가이드라인은 제공되지 않습니다. 다국어 지원을 위해서는 커스터마이징이 필요합니다. 다국어 지원을 구현하기 위한 몇 가지 단계는 다음과 같습니다:

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

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

Sources:

3

<@U06TM7M40RK> datahub-web-react 프로젝트에서 어디를 추가하거나 고쳐야 다국어지원이 되는 건지 알려줘.

4

DataHub의 datahub-web-react 프로젝트에서 다국어 지원을 구현하기 위해 수정해야 할 주요 부분은 다음과 같습니다:

  1. 번역 파일 추가:

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

  2. 국제화 라이브러리 설정:

    • react-i18next와 같은 국제화(i18n) 라이브러리를 설치하고 설정합니다. i18next 설정 파일을 생성하여 번역 파일을 로드하고, 기본 언어를 설정합니다.

  3. 컴포넌트 수정:

    • 각 React 컴포넌트에서 useTranslation 훅을 사용하여 번역된 라벨을 가져옵니다. 기존의 하드코딩된 텍스트를 t('key') 형식으로 변경하여 번역된 텍스트를 사용합니다.

  4. 언어 선택 기능 추가:

    • 사용자 인터페이스에 언어 선택 드롭다운 또는 버튼을 추가하여 사용자가 원하는 언어를 선택할 수 있도록 합니다. 선택된 언어에 따라 i18next의 changeLanguage 메서드를 호출하여 언어를 변경합니다.

  5. 환경 설정:

    • .env 파일이나 환경 설정 파일에서 기본 언어 및 지원 언어 목록을 설정할 수 있습니다.

다음은 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:

5

<@U06TM7M40RK> 현재는 english json파일도 없다는 거지?

6

네, 현재 DataHub의 datahub-web-react 프로젝트에는 영어를 포함한 다른 언어의 번역 파일이 기본적으로 제공되지 않습니다. 다국어 지원을 위해서는 직접 번역 파일을 생성하고, 필요한 번역 내용을 추가해야 합니다.

번역 파일을 생성하는 방법은 다음과 같습니다:

  1. src 디렉토리 내에 i18n 폴더를 생성합니다.
  2. i18n 폴더 내에 en.json 파일을 생성하고, 영어로 번역된 라벨을 정의합니다. 예를 들어:
    {
  "welcome": "Welcome",
  "description": "This is a description"
}
  3. 다른 언어에 대한 번역 파일도 같은 방식으로 생성합니다. 예를 들어, de.json 파일을 생성하여 독일어 번역을 추가할 수 있습니다.

이렇게 번역 파일을 생성한 후, react-i18next와 같은 라이브러리를 사용하여 번역 파일을 로드하고, 컴포넌트에서 번역된 라벨을 사용할 수 있습니다.

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

Sources:

7

Hi :slight_smile: ! Did this interaction resolve your issue or do you still require assistance ?

Please tag @ RunLLM if you still need further assistance !

Or tag @Datahub Community Support if you require a person to take a look :slight_smile:

Hope this helps ! ><