[인턴일지] 0x05 Agoda의 깃허브 리포지토리 중 번역 관련 정보를 찾기

2024년 하기 계절학기 인턴십

회사: 창의적인 웹 디자인과 맞춤형 디지털 솔루션을 제공하는 IT 전문 기업
날짜: 2024.06.24 ~ 07.19
시간: P.M. 14:00 ~ P.M. 18:00

2024년 06월 28일 금요일

학습: (노션 정리 중 일부분 )

 

아고다 깃허브

Agoda의 깃허브 리포지토리 중 번역 관련 정보를 찾으려면, 주로 프론트엔드 개발, 국제화(i18n) 또는 지역화(l10n) 관련 리포지토리를 찾아보는 것이 좋을 것 같다고 생각.

https://github.com/agoda-com/react-handyman

GitHub - agoda-com/react-handyman: 👨‍🔧 Enhance your React.js app with i18n, string formatting, ab tests and other handy

 

1. packages 폴더 내부에 번역과 관련된 파일들이 있는지 확인 를 들어 i18n 또는 localization이라는 폴더나 파일 확인

다국어 지원 웹사이트 구축

(링크확인 : https://github.com/agoda-com/react-handyman/tree/master/packages/i18n-jsx)

 

1. 다국어 콘텐츠 준비: 번역 문자열을 포함한 객체를 Redux 스토어에 저장합니다.
2. 다국어 파일 구조 설정: 번역된 내용을 Redux 스토어를 통해 관리합니다.
3. 언어 선택 기능 추가: <I18nProvider> 및 useI18n 훅을 사용하여 번역된 콘텐츠를 선택할 수 있습니다.
4. 서버 설정: 모든 번역 데이터를 Redux 스토어를 통해 제공하고 관리합니다.

이 방식은 API 호출 없이 애플리케이션 내에서 직접 번역된 문자열을 관리하고 제공하여 번역 품질을 높일 수 있습니다.

 

결론:

아고다는 번역된 문자열을 애플리케이션 내에서 직접 관리하고 제공합니다. 이를 위해 번역된 문자열을 Redux 스토어에 저장하고, React의 컴포넌트와 훅을 사용해 애플리케이션 전반에 걸쳐 번역된 문자열을 접근하고 사용할 수 있게 합니다. 따라서 번역 API 호출 없이도 애플리케이션 내에서 다국어 지원을 구현할 수 있습니다. 이 방식은 서버나 DB에 일일이 번역을 저장해 두는 것과는 달리, 클라이언트 측에서 번역을 관리하고 제공하는 방식.

 

애플리케이션 내에서 직접 관리한다는 것은 번역된 문자열을 서버나 외부 API를 통해 실시간으로 가져오는 것이 아니라, 애플리케이션의 코드나 상태 관리 도구(예: Redux 스토어)에 저장하고 사용한다는 의미입니다.

구체적으로, 다음과 같은 방식으로 관리합니다:

1. 번역된 문자열을 미리 준비: 모든 번역된 문자열을 사전에 준비하여 애플리케이션의 코드에 포함시킵니다.
2. Redux 스토어에 저장: 번역된 문자열을 Redux 스토어와 같은 상태 관리 도구에 저장하여 전역적으로 접근할 수 있게 합니다.
3. 컴포넌트와 훅을 사용하여 접근: React 컴포넌트와 훅(useI18n)을 사용하여 필요한 번역된 문자열을 쉽게 가져와 사용할 수 있게 합니다.