문서: 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을 문서용으로 사용하고 다른 하나를 마케팅 페이지용으로 사용할 수 있습니다.

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

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

동일한 문자열이 서로 다른 origin에서 서로 다른 번역을 받을 수 있다는 점에 유의하세요.

궁극적으로, 문자열을 origins로 나누는 방식은 귀하의 필요와 선택에 달려 있습니다. 하지만 한 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}
		/>
	);
}

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

서버 사이드 렌더링