Intlayer 작동 방식

개요

Intlayer의 주요 아이디어는 컴포넌트별 콘텐츠 관리를 채택하는 것입니다. Intlayer의 아이디어는 코드베이스 어디에서나, 컴포넌트와 동일한 디렉토리에서 콘텐츠를 선언할 수 있도록 하는 것입니다.

.└── Components    └── MyComponent        ├── index.content.cjs        └── index.mjs

이를 위해 Intlayer의 역할은 프로젝트에 존재하는 다양한 형식의 콘텐츠 선언 파일을 모두 찾아내고, 이를 기반으로 사전(dictionary)을 생성하는 것입니다.

따라서 두 가지 주요 단계가 있습니다:

• 빌드 단계
• 해석 단계

사전 빌드 단계

빌드 단계는 세 가지 방법으로 수행할 수 있습니다:

• CLI를 사용하여 npx intlayer build 실행
• vscode 확장 사용
• vite-intlayer 패키지와 같은 앱 플러그인 사용 또는 Next.js용 플러그인 사용. 이러한 플러그인 중 하나를 사용하면 Intlayer는 애플리케이션을 시작(개발)하거나 빌드(프로덕션)할 때 자동으로 사전을 빌드합니다.

1. 콘텐츠 파일 선언

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

2. 사전(dictionary) 생성

   • 사전은 콘텐츠 파일에서 생성됩니다. 기본적으로 Intlayer 사전은 프로젝트의 .intlayer/dictionaries 디렉토리에 생성됩니다.
   • 이러한 사전은 모든 요구를 충족하고 애플리케이션 성능을 최적화하기 위해 다양한 형식으로 생성됩니다.

3. 사전 타입 생성

   사전(dictionary)을 기반으로 Intlayer는 애플리케이션에서 사용할 수 있는 타입을 생성합니다.

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

사전 해석 단계

Intlayer를 사용하면 useIntlayer 훅을 사용하여 애플리케이션에서 콘텐츠에 액세스할 수 있습니다.

const MyComponent = () => {  const content = useIntlayer("my-component");  return <div>{content.title}</div>;};

이 훅은 로케일 감지를 관리하고 현재 로케일에 대한 콘텐츠를 반환합니다. 이 훅을 사용하면 마크다운 해석, 복수형 관리 등을 수행할 수 있습니다.

Intlayer의 모든 기능을 보려면 사전 문서를 읽어보세요.

원격 콘텐츠

Intlayer를 사용하면 콘텐츠를 로컬에서 선언한 후 CMS로 내보내어 비기술 팀이 편집할 수 있도록 할 수 있습니다.

따라서 Git으로 코드를 관리하는 것과 유사한 방식으로 CMS에서 애플리케이션으로 콘텐츠를 푸시하고 가져올 수 있습니다.

프로젝트에 구성된 경우, Intlayer는 애플리케이션 시작(개발) / 빌드(프로덕션) 시 CMS에서 콘텐츠를 자동으로 가져옵니다.

시각적 편집기

Intlayer는 콘텐츠를 시각적으로 편집할 수 있는 시각적 편집기를 제공합니다. 이 시각적 편집기는 외부 intlayer-editor 패키지에서 사용할 수 있습니다.

애플리케이션 빌드 최적화

애플리케이션 번들 크기를 최적화하기 위해 Intlayer는 @intlayer/babel 및 @intlayer/swc 플러그인을 제공합니다.

개발 모드에서는 Intlayer가 사전을 중앙 집중식 정적 가져오기로 사용하여 개발 경험을 단순화합니다.

빌드를 최적화하면 Intlayer는 사전 호출을 최적화하여 청킹(chunking)을 수행합니다. 이렇게 하면 최종 번들은 사용된 사전만 가져옵니다.

설정에서 activateDynamicImport 옵션을 활성화하면 Intlayer는 동적 가져오기를 사용하여 사전을 로드합니다. 이 옵션은 애플리케이션 렌더링 시 비동기 처리를 방지하기 위해 기본적으로 비활성화되어 있습니다.

@intlayer/babel은 기본적으로 vite-intlayer 패키지에 포함되어 있으며,

@intlayer/swc는 Next.js에서 SWC 플러그인이 아직 실험적이므로 next-intlayer 패키지에 기본적으로 설치되어 있지 않습니다.

애플리케이션 빌드를 구성하는 방법을 보려면 설정 문서를 읽어보세요.

패키지

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

intlayer

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

react-intlayer

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

next-intlayer

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

vue-intlayer

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

svelte-intlayer (작업 중)

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

solid-intlayer (작업 중)

solid-intlayer 패키지는 Intlayer 사전을 해석하여 Solid.js 애플리케이션에서 사용할 수 있도록 합니다.

preact-intlayer

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

angular-intlayer (작업 중)

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

express-intlayer

express-intlayer 패키지는 Express.js 백엔드에서 Intlayer를 사용할 수 있도록 합니다.

react-native-intlayer

react-native-intlayer 패키지는 Metro 번들러와 함께 작동하도록 Intlayer 플러그인을 통합하는 도구를 제공합니다.

lynx-intlayer

lynx-intlayer 패키지는 Lynx 번들러와 함께 작동하도록 Intlayer 플러그인을 통합하는 도구를 제공합니다.

vite-intlayer

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

react-scripts-intlayer

intlayer-editor

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

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

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

intlayer-cli

intlayer-cli 패키지는 npx intlayer dictionaries 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/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry

@intlayer/dictionaries-entry, @intlayer/unmerged-dictionaries-entry 및 @intlayer/dynamic-dictionaries-entry 패키지는 Intlayer 사전의 엔트리 경로를 반환합니다. 브라우저에서 파일 시스템을 검색하는 것이 불가능하기 때문에 Webpack 또는 Rollup과 같은 번들러를 사용하여 사전의 엔트리 경로를 검색할 수 없습니다. 이러한 패키지는 별칭으로 설계되어 Vite, Webpack, Turbopack과 같은 다양한 번들러에서 번들 최적화를 가능하게 합니다.

@intlayer/chokidar

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

@intlayer/editor

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

@intlayer/editor-react

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

@intlayer/babel

@intlayer/babel 패키지는 Vite 및 Webpack 기반 애플리케이션의 사전 번들링을 최적화하는 도구를 제공합니다.

@intlayer/swc (WIP)

@intlayer/swc 패키지는 Next.js 애플리케이션의 사전 번들링을 최적화하는 도구를 제공합니다.

@intlayer/api

@intlayer/api 패키지는 백엔드와 상호작용하기 위한 API SDK입니다.

@intlayer/design-system

@intlayer/design-system 패키지는 CMS와 시각적 편집기 간의 디자인 요소를 공유하는 데 사용됩니다.

@intlayer/backend

@intlayer/backend 패키지는 백엔드 유형을 내보내며, 향후 독립형 패키지로 백엔드를 제공할 예정입니다.

스마트 문서와 채팅하기

• 스마트 문서에 질문하기