왜 Intlayer를 고려해야 하나요?

Intlayer란 무엇인가요?

Intlayer는 자바스크립트 개발자를 위해 특별히 설계된 국제화 라이브러리입니다. 코드 어디에서나 콘텐츠를 선언할 수 있게 해줍니다. 다국어 콘텐츠 선언을 구조화된 사전으로 변환하여 코드에 쉽게 통합할 수 있습니다. TypeScript를 사용하여 Intlayer는 개발을 더욱 견고하고 효율적으로 만듭니다.

Intlayer는 왜 만들어졌나요?

Intlayer는 next-intl, react-i18next, react-intl, next-i18next, react-intl, vue-i18n과 같은 모든 일반적인 i18n 라이브러리에 영향을 미치는 공통 문제를 해결하기 위해 만들어졌습니다.

이 모든 솔루션은 콘텐츠를 나열하고 관리하기 위해 중앙 집중식 방식을 채택합니다. 예를 들어:

.├── locales│   ├── en.json│   ├── fr.json│   └── es.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

또는 네임스페이스를 사용하는 경우:

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

이러한 유형의 아키텍처는 개발 속도를 늦추고 코드베이스를 유지보수하기 더 복잡하게 만듭니다. 그 이유는 다음과 같습니다:

1. 새로운 컴포넌트를 생성할 때마다 해야 할 일:

   • locales 폴더에 새로운 리소스/네임스페이스를 생성해야 합니다.
   • 페이지에서 새로운 네임스페이스를 임포트하는 것을 잊지 말아야 합니다.
   • 콘텐츠를 번역해야 합니다 (종종 AI 제공자로부터 복사/붙여넣기로 수동으로 수행됨).

2. 컴포넌트에 변경 사항이 있을 때마다 해야 할 일:

   • 관련 리소스/네임스페이스를 찾아야 합니다 (컴포넌트와 멀리 떨어져 있음).
   • 콘텐츠를 번역해야 합니다.
   • 모든 로케일에 대해 콘텐츠가 최신 상태인지 확인해야 합니다.
   • 네임스페이스에 사용하지 않는 키/값이 포함되어 있지 않은지 검증해야 합니다.
   • 모든 로케일에 대해 JSON 파일의 구조가 동일한지 확인해야 합니다.

이러한 솔루션을 사용하는 전문 프로젝트에서는 콘텐츠 번역 관리를 돕기 위해 로컬라이제이션 플랫폼을 자주 사용합니다. 하지만 대규모 프로젝트에서는 비용이 빠르게 증가할 수 있습니다.

이 문제를 해결하기 위해 Intlayer는 콘텐츠를 컴포넌트별로 범위를 지정하고, CSS(styled-components), 타입, 문서(storybook), 단위 테스트(jest)와 같이 컴포넌트 가까이에 콘텐츠를 유지하는 방식을 채택합니다.

.└── components    └── MyComponent        ├── index.content.tsx        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

import { t, type Dictionary } from "intlayer";const componentExampleContent = {  key: "component-example",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;

import { useIntlayer } from "react-intlayer";export const ComponentExample = () => {  const { myTranslatedContent } = useIntlayer("component-example");  return <span>{myTranslatedContent}</span>;};

이 접근 방식은 다음을 가능하게 합니다:

1. 개발 속도 향상

   • .content.{{ts|mjs|cjs|json}} 파일은 VSCode 확장 기능을 사용하여 생성할 수 있습니다.
   • IDE 내 자동완성 AI 도구(예: GitHub Copilot)가 콘텐츠 선언을 도와 복사/붙여넣기 작업을 줄여줍니다.

2. 코드베이스 정리

   • 복잡성 감소
   • 유지보수성 향상

3. 컴포넌트와 관련 콘텐츠를 더 쉽게 복제하기 (예: 로그인/회원가입 컴포넌트 등)

   • 다른 컴포넌트의 콘텐츠에 영향을 미칠 위험을 제한하여
   • 외부 의존성 없이 한 애플리케이션에서 다른 애플리케이션으로 콘텐츠를 복사/붙여넣기 가능

4. 사용하지 않는 컴포넌트의 키/값으로 코드베이스를 오염시키지 않음

   • 컴포넌트를 사용하지 않으면 Intlayer는 관련 콘텐츠를 가져오지 않습니다.
   • 컴포넌트를 삭제하면 관련 콘텐츠가 동일한 폴더에 존재하기 때문에 관련 콘텐츠를 더 쉽게 제거할 수 있습니다.

5. AI 에이전트가 다국어 콘텐츠를 선언하는 데 드는 추론 비용 감소

   • AI 에이전트가 콘텐츠를 구현할 위치를 알기 위해 전체 코드베이스를 스캔할 필요가 없습니다.
   • IDE 내 자동완성 AI 도구(예: GitHub Copilot)를 통해 번역 작업을 쉽게 수행할 수 있습니다.

Intlayer의 추가 기능

기능	설명
	크로스 프레임워크 지원 Intlayer는 Next.js, React, Vite, Vue.js, Nuxt, Preact, Express 등 주요 프레임워크와 라이브러리를 모두 지원합니다.
	자바스크립트 기반 콘텐츠 관리 자바스크립트의 유연성을 활용하여 콘텐츠를 효율적으로 정의하고 관리하세요. - 콘텐츠 선언
	로케일별 콘텐츠 선언 파일 자동 생성 전에 콘텐츠를 한 번 선언하여 개발 속도를 높이세요. - 로케일별 콘텐츠 선언 파일
	타입 안전 환경 TypeScript를 활용하여 콘텐츠 정의와 코드에 오류가 없도록 보장하고, IDE 자동 완성 기능도 함께 누리세요. - TypeScript 설정
	간소화된 설정 최소한의 구성으로 빠르게 시작하세요. 국제화, 라우팅, AI, 빌드 및 콘텐츠 처리 설정을 손쉽게 조정할 수 있습니다. - Next.js 통합 탐색
	간소화된 콘텐츠 조회 각 콘텐츠마다 t 함수를 호출할 필요가 없습니다. 단일 훅을 사용하여 모든 콘텐츠를 직접 조회하세요. - React 통합
	일관된 서버 컴포넌트 구현 Next.js 서버 컴포넌트에 완벽하게 적합하며, 클라이언트와 서버 컴포넌트 모두에 동일한 구현을 사용할 수 있습니다. 각 서버 컴포넌트마다 t 함수를 전달할 필요가 없습니다. - 서버 컴포넌트
	체계적인 코드베이스 코드베이스를 더 체계적으로 유지하세요: 1 컴포넌트 = 같은 폴더 내 1 사전. 각 컴포넌트에 가까운 번역은 유지보수성과 명확성을 향상시킵니다. - Intlayer 작동 방식
	향상된 라우팅 Next.js, React, Vite, Vue.js 등 복잡한 애플리케이션 구조에 원활하게 적응하는 앱 라우팅을 완벽하게 지원합니다. - Next.js 통합 탐색하기
	마크다운 지원 개인정보 처리방침, 문서 등 다국어 콘텐츠를 위해 로케일 파일과 원격 마크다운을 가져와 해석합니다. 마크다운 메타데이터를 해석하여 코드에서 접근할 수 있도록 합니다. - 콘텐츠 파일
	무료 비주얼 에디터 및 CMS 콘텐츠 작성자를 위해 무료 비주얼 에디터와 CMS가 제공되어 로컬라이제이션 플랫폼이 필요 없습니다. Git을 사용하여 콘텐츠를 동기화 상태로 유지하거나 CMS를 통해 콘텐츠를 완전히 또는 부분적으로 외부화할 수 있습니다. - Intlayer 에디터 - Intlayer CMS
	트리 쉐이커블 콘텐츠 최종 번들의 크기를 줄이는 트리 쉐이커블 콘텐츠입니다. 각 컴포넌트별로 콘텐츠를 로드하며, 사용하지 않는 콘텐츠는 번들에서 제외합니다. 앱 로딩 효율을 높이기 위해 지연 로딩도 지원합니다. - 앱 빌드 최적화
	정적 렌더링 정적 렌더링을 차단하지 않습니다. - Next.js 통합
	AI 기반 번역 Intlayer의 고급 AI 기반 번역 도구를 사용하여 자신의 AI 제공자/API 키로 단 한 번의 클릭만으로 웹사이트를 231개 언어로 변환하세요. - CI/CD 통합 - Intlayer CLI - 자동 채우기
	MCP 서버 통합 IDE 자동화를 위한 MCP(모델 컨텍스트 프로토콜) 서버를 제공하여 개발 환경 내에서 원활한 콘텐츠 관리 및 국제화(i18n) 워크플로우를 가능하게 합니다. - MCP 서버
	VSCode 확장 기능 Intlayer는 콘텐츠 및 번역 관리를 돕기 위해 VSCode 확장 기능을 제공합니다. 사전을 구축하고, 콘텐츠를 번역하는 등 다양한 작업을 지원합니다. - VSCode 확장 기능
	상호 운용성 react-i18next, next-i18next, next-intl, react-intl과의 상호 운용성을 지원합니다. - Intlayer와 react-intl - Intlayer와 next-intl - Intlayer와 next-i18next

Intlayer와 다른 솔루션 비교

문서 이력