Lingo.dev 컴파일러
Lingo.dev 컴파일러는 컴포넌트를 수정하지 않고도 React 애플리케이션을 다국어로 만들어주는 무료 오픈소스 빌드 타임 번역 시스템입니다.
컴파일러의 실제 작동을 확인하려면 이 라이브 데모를 참조하세요: https://x.com/MaxPrilutskiy/status/1929946504216932746
간단한 예제
컴파일러 추가 전:
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
컴파일러 추가 후 (코드 변경 불필요):
// Same code - translations injected automatically at build time
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicación" in Spanish
작동 원리
컴파일러는 JSX에서 번역 가능한 텍스트를 자동으로 감지하고, AI 기반 번역을 생성하며, 빌드 타임에 이를 주입합니다. 소스 코드는 변경되지 않으며, 번역은 빌드 프로세스 중에 투명하게 이루어집니다.
핵심 원칙: 번역은 컴파일 타임에 결정되어 필요한 번역만 포함된 최적화된 번들을 생성합니다. 이는 더 빠른 로드 시간, 더 작은 번들 크기, 그리고 더 나은 SEO를 의미합니다.
차별점
런타임 번역 라이브러리(i18next, react-intl)와 달리 Lingo.dev 컴파일러는:
- 런타임이 아닌 빌드 타임에 작동합니다
- 수동 번역 키 관리가 필요하지 않습니다
- AI를 사용하여 번역을 자동으로 생성합니다
- 런타임 오버헤드가 전혀 없습니다
- React 코드를 깔끔하게 유지합니다—
t()함수 호출이 없습니다
주요 기능
- 기본적으로 자동 - "use i18n" 지시문이 필요하지 않습니다 (옵트인 동작을 원하는 경우 선택 사항)
- 런타임 오버헤드 제로 - 번역이 빌드에 미리 컴파일됩니다
- 빌드 모드 - 개발 환경에서는 의사 번역기를 사용하고, CI에서는 실제 번역을, 프로덕션에서는 캐시 전용을 사용합니다
- 타입 안전 - 자동 타입 생성을 통한 완전한 TypeScript 지원
- 수동 재정의 - 특정 번역에 대한 정밀한 제어를 위해
data-lingo-override속성을 사용합니다 - 커스텀 로케일 리졸버 - 자체 로케일 감지 및 지속성 로직을 구현합니다
- 자동 복수형 처리 - 복수형을 위한 ICU MessageFormat 지원
- 개발 위젯 - 실시간 편집을 위한 브라우저 내 번역 편집기
지원되는 프레임워크
- Next.js (React Server Components를 사용하는 App Router)
- Vite + React (SPA 및 SSR)
더 많은 프레임워크가 곧 추가될 예정입니다.
자주 묻는 질문
프로덕션 환경에서 API 키가 필요한가요?
아니요. 프로덕션에서는 buildMode: "cache-only"를 사용하세요. 번역은 CI에서 미리 생성되므로 API 호출이 필요하지 않습니다.
어떤 파일을 번역할지 제어할 수 있나요?
네. useDirective: true를 설정하여 번역하려는 파일 상단에 'use i18n' 지시문을 요구할 수 있습니다. 기본값은 자동(모든 파일)입니다.
AI 번역이 잘못된 경우 어떻게 하나요?
data-lingo-override 속성을 사용하여 특정 로케일에 대한 정확한 번역을 지정할 수 있습니다. 모든 JSX 요소에서 작동합니다.
API 호출 없이 테스트하려면 어떻게 하나요?
개발 환경에서 usePseudotranslator: true를 활성화하세요. API 비용 없이 무엇이 번역되는지 확인할 수 있도록 가짜 번역을 즉시 생성합니다.