애플리케이션 콘텐츠의 범위를 지정하면 대규모 애플리케이션의 유지 관리가 용이해집니다. 전체 콘텐츠 코드베이스를 검토해야 하는 정신적 부담 없이 단일 기능 폴더를 복제하거나 삭제할 수 있습니다. 또한 Intlayer는 완전히 유형되어 콘텐츠의 정확성을 보장합니다.

콘텐츠를 같은 위치에 배치하면 LLM(대형 언어 모델)에 필요한 컨텍스트가 줄어듭니다. Intlayer에는 누락된 번역을 테스트하기 위한 CLI, LSP, MCP 및 agent)와 같은 도구 모음도 함께 제공됩니다. 기술, AI 에이전트를 위한 개발자 경험(DX)을 더욱 원활하게 만듭니다.

AI 공급자의 비용으로 선택한 LLM을 사용하여 CI/CD 파이프라인을 번역하려면 자동화를 사용하세요. Intlayer는 또한 콘텐츠 추출을 자동화하는 컴파일러와 백그라운드에서 번역을 돕는 웹 플랫폼을 제공합니다.

대규모 JSON 파일을 구성 요소에 연결하면 성능 및 반응성 문제가 발생할 수 있습니다. Intlayer는 빌드 시 콘텐츠 로딩을 최적화합니다.

Intlayer는 단순한 i18n 솔루션 그 이상으로 관리에 도움이 되는 자체 호스팅 비주얼 편집기 및 전체 CMS를 제공합니다. 다국어 콘텐츠를 실시간으로 제공하여 번역가, 카피라이터, 기타 팀원과 원활하게 협업할 수 있습니다. 콘텐츠는 로컬 및/또는 원격으로 저장될 수 있습니다.

패키지

intlayer
설정, 사전 콘텐츠, 타입 생성 및 CLI 명령을 위한 핵심 i18n 도구 모음입니다.
react-intlayer
Lynx에서 로케일을 얻고 전환하기 위해 사용할 컨텍스트 제공자와 React 훅을 제공하는 React 통합입니다.
lynx-intlayer
Intlayer를 Lynx bundler와 통합하기 위한 플러그인을 제공하는 Lynx 통합입니다.

</Step>

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 설정 문서를 참조하세요.

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(),  ],});

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

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();}

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();}

콘텐츠 선언

프로젝트의 어느 곳이든(일반적으로 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 콘텐츠 문서를 참조하세요.

컴포넌트에서 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>  );};

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를 호출합니다.

앱 로케일 변경

선택사항

컴포넌트 내에서 로케일을 전환하려면 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>  );};

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 문서를 참조하세요.

</Steps>

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

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

json5

코드 복사

코드를 클립보드에 복사

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

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

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

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

Git 구성

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

bash

코드 복사

코드를 클립보드에 복사

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

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

VS Code 확장

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

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

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

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

더 알아보기

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

Adonis

JSON