문서: 모범 사례 – 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"
/>

이건 뭔가 매우 메타하게 느껴진다.

전역 오리진 배열 및 여러 컴포넌트의 오리진

이 패턴은 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 레이블 사용

전역 오리진 배열 및 여러 컴포넌트의 오리진