본문으로 건너뛰기
프레임워크

단 하나의 대시보드, 어떤 프레임워크든 지원

Vue, React 및 Angular에 대한 기본 지원이 제공됩니다. 스캐너는 package.json에서 i18n 라이브러리를 자동으로 감지하므로 별도의 구성이 필요하지 않습니다.

지원 프레임워크
3
i18n 라이브러리
4
탐지된 패턴
12
  1. package.json
  2. 탐지된 라이브러리
  3. 탐지된 패턴
vue-i18n · react-i18next · react-intl · ngx-translate

Vue

vue-i18n

vue-i18n 9+를 완벽하게 지원합니다. 템플릿 구문, 컴포저블 호출 및 SFC의 <i18n> 블록을 스캔합니다.

신속한 통합

main.ts
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: await fetch('/locale/en.json').then(r => r.json()),
  }
})

탐지된 패턴

템플릿
<p>{{ $t('greeting') }}</p>
조합 가능
const { t } = useI18n() const label = t('nav.home')
지침
<span v-t="'actions.save'" />
구성 요소
<i18n-t keypath="welcome.message" />

React

react-i18next 및 react-intl

널리 사용되는 두 가지 React i18n 라이브러리가 모두 지원됩니다. 둘 중 하나를 선택하면 스캐너가 자동으로 이에 맞춰 조정됩니다.

신속한 통합

i18n.ts
import i18n from 'i18next'
import HttpBackend from 'i18next-http-backend'

i18n.use(HttpBackend).init({
  fallbackLng: 'en',
  backend: { loadPath: '/locale/{{lng}}.json' },
})

탐지된 패턴

Hook (i18next)
const { t } = useTranslation() <h1>{t('greeting')}</h1>
컴포넌트 (i18next)
<Trans i18nKey="terms.accept" />
구성 요소 (국제)
<FormattedMessage id="welcome" />
명령형 (국제)
intl.formatMessage({ id: 'errors.required' })

Angular

ngx-translate

@ngx-translate/core와 연동됩니다. 템플릿, 파이프, 지시어 및 서비스 호출을 스캔합니다.

신속한 통합

app.module.ts
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'
import { TranslateHttpLoader } from '@ngx-translate/http-loader'

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (http) => new TranslateHttpLoader(http, '/locale/', '.json'),
    deps: [HttpClient]
  }
})

탐지된 패턴

파이프
<h1>{{ 'greeting' | translate }}</h1>
지침
<span [translate]="'nav.home'"></span>
서비스
this.translate.instant('errors.required')
스트림
this.translate.stream('dashboard.title')
시작해 볼까요

앱 번역을 네 단계로.

  1. 계정 만들기

    무료로 시작: 모든 요금제를 30일간, 카드 필요 없음. 이후에도 프로젝트 1개는 계속 무료입니다.

  2. 설치하기

    어떻게 설치하시겠어요?

    직접 운영하는 서버에서 실행한 뒤 localhost:6001을 여세요.

    docker compose pull && docker compose up -d

    자체 호스팅 가이드

    macOS, Windows, Linux 지원. 자체 로컬 서버가 함께 실행됩니다.

    앱 다운로드
  3. 프로젝트 연결

    폴더나 Git 저장소를 지정하세요. 프레임워크와 로케일 파일을 찾아 줍니다.

  4. 번역하기

    8개 엔진 중에서 골라 언어 전체를 한 번에 번역하세요. Google 번역은 키 없이 쓸 수 있습니다.