문서: TacoTranslate 사용법

TacoTranslate 사용하기

Korean

문자열 번역하기

현재 문자열을 번역하는 방법은 세 가지가 있습니다: Translate 컴포넌트, useTranslation 훅, 또는 translateEntries 유틸리티입니다.

Translate 컴포넌트 사용하기.
span 요소 내에 번역 결과를 출력하며, HTML 렌더링을 지원합니다.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

예를 들어, 컴포넌트에서 as="p"를 사용하여 요소 유형을 변경할 수 있습니다.

useTranslation 훅 사용하기.
번역을 일반 문자열로 반환합니다. 예를 들어 meta 태그에서 유용합니다.

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

translateEntries 유틸리티 사용하기.
서버 측에서 문자열을 번역하세요. OpenGraph 이미지를 강화하세요.

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

문자열이 번역되는 방법

문자열이 우리 서버에 도달하면, 먼저 검증하고 저장한 후 즉시 기계 번역을 반환합니다. 기계 번역은 일반적으로 AI 번역에 비해 품질이 낮지만, 빠른 초기 응답을 제공합니다.

동시에, 우리는 귀하의 문자열에 대해 고품질의 최신 AI 번역을 생성하기 위해 비동기 번역 작업을 시작합니다. AI 번역이 준비되면 기계 번역을 대체하며, 문자열 번역을 요청할 때마다 전송됩니다.

문자열을 수동으로 번역한 경우, 해당 번역이 우선적으로 사용되며 반환됩니다.

기원 활용하기

TacoTranslate 프로젝트에는 origins라고 부르는 것이 포함되어 있습니다. 이를 문자열과 번역의 진입점, 폴더 또는 그룹으로 생각하세요.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Origins는 문자열을 의미 있는 컨테이너로 분리할 수 있게 해줍니다. 예를 들어, 문서용 origin 하나와 마케팅 페이지용 origin 하나를 가질 수 있습니다.

더 세밀한 제어를 위해, 컴포넌트 수준에서 origins를 설정할 수 있습니다.

이를 달성하려면, 프로젝트 내에서 여러 개의 TacoTranslate 공급자를 사용하는 것을 고려해 보세요.

동일한 문자열이라도 서로 다른 origin에서는 다른 번역을 받을 수 있음을 유의해 주시기 바랍니다.

궁극적으로 문자열을 origin으로 분리하는 방법은 여러분과 여러분의 필요에 달려 있습니다. 다만, 한 origin에 너무 많은 문자열이 있으면 로딩 시간이 길어질 수 있다는 점에 유의하세요.

변수 처리

사용자 이름, 날짜, 이메일 주소 등과 같은 동적 콘텐츠에는 항상 변수를 사용해야 합니다.

문자열 내 변수는 {{variable}}과 같이 이중 괄호를 사용하여 선언됩니다.

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

HTML 콘텐츠 관리

기본적으로 Translate 컴포넌트는 HTML 콘텐츠를 지원하고 렌더링합니다. 그러나 useDangerouslySetInnerHTML을 false로 설정하여 이 동작을 비활성화할 수 있습니다.

사용자 생성 콘텐츠와 같이 신뢰할 수 없는 콘텐츠를 번역할 때는 HTML 렌더링을 비활성화하는 것을 적극 권장합니다.

모든 출력은 렌더링되기 전에 항상 sanitize-html로 정리됩니다.

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

위의 예시는 일반 텍스트로 렌더링됩니다.

서버 사이드 렌더링