문서: 모범 사례 – TacoTranslate

모범 사례

Korean

URL을 변수에 넣기

URL 또는 유사한 데이터를 포함하는 문자열을 번역할 때, 이러한 URL을 변수 안에 넣고 템플릿 내에서 참조하는 것이 좋은 관행으로 간주됩니다.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

버튼과 같은 상호작용 요소의 텍스트를 번역할 때는 접근성을 보장하기 위해 ARIA 레이블을 포함하는 것이 중요합니다. ARIA 레이블은 화면 읽기 프로그램이 요소의 기능에 대해 설명하는 정보를 제공하는 데 도움을 줍니다.

예를 들어, 사용자가 코드 블록에서 텍스트를 복사할 수 있는 버튼이 있다면, 명확한 설명을 제공하기 위해 aria-label 속성을 사용할 수 있습니다:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

이것에 대해 뭔가 매우 메타한 느낌이 듭니다.

글로벌 origins 배열 및 다중 컴포넌트 origins

이 패턴은 Next.js Pages Router를 사용할 때만 작동합니다.

대규모 애플리케이션 작업 시 문자열과 번역을 여러 개의 더 작은 출처로 분리하는 것이 유리합니다. 이 방법은 번들 크기와 전송 시간을 줄여 효율적이고 확장 가능한 현지화를 보장합니다.

이는 클라이언트 사이드 렌더링 시에는 간단하지만, 서버 사이드 렌더링을 위해 번역을 가져올 때는 출처 관리가 빠르게 복잡해집니다. 그러나 TacoTranslate 클라이언트 origins 배열을 활용하면 출처 관리를 자동화할 수 있습니다.

아래 예시에서는 컴포넌트와 페이지를 별도의 파일로 분리한 것을 참고하세요.

components/pricing-table.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import tacoTranslate from '../tacotranslate-client';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
tacoTranslate.origins.push(origin);

export default function PricingTable() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing table" />
			// ...
		</TacoTranslate>
	);
}

pages/pricing.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';
tacoTranslateClient.origins.push(origin);

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We will now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

자세한 내용은 서버 사이드 렌더링 예제에서 getTacoTranslateStaticProps에 대해 확인하세요.

오류 처리 및 디버깅

모범 사례

ARIA 레이블 사용하기

글로벌 origins 배열 및 다중 컴포넌트 origins