React 앱의 국제화(i18n)를 위한 최고의 솔루션

작동 방식

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과 같습니다. 오리진에 대해 자세히 읽어보세요.

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 기반 번역으로 문맥에 맞고 고품질의 번역을 보장합니다.
• 확장 가능한 솔루션: 애플리케이션과 고객 기반이 성장함에 따라 새로운 언어 지원을 손쉽게 추가할 수 있습니다.

지금 시작하세요!

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

프로덕션 애플리케이션을 테스트하고 라이브 전 새로운 문자열을 추가할 수 있는 폐쇄적이고 안전한 스테이징 환경을 갖출 것을 권장합니다. 이렇게 하면 누구도 비밀 API 키를 훔치지 못하게 하고, 악의적인 문자열 추가로 번역 프로젝트가 불필요하게 팽창하는 것을 방지할 수 있습니다.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!