문서: 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 공급자를 사용하는 것을 고려하세요.

같은 문자열이라도 서로 다른 origins에서 다른 번역을 받을 수 있음을 유의해 주십시오.

궁극적으로 문자열을 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}
		/>
	);
}

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

서버 사이드 렌더링