문서: 모범 사례 – 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를 사용할 때만 작동합니다.

규모가 큰 애플리케이션에서는 문자열과 번역을 여러 개의 더 작은 오리진(origin)으로 분리하는 것이 유리합니다. 이러한 접근 방식은 번들 크기와 전송 시간을 줄여 효율적이고 확장 가능한 현지화를 보장합니다.

이것은 클라이언트 측에서만 렌더링할 때는 간단하지만, 서버 사이드 렌더링을 위해 번역을 가져올 때는 오리진 관리는 금방 복잡해집니다. 그러나 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 레이블 사용

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