TacoTranslate
/
문서가격
 
기사
5월 04일

React 애플리케이션을 위한 간편한 현지화

React 애플리케이션을 새로운 시장으로 확장하려고 하시나요? TacoTranslate는 React 앱을 현지화하는 것을 매우 쉽게 만들어 번거로움 없이 전 세계 청중에게 도달할 수 있게 해줍니다.

React에 TacoTranslate를 선택해야 하는 이유는 무엇일까요?

  • 원활한 통합: React 애플리케이션을 위해 특별히 설계된 TacoTranslate는 기존 워크플로우에 무리 없이 통합됩니다.
  • 자동 문자열 수집: 더 이상 JSON 파일을 수동으로 관리할 필요가 없습니다. TacoTranslate가 코드베이스에서 문자열을 자동으로 수집합니다.
  • AI 기반 번역: AI의 힘을 활용하여 애플리케이션의 톤에 맞는 맥락적으로 정확한 번역을 제공합니다.
  • 즉각적인 언어 지원: 단 한 번의 클릭으로 새로운 언어를 추가하여 애플리케이션을 전 세계적으로 사용할 수 있게 만듭니다.

작동 방식

npm을 통해 TacoTranslate 패키지를 설치하세요:

npm install tacotranslate

모듈을 설치한 후에는 TacoTranslate 계정, 번역 프로젝트, 그리고 관련 API 키를 생성해야 합니다. 여기에서 계정을 생성하세요. 무료이며, 신용카드 등록이 필요하지 않습니다.

TacoTranslate 애플리케이션 UI 내에서 프로젝트를 생성하고, API 키 탭으로 이동하세요. read 키 하나와 read/write 키 하나를 생성합니다. 이 키들은 환경 변수로 저장할 것입니다. read 키는 public이라고 부르며, read/write 키는 secret입니다. 예를 들어, 프로젝트 루트에 있는 .env 파일에 추가할 수 있습니다.

또한 두 개의 환경 변수를 더 추가해야 합니다: TACOTRANSLATE_DEFAULT_LOCALE 및 TACOTRANSLATE_ORIGIN.

  • TACOTRANSLATE_DEFAULT_LOCALE: 기본 대체 로케일 코드입니다. 이 예에서는 영어를 위해 en으로 설정합니다.
  • TACOTRANSLATE_ORIGIN: 문자열이 저장될 “폴더”로, 예를 들어 웹사이트의 URL과 같습니다. 여기에서 origin에 대해 더 읽어보세요.
.env
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

비밀 read/write API 키를 클라이언트 측 프로덕션 환경에 절대 유출하지 마십시오.

TacoTranslate 설정하기

TacoTranslate 컨텍스트 프로바이더로 애플리케이션을 감싸 React 애플리케이션에서 TacoTranslate를 초기화하세요:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

이제 애플리케이션 내 어디에서든 Translate 컴포넌트를 사용하여 번역된 텍스트를 표시할 수 있습니다! 자세한 정보와 귀하의 설정에 맞는 구현 가이드는 문서를 꼭 확인하세요.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

TacoTranslate 사용의 이점

  • 시간 절약: 현지화 및 문자열 수집의 번거로운 과정을 자동화하여 소중한 시간을 절약합니다.
  • 비용 효율적: 수동 번역의 필요성을 줄여 현지화 비용을 낮춥니다.
  • 정확성 향상: AI 기반 번역으로 문맥에 맞고 고품질의 결과를 제공합니다.
  • 확장 가능한 솔루션: 애플리케이션과 고객 기반이 성장함에 따라 새로운 언어 지원을 쉽게 추가할 수 있습니다.

오늘 바로 시작하세요!

React 애플리케이션에서 Translate 컴포넌트에 문자열을 추가하면 자동으로 번역됩니다. API 키에 대해 read/write 권한이 있는 환경에서만 번역할 새 문자열을 생성할 수 있다는 점에 유의하세요.

라이브 이전에 새 문자열을 추가하여 프로덕션 애플리케이션을 테스트할 수 있는 폐쇄적이고 보안된 스테이징 환경을 갖추는 것을 권장합니다. 이렇게 하면 비밀 API 키가 도용되는 것을 방지하고, 악의적인 문자열 추가로 인해 번역 프로젝트가 불필요하게 커지는 것을 막을 수 있습니다.

반드시 GitHub 프로필에서 완전한 예제들을 확인해 보세요. 문제가 발생하면 언제든지 문의해 주시기 바랍니다. 기꺼이 도와드리겠습니다.

TacoTranslate는 React 애플리케이션을 모든 언어로부터 빠르게 자동 현지화할 수 있게 해줍니다. 무료로 번역해 보세요!

Nattskiftet의 제품