Intlayer로 Lynx and React mobile app 번역하기 | 국제화(i18n)

애플리케이션 템플릿을 GitHub에서 확인하세요.

대안보다 Intlayer를 선택해야 하는 이유는 무엇입니까?

'react-native-localize' 또는 'i18next'와 같은 주요 솔루션과 비교할 때 Intlayer는 다음과 같은 통합 최적화가 제공되는 솔루션입니다.

1. 1

   의존성 설치

   Lynx 프로젝트에서 다음 패키지를 설치하세요:

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   npx intlayer init --interactive
   

   --interactive 플래그는 선택사항입니다. AI 에이전트인 경우 intlayer-cli init을 사용하세요.

   이 명령은 당신의 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   npm install intlayer react-intlayer lynx-intlayer
   

   패키지

   • intlayer
     설정, 사전 콘텐츠, 타입 생성 및 CLI 명령을 위한 핵심 i18n 도구 모음입니다.

   • react-intlayer
     Lynx에서 로케일을 얻고 전환하기 위해 사용할 컨텍스트 제공자와 React 훅을 제공하는 React 통합입니다.

   • lynx-intlayer
     Intlayer를 Lynx bundler와 통합하기 위한 플러그인을 제공하는 Lynx 통합입니다.

   ---

2. 2

   Intlayer 설정 파일 생성

   프로젝트 루트(또는 편한 위치)에 Intlayer 설정 파일을 생성합니다. 다음과 같이 보일 수 있습니다:

   intlayer.config.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // ... 필요한 다른 로케일을 추가합니다
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;
   

   이 설정 내에서 다음을 수행할 수 있습니다:

   • 지원하는 로케일 목록을 구성합니다.
   • 기본 로케일을 설정합니다.
   • 나중에 더 고급 옵션을 추가할 수 있습니다(예: 로그, 사용자 정의 콘텐츠 디렉터리 등).
   • Intlayer 설정 문서를 참조하세요.
3. 3

   Intlayer 플러그인을 Lynx bundler에 추가

   Intlayer를 Lynx와 함께 사용하려면 lynx.config.ts 파일에 플러그인을 추가해야 합니다:

   lynx.config.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { defineConfig } from "@lynx-js/rspeedy";
   import { pluginIntlayerLynx } from "lynx-intlayer/plugin";
   
   export default defineConfig({
     plugins: [
       // ... 다른 플러그인
       pluginIntlayerLynx(),
     ],
   });
   

4. 4

   Intlayer 제공자 추가

   애플리케이션 전체에서 사용자 언어를 동기화된 상태로 유지하려면 react-intlayer의 IntlayerProvider 컴포넌트로 루트 컴포넌트를 감싸야 합니다.

   또한 Intlayer가 제대로 작동하도록 보장하기 위해 intlayerPolyfill 함수 파일을 추가해야 합니다.

   src/index.tsx

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { root } from "@lynx-js/react";
   
   import { App } from "./App.js";
   import { IntlayerProvider } from "react-intlayer";
   import { intlayerPolyfill } from "lynx-intlayer";
   
   intlayerPolyfill();
   
   root.render(
     <IntlayerProvider>
       <App />
     </IntlayerProvider>
   );
   
   if (import.meta.webpackHot) {
     import.meta.webpackHot.accept();
   }
   

5. 5

   콘텐츠 선언

   프로젝트의 어느 곳이든(일반적으로 src/ 내) Intlayer가 지원하는 모든 확장명 형식을 사용하여 콘텐츠 선언 파일을 생성합니다:

   • .content.json
   • .content.jsonc
   • .content.json5
   • .content.ts
   • .content.tsx
   • .content.js
   • .content.jsx
   • .content.mjs
   • .content.mjx
   • .content.cjs
   • .content.md
   • .content.mdx
   • .content.yaml
   • .content.yml
   • 등등.

   예시:

   src/app.content.ts

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { t, type Dictionary } from "intlayer";
   
   const appContent = {
     key: "app",
     content: {
       title: "React",
       subtitle: t({
         ko: "Lynx에서",
         en: "on Lynx",
         fr: "sur Lynx",
         es: "en Lynx",
       }),
       description: t({
         ko: "로고를 탭하고 즐겨보세요!",
         en: "Tap the logo and have fun!",
         fr: "Appuyez sur le logo et amusez-vous!",
         es: "¡Toca el logo y diviértete!",
       }),
       hint: [
         t({
           ko: "편집",
           en: "Edit",
           fr: "Modifier",
           es: "Editar",
         }),
         " src/App.tsx ",
         t({
           ko: "업데이트를 보려면!",
           en: "to see updates!",
           fr: "pour voir les mises à jour!",
           es: "para ver actualizaciones!",
         }),
       ],
     },
   } satisfies Dictionary;
   
   export default appContent;
   

   콘텐츠 선언에 대한 자세한 내용은 Intlayer 콘텐츠 문서를 참조하세요.

   ---

6. 6

   컴포넌트에서 Intlayer 사용

   자식 컴포넌트에서 useIntlayer 훅을 사용하여 지역화된 콘텐츠를 얻습니다.

   src/App.tsx

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { useCallback, useState } from "@lynx-js/react";
   import { useIntlayer } from "react-intlayer";
   
   import "./App.css";
   import arrow from "./assets/arrow.png";
   import lynxLogo from "./assets/lynx-logo.png";
   import reactLynxLogo from "./assets/react-logo.png";
   import { LocaleSwitcher } from "./components/LocaleSwitcher.jsx";
   
   export const App = () => {
     const [alterLogo, setAlterLogo] = useState(false);
     const { title, subtitle, description, hint } = useIntlayer("app");
   
     const onTap = useCallback(() => {
       "background only";
       setAlterLogo(!alterLogo);
     }, [alterLogo]);
   
     return (
       <view>
         <view className="Background" />
         <view className="App">
           <view className="Banner">
             <view className="Logo" bindtap={onTap}>
               {alterLogo ? (
                 <image src={reactLynxLogo} className="Logo--react" />
               ) : (
                 <image src={lynxLogo} className="Logo--lynx" />
               )}
             </view>
             <text className="Title">{title}</text>
             <text className="Subtitle">{subtitle}</text>
           </view>
           <view className="Content">
             <image src={arrow} className="Arrow" />
             <text className="Description">{description}</text>
             <text className="Hint">
               {hint[0]}
               <text style={{ fontStyle: "italic" }}>{hint[1]}</text>
               {hint[2]}
             </text>
           </view>
           <LocaleSwitcher />
           <view style={{ flex: 1 }}></view>
         </view>
       </view>
     );
   };
   

   문자열 기반 props(예: 버튼의 title 또는 Text 컴포넌트의 children)에서 content.someKey를 사용할 때는 실제 문자열을 얻기 위해 content.someKey.value를 호출합니다.

   ---

7. 7

   앱 로케일 변경

   선택사항

   컴포넌트 내에서 로케일을 전환하려면 useLocale 훅의 setLocale 메서드를 사용할 수 있습니다:

   src/components/LocaleSwitcher.tsx

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   import { type FC } from "react";
   import { getLocaleName } from "intlayer";
   import { useLocale } from "react-intlayer";
   
   export const LocaleSwitcher: FC = () => {
     const { setLocale, availableLocales, locale } = useLocale();
   
     return (
       <view
         style={{
           display: "flex",
           flexDirection: "row",
           justifyContent: "center",
           alignItems: "center",
           gap: 10,
         }}
       >
         {availableLocales.map((localeEl) => (
           <text
             key={localeEl}
             style={{
               color: localeEl === locale ? "#fff" : "#888",
               fontSize: "12px",
             }}
             bindtap={() => setLocale(localeEl)}
           >
             {getLocaleName(localeEl)}
           </text>
         ))}
       </view>
     );
   };
   

   이것은 Intlayer 콘텐츠를 사용하는 모든 컴포넌트의 다시 렌더링을 트리거하며, 이제 새로운 로케일에 대한 번역을 표시합니다.

   자세한 내용은 useLocale 문서를 참조하세요.

TypeScript 구성 (TypeScript를 사용하는 경우)

Intlayer는 자동 완성 기능을 개선하고 번역 오류를 감지하기 위해 숨겨진 폴더(기본적으로 .intlayer)에 타입 정의를 생성합니다:

// tsconfig.json
{
  // ... 기존 TS 구성
  "include": [
    "src", // 소스 코드
    ".intlayer/types/**/*.ts", // <-- 자동 생성된 타입 포함
    // ... 이미 포함된 다른 항목
  ],
}

이로 인해 다음과 같은 기능이 가능합니다:

• 사전 키에 대한 자동 완성.
• 타입 검사를 통해 존재하지 않는 키에 접근하거나 타입이 일치하지 않을 경우 경고.

Git 구성

Intlayer에 의해 자동 생성된 파일을 커밋하지 않으려면 .gitignore에 다음을 추가하세요:

#  Intlayer가 생성한 파일 무시
.intlayer

VS Code 확장

Intlayer와 함께 개발 경험을 향상시키려면 공식 Intlayer VS Code 확장을 설치할 수 있습니다.

VS Code 마켓플레이스에서 설치하기

이 확장은 다음 기능을 제공합니다:

• 자동완성 번역 키용.
• 실시간 오류 감지 누락된 번역용.
• 인라인 미리보기 번역된 콘텐츠용.

• 빠른 작업 번역을 쉽게 생성하고 업데이트하기 위해.

• 번역 키에 대한 자동 완성.
• 누락된 번역에 대한 실시간 오류 감지.
• 번역된 콘텐츠의 인라인 미리보기.
• 번역을 쉽게 생성하고 업데이트할 수 있는 빠른 작업. 확장 프로그램 사용 방법에 대한 자세한 내용은 Intlayer VS Code 확장 문서를 참조하세요.

더 알아보기

• 시각적 편집기: Intlayer 시각적 편집기를 사용하여 번역을 시각적으로 관리하세요.
• CMS 통합: 사전 콘텐츠를 외부화하고 CMS에서 가져올 수도 있습니다.
• CLI 명령어: 번역 추출 또는 누락된 키 확인과 같은 작업을 위한 Intlayer CLI를 탐색하세요.