본문 바로가기

React3

i18next-react와 Google Sheets를 활용한 국제화(i18n) 자동화 도입기(2) - i18next적용하기(namespace 구분하기) 지난 글에서는 i18n 자동화 도입 배경과 사용 도구 및 도구 선정 배경에 대해 살펴보았다.2024.09.18 - [React] - i18next-react와 Google Sheets를 활용한 국제화(i18n) 자동화 도입기(1) - intro/도구 선정 이번에는 적용한 방법에 대해 소개하려고 한다.그중 먼저 i18next를 적용한 방법을 먼저 소개하겠다.또한, namespace를 구분할 필요가 있어서 이를 구분한 방법도 소개하도록 하겠다.(단, 코드는 보안상 실제 코드가 아닌 주로 공식 문서의 코드를 일부 수정하여 사용하였습니다)  i18next 적용하기먼저 i18next를 사용해서 국제화를 적용했다. i18next의 t 함수를 사용하면, key를 통해 번역 내용을 관리할 수 있다.// 예시{t('ke.. 2024. 10. 27.
i18next-react와 Google Sheets를 활용한 국제화(i18n) 자동화 도입기(1) - intro/도구 선정 도입기라고 하기엔 별거 없지만,다른 블로그 글과 달라진 부분도 있고,나중에 또 적용해야 할 나를 위해 써보는 도입기! (1)을 붙인 건 더 업데이트해야 할 부분이 많기도 하고,한번에 다 쓰려고 하다보니 자꾸 미뤄져서 잘라서 써야겠단 생각이 들었다ㅎㅎ(메인 업무가 아니여서 틈틈이 조금은 더디게 진행된단 점도 있고ㅎㅎ)  배경 및 문제인식회사의 서비스가 글로벌 시장 진출을 준비하면서 국제화(internationalization, i18n)를 준비하게 되었다.국제화에는 여러 지원이 포함되지만, 가장 우선시해야 하는 것 중 하나인 언어 대응을 준비하게 되었는데, 기존 방식이 비효율적이고 생산성이 떨어지는 방식으로 되어있었다. 즉, 아래와 같은 문제점들을 도출하였고 이를 개선할 수 있는 방안을 고안하게 되었다... 2024. 9. 18.
[원티드 챌린지] 리액트 테스트와 최적화 이 글은 원티드 프리온보딩 8월 챌린지(리액트 리팩토링 실전가이드: 테스트부터 최적화까지) 사전과제를 하며 공부한 것을 정리한 글입니다. 잘못된 부분이 있으면 언제든지 댓글 등으로 알려주세요. 1. 테스트 테스트 코드의 중요성 - 개발 과정에서 미리 문제를 발견하고 수정할 수 있다. - 코드 변경시 변경 부분으로 인한 영향도 파악이 쉽다. - 리팩토링을 안심하고 할 수 있다. 유닛테스트 vs. 통합테스트 vs. E2E테스트 비교 유닛테스트 가장 작은 단위 테스트 (각 컴포넌트 및 기능 단위의 동작 검증) 소스코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차 모든 함수와 메소드에 대한 테스트 케이스를 작성하는 절차 단시간내에 문제 파악 및 수정 가능 (쉽고 빠름) 통합테스트 단위 테스트가 끝.. 2023. 7. 26.