문서: 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를 설정할 수 있습니다.

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

같은 문자열이라도 서로 다른 오리진에서 서로 다른 번역을 받을 수 있다는 점에 유의하세요.

궁극적으로 문자열을 오리진별로 어떻게 분리할지는 귀하의 필요에 달려 있습니다. 다만 하나의 오리진에 문자열이 많으면 로딩 시간이 증가할 수 있다는 점을 유의하세요.

변수 처리

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

문자열의 변수는 이중 중괄호(예: {{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}
		/>
	);
}

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

서버 사이드 렌더링