React Native (Expo) - Lingo.dev CLI

Expo란 무엇인가요?

Expo는 React Native 애플리케이션을 만들기 위한 프레임워크이자 플랫폼입니다. 동일한 JavaScript 코드베이스에서 iOS, Android 및 웹 앱을 구축, 배포 및 반복할 수 있는 도구와 서비스를 제공합니다.

Lingo.dev CLI란 무엇인가요?

Lingo.dev는 AI 기반 번역 플랫폼입니다. Lingo.dev CLI는 소스 파일을 읽고, 번역 가능한 콘텐츠를 대규모 언어 모델로 전송한 다음, 번역된 파일을 프로젝트에 다시 작성합니다.

이 가이드에 대하여

이 가이드는 Expo를 사용하는 React Native 프로젝트에서 Lingo.dev CLI를 설정하는 방법을 설명합니다. Expo로 프로젝트를 구성하고, 번역 파이프라인을 구성하며, 결과를 확인하는 방법을 배우게 됩니다.

1단계. Expo 프로젝트 설정하기

새 Expo 앱 생성하기:
```
npx create-expo-app@latest my-app
```
프로젝트 디렉토리로 이동하기:
```
cd my-app
```

현지화 의존성 설치하기:

npx expo install expo-localization
npx expo install i18n-js

2단계. 소스 콘텐츠 생성하기

현지화 가능한 콘텐츠를 저장할 디렉토리 생성하기:
```
mkdir -p app/i18n
```

현지화 가능한 콘텐츠가 포함된 파일 생성하기(예: app/i18n/en.json):

{
  "home": {
    "title": "Welcome",
    "subtitle": "This text is translated by Lingo.dev"
  },
  "cta": "Get started"
}

3단계. CLI 구성하기

프로젝트 루트에 i18n.json 파일을 생성합니다:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": 1.8,
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "json": {
      "include": ["app/i18n/[locale].json"]
    }
  }
}

이 파일은 다음을 정의합니다:

Lingo.dev CLI가 번역해야 할 파일
번역할 언어 간의 관계

이 경우, 구성은 JSON 파일을 영어에서 스페인어로 번역합니다.

다음 사항에 주의하는 것이 중요합니다:

[locale]은 런타임에 대체되는 플레이스홀더입니다. 이를 통해 콘텐츠가 한 위치(예: app/i18n/en.json)에서 읽히고 다른 위치(예: app/i18n/es.json)에 쓰여지도록 합니다.
Lingo.dev CLI는 JSON, MDX 등 다양한 파일 형식을 지원합니다.

자세한 내용은 i18n.json 구성을 참조하세요.

4단계. 콘텐츠 번역하기

Lingo.dev 계정에 가입하세요.
CLI를 통해 Lingo.dev에 로그인하세요:
```
npx lingo.dev@latest login
```
번역 파이프라인을 실행하세요:
```
npx lingo.dev@latest run
```
CLI는 번역된 콘텐츠를 저장하기 위한 app/i18n/es.json 파일과 번역된 내용을 추적하기 위한 i18n.lock 파일(불필요한 재번역을 방지하기 위함)을 생성합니다.

5단계. 번역 사용하기

tsconfig.json 파일에서 JSON 가져오기를 활성화하세요:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

특정 로케일에 대한 번역된 콘텐츠를 로드하는 함수를 생성하세요:

// app/lib/i18n.ts
import { getLocales } from "expo-localization";
import { I18n } from "i18n-js";

import en from "../i18n/en.json";
import es from "../i18n/es.json";

const i18n = new I18n({ en, es });

i18n.defaultLocale = "en";
i18n.enableFallback = true;
i18n.locale = getLocales()[0]?.languageCode ?? "en";

export default i18n;

함수를 사용하여 번역된 콘텐츠를 표시하세요:

// App.tsx
import { useState } from "react";
import { View, Text, Pressable } from "react-native";
import i18n from "./app/lib/i18n";

export default function App() {
  const [locale, setLocale] = useState(i18n.locale);

  const toggleLocale = () => {
    const next = locale === "en" ? "es" : "en";
    i18n.locale = next;
    setLocale(next);
  };

  return (
    <View>
      <Text>{i18n.t("home.title")}</Text>
      <Text>{i18n.t("home.subtitle")}</Text>

      <Pressable onPress={toggleLocale}>
        <Text>
          {locale === "en" ? "Switch to Español" : "Cambiar a English"}
        </Text>
      </Pressable>
    </View>
  );
}

개발 서버를 시작하세요:
```
npx expo start
```
http://localhost:8081로 이동하세요.
사용 가능한 언어 간에 전환해보세요.