TL:DR
컴포넌트 / 디자인 기반으로 translation key를 설계하자
개요 :
최근에 국제화가 필요한 프로젝트를 진행하면서,
translation key 설계를 잘못해서 곤란한 경우가 있었습니다.
애초에 translation key를 파라미터를 이용해 동적으로 사용할 수 있도록 디자인 했으면 좋았을 것이란 생각이 들었는데요,
처음에는 의미론적으로 키 디자인을 접근헀는데,
좀 더 키에 컴포넌트의 컨텍스트를 담았으면 좋지 않았을까 생각해서,
다른 사람들의 접근법을 리서치해보다 괜찮은 아이디어가 있는 것 같아 공유해봅니다.
원문 : 힘들게 배운 프로젝트 국제화 적용 경험의 교훈들
Web internationalisation (i18n) lessons I’ve learned the hard way
With plenty of international web projects under my belt, I’ve encountered different implementations of “Internationalisation” (referred to…
medium.com
translation key를 언어 독립적으로 활용하세요
마크업을 포함하는 네이밍 컨벤션을 사용하세요
와일드카드 주입을 지원하세요
your cart contains !{itemCount} items.
단, 복수형을 고려하세요
your cart contains 1 items
shopping:cart_count:singular: “your cart contains !{itemCount} item.”
shopping:cart_count:plural: “your cart contains !{itemCount} items.”
번역 파일의 예시
button:backward: “Previous”
page:about:title: “About this app”
page:about:content-html: “<p>About blabla.</p>”
page:stats:viewcount-dynamic-singular: “Your site has !{viewCount} view”.
page:stats:viewcount-dynamic-plural: “Your site has !{viewCount} views”.
page:stats:viewcount-dynamic-none: “Your site has no views yet.”
page:stats:wallet-dynamic: “Current credit: !{credit}”
page:stats:primary-button: “Enable on my site”
- 컨텍스트를 잃지 않으려면 언어에 구애받지 않는 키를 사용하십시오.
- 마크업, 동적 값 및/또는 단, 복수의 지원을 나타내기 위해 키에 명명 규칙을 사용합니다.
- 명명된 주입을 사용하여 순서 문제를 방지합니다.
마치며
팁 : 국제화 타이핑하기
// src/i18n-resources.d.ts
import 'react-i18next'
declare module 'react-i18next' {
export interface Resources {
translation: typeof import('../public/locales/en/translation.json')
}
}
https://stackoverflow.com/questions/58277973/how-to-type-check-i18n-dictionaries-with-typescript
How to type check i18n dictionaries with TypeScript?
Is there a possibility to type check existing keys in react-i18next dictionaries? So that TS will warn you during compile time if key doesn't exist. Example. Suppose, we have this dictionary: { "
stackoverflow.com
추가로 볼만한 글 :
원https://medium.com/@danduan/translating-react-apps-using-i18next-d2f78bc87314
Translating React Apps Using i18next
A step by step guide to frontend internationalization
medium.com
'FrontEnd' 카테고리의 다른 글
타입스크립트 : 파라미터 타입(Parameters)과 리턴 타입(ReturnType) (0) | 2022.07.22 |
---|---|
디자인 시스템 만들기 시리즈 1편 : 디자인 토큰 소개 (0) | 2022.07.21 |
리액트를 직접 만들며 알아보는 렌더/커밋/조정 알고리즘 (1) | 2022.07.19 |
리액트 디자인 패턴 : 선언적 컴포넌트 설계 (declarative component design) (0) | 2022.07.19 |
Valtio의 프록시 상태관리가 어떻게 동작할까? (React Part) (1) | 2022.07.18 |