모범 사례

웹용

예시: 앵커가 있는

태그의 경우

현재 언어의 레이블

LLM은 링크 보호에 있어 사람보다 더 효율적이며,

는 다양한 언어 버전 간의 문제를 감지할 수 있도록 합니다.

따라서 모든 언어에서 작동하는 링크를 공유하고

를 사용하여 더 이상 사용되지 않는 앵커의 교체를 관리할 수 있습니다.

코드의 모호성

데이터 지향 모델로 작업할 때는 모호함을 피하십시오.

예시:

'key'라는 용어는 명확하지 않아 검색을 어렵게 만듭니다.

ts
const PRODUCTS: Product[] = [
	{
		id: 'fcf7o',
		logo: '/icons/fcf7o-icon-40.webp',
		label: 'FCF7O',
		key: 'game:fcf7o.words.game_title',
	},
	{
		id: 'lsde',
		logo: '/icons/lsde-icon-40.webp',
		label: '<c1>LSDE</c1>',
		key: 'software:lsde.name',
	},
	{
		id: 'lsge',
		logo: '/icons/lsge.webp',
		label: 'LSGE',
		key: 'software:lsge.name',
	},
];

단일하고 일관된 규칙을 채택하십시오.

'i18nKey'라는 용어는 매우 명확하며 정규 표현식('Regex')을 통해 이 값을 정확하게 검색할 수 있습니다.

ts
const PRODUCTS: Product[] = [
	{
		id: 'fcf7o',
		logo: '/icons/fcf7o-icon-40.webp',
		label: 'FCF7O',
		i18nKey: 'game:fcf7o.words.game_title',
	},
	{
		id: 'lsde',
		logo: '/icons/lsde-icon-40.webp',
		label: '<c1>LSDE</c1>',
		i18nKey: 'software:lsde.name',
	},
	{
		id: 'lsge',
		logo: '/icons/lsge.webp',
		label: 'LSGE',
		i18nKey: 'software:lsge.name',
	},
];

게으름

나쁜 아이디어는 게으름에서 비롯됩니다.

콘텐츠를 검색하기 위해 연산을 수행하여 키를 절약하려고 하지 마십시오.

예시:

javascript
const [title, subtitle] = t( 'game:game.title' ).split( /[:：]/ );

이는 잘못된 좋은 생각입니다. 왜냐하면 일부 언어에서는 문자가 다를 수 있고 단어 순서가 변경될 수 있기 때문입니다.

태그 형식

텍스트에 직접 디자인 관련 코드를 최소화하여 코드베이스에서 제어하십시오.

예를 들어, 이미지의 위치는 지정할 수 있지만, 스타일이나 렌더링 방식은 지정할 수 없습니다.

디자인 변경이 필요할 때, 단지 태그의 스타일을 변경하기 위해 10개 언어로 된 텍스트를 다시 번역해야 하는 제약을 받고 싶지 않을 것입니다!

태그는 식별자를 포함할 수 있지만, 추가 정보를 추가하는 것은 일반적으로 강력히 권장되지 않으며 나쁜 사례입니다.

예시:

처럼 하지 마십시오. 대신

를 사용하십시오.

그런 다음 이미지 태그의 ID를 가져와 코드베이스에서 필요한 스타일을 적용할 수 있습니다.

ID는 인덱스를 통하는 대신 리터럴하게 사용되어야 합니다.

실제로 다른 언어에서는 태그가 이동되어 초기 인덱스와 더 이상 일치하지 않을 수 있습니다.

자연스러운 인덱스를 사용하는 것은 개발자에게도 복잡성을 초래합니다. 이미지나 태그가 어떤 인덱스에 해당하는지 추측하는 것은 정말 골치 아픈 일입니다.

따라서 보간 후 사용자 정의할 수 있도록 식별자가 있는 태그를 사용하십시오.

CSS

사이트 번역 시, 단락이 있는 경우 언어 변경 시 시각적 이동을 방지하기 위해 번역 후 최소 높이(`min-height`)를 선택하십시오.

예시: `mih={'3lh'}`

이는 가장 많은 줄을 차지하는 언어를 기반으로 최소 높이를 정의할 수 있게 하여, 일관되고 깔끔한 사용자 경험(UX)을 보장합니다.

네임스페이스

이는 키를 찾는 정규 표현식(Regex) 패턴을 설정하는 데 큰 도움이 됩니다.

예시:

,