Intlayer 작동 방식

    개요

    Intlayer의 역할은 JavaScript 콘텐츠 선언 파일을 사전으로 해석하는 것입니다.

    이를 위해 Intlayer는 여러 단계를 거칩니다:

    1. 콘텐츠 파일 선언

      • 콘텐츠 파일은 TypeScript, ECMAScript, CommonJS 또는 JSON과 같은 다양한 형식으로 정의될 수 있습니다.
      • 콘텐츠 파일은 프로젝트 어디에서나 정의될 수 있어 유지보수성과 확장성이 향상됩니다. 콘텐츠 파일의 파일 확장자 규칙을 준수하는 것이 중요합니다. 이 확장자는 기본적으로 *.content.{js|cjs|mjs|ts|tsx|json}이지만, 설정 파일에서 수정할 수 있습니다.

    2. 사전 생성

      • 사전은 콘텐츠 파일에서 생성됩니다. 기본적으로 intlayer 사전은 프로젝트의 .intlayer/dictionary 디렉토리에 생성됩니다.
      • 두 가지 유형의 사전이 생성될 수 있습니다: intlayer 사전과 i18n 사전(베타).

    3. 사전 타입 생성

      • 사전 타입은 intlayer 사전에서 생성됩니다. 기본적으로 intlayer 사전 타입은 프로젝트의 types 디렉토리에 생성됩니다.

    4. Intlayer 모듈 확장 생성

      • Intlayer 모듈 확장은 Intlayer에 추가 타입을 정의할 수 있는 TypeScript 기능입니다. 이는 사용 가능한 인수나 필수 인수를 제안하여 개발 경험을 향상시킵니다. 생성된 타입 중 intlayer 사전 타입 또는 언어 구성 타입이 types/intlayer.d.ts 파일에 추가되고 다른 패키지에서 사용됩니다. 이를 위해 tsconfig.json 파일이 프로젝트의 types 디렉토리를 포함하도록 구성되어야 합니다.

    5. 콘텐츠 파일 모니터링

      • 콘텐츠 파일은 수정될 때마다 다시 생성되도록 모니터링됩니다.

    6. 사전 해석

      • 사전은 최종적으로 애플리케이션에서 사용되도록 해석됩니다.

    패키지

    Intlayer는 번역 프로세스에서 특정 역할을 하는 여러 패키지로 구성됩니다. 다음은 이 패키지의 구조를 나타내는 그래픽 표현입니다:

    intlayer 패키지

    intlayer

    intlayer 패키지는 콘텐츠 파일에서 콘텐츠를 선언하는 데 사용됩니다.

    react-intlayer

    react-intlayer 패키지는 intlayer 사전을 해석하고 React 애플리케이션에서 사용할 수 있도록 합니다.

    next-intlayer

    next-intlayer 패키지는 react-intlayer 위에 레이어로 작동하여 Next.js 애플리케이션에서 intlayer 사전을 사용할 수 있도록 합니다. 이 패키지는 번역 미들웨어, 라우팅 또는 next.config.js 파일 구성과 같은 Next.js 환경에서 Intlayer가 작동하도록 하는 필수 기능을 통합합니다.

    vite-intlayer

    Vite 번들러와 Intlayer를 통합하기 위한 Vite 플러그인을 포함하며, 사용자의 선호 로케일을 감지하고, 쿠키를 관리하며, URL 리디렉션을 처리하는 미들웨어를 포함합니다.

    react-scripts-intlayer

    react-scripts-intlayer 명령어와 플러그인을 포함하여 Create React App 기반 애플리케이션과 Intlayer를 통합합니다. 이 플러그인은 craco를 기반으로 하며 Webpack 번들러에 대한 추가 구성을 포함합니다.

    intlayer-editor

    intlayer-editor 패키지는 시각적 편집기를 사용할 수 있도록 합니다. 이 패키지는 선택 사항으로 애플리케이션에 설치될 수 있으며 react-intlayer 패키지에서 사용됩니다. 이 패키지는 서버와 클라이언트 두 부분으로 구성됩니다.

    클라이언트는 react-intlayer에서 사용될 UI 요소를 포함합니다.

    서버는 Express를 기반으로 하여 편집기 시각적 요청을 수신하고 콘텐츠 파일을 관리하거나 수정합니다.

    intlayer-cli

    intlayer-cli 패키지는 npx intlayer build 명령어를 사용하여 사전을 생성하는 데 사용할 수 있습니다. intlayer가 이미 설치된 경우 CLI는 자동으로 설치되며 이 패키지는 필요하지 않습니다.

    @intlayer/core

    @intlayer/core 패키지는 주요 Intlayer 패키지입니다. 번역 및 사전 관리 기능을 포함합니다. @intlayer/core는 다중 플랫폼으로, 다른 패키지에서 사전 해석을 수행하는 데 사용됩니다.

    @intlayer/config

    @intlayer/config 패키지는 사용 가능한 언어, Next.js 미들웨어 매개변수 또는 통합 편집기 설정과 같은 Intlayer 설정을 구성하는 데 사용됩니다.

    @intlayer/webpack

    @intlayer/webpack 패키지는 Webpack 기반 애플리케이션에서 Intlayer를 작동시키기 위한 Webpack 구성을 제공합니다. 이 패키지는 기존 Webpack 애플리케이션에 추가할 플러그인도 제공합니다.

    @intlayer/cli

    @intlayer/cli 패키지는 Intlayer 명령줄 인터페이스와 관련된 스크립트를 선언하는 데 사용되는 NPM 패키지입니다. 모든 Intlayer CLI 명령어의 일관성을 보장합니다. 이 패키지는 특히 intlayer-cli 및 intlayer 패키지에서 사용됩니다.

    @intlayer/dictionaries-entry

    @intlayer/dictionaries-entry 패키지는 intlayer 사전의 진입 경로만 반환하는 패키지입니다. 브라우저에서 파일 시스템 검색이 불가능하기 때문에 Webpack 또는 Rollup과 같은 번들러를 사용하여 사전의 진입 경로를 검색하는 것이 불가능합니다. 이 패키지는 별칭으로 사용됩니다.

    @intlayer/chokidar

    @intlayer/chokidar 패키지는 콘텐츠 파일을 모니터링하고 각 수정 시 수정된 사전을 다시 생성하는 데 사용됩니다.

    @intlayer/editor

    @intlayer/editor 패키지는 사전 편집기와 관련된 유틸리티를 제공합니다. 특히 Intlayer 편집기와 애플리케이션을 인터페이스하기 위한 API와 사전을 조작하기 위한 유틸리티를 포함합니다. 이 패키지는 다중 플랫폼입니다.

    @intlayer/editor-react

    @intlayer/editor-react 패키지는 React 애플리케이션과 Intlayer 편집기를 인터페이스하기 위한 상태, 컨텍스트, 훅 및 컴포넌트를 제공합니다.

    스마트 문서와 대화하기

    이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.

    문서에 대한 GitHub 링크
    로드맵설정