문서: 모범 사례 – 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를 사용하는 경우에만 작동합니다.

대형 애플리케이션을 다룰 때는 문자열과 번역을 여러 개의 더 작은 origins로 분할하는 것이 유리합니다. 이 접근 방식은 번들 크기와 전송 시간을 줄여 효율적이고 확장 가능한 로컬라이제이션을 보장합니다.

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

예를 들어, 컴포넌트와 페이지를 별도의 파일로 분리한 이 예제를 살펴보세요.

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