문서: 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 프로젝트에는 우리가 오리진이라고 부르는 항목들이 포함되어 있습니다. 이를 문자열과 번역을 위한 진입점, 폴더 또는 그룹으로 생각하세요.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins는 문자열을 의미 있는 컨테이너로 분리할 수 있게 해줍니다. 예를 들어, 문서용으로 하나의 origin(오리진)을 두고 마케팅 페이지용으로 다른 origin(오리진)을 둘 수 있습니다.

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

이를 달성하기 위해 프로젝트 내에서 여러 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}
		/>
	);
}

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

서버 사이드 렌더링