[React][라이브러리 소개] i18next 자동으로 추가 하는 방법

# i18nize-react를 활용해서 i18next 관련 코드 자동 생성 방법 소개

- 다국어 지원은 개발자에게 있어, 항상 마주치게 되는 이슈 중 하나입니다. 꼭 필요하고 중요한 과정이지만, 항상 노가다를 동반하기 때문에, 뒤로 미루게 되는 작업이기도 하죠. 게다가 더욱이 다국어 지원에 대한 것이 처음부터 확정되어 있지 않아서, 하드 코딩을 했다면, 이를 하나하나 찾아서 바꾸는 일은 정말 큰 인내심이 필요합니다. 오늘 포스팅에서는 이런 상황에서 큰 도움이 될 수 있는 방법을 소개해 드리려고 합니다. 그리고 i18next 라이브러리 사용법은 포스팅에 포함되지 않았으니, 참고하시기 바랍니다

 

# 깃헙 페이지

https://github.com/Ghost---Shadow/i18nize-react

GitHub - Ghost---Shadow/i18nize-react: Internationalize react apps within a lunch break

 

# 사용법

- i18next 라이브러리를 적용시켜주기 위함이니 i18next 라이브러리를 설치합니다

yarn add i18next

- 그리고 i18nize-react 라이브러리가 실행된 경로의 파일들을 확인해서 코드를 변경해 주는 작업을 해주어야 하기 때문에, 글로벌 하게 설치를 하고 실행합니다

npm i -g i18nize-react 
i18nize-react
# 또는 npx i18nize-react으로 설치 및 실행 한번에 가능

- 그러면 소스 경로 기준으로 아래의 파일들이 자동으로 생성됩니다. 중국어 번역 파일도 생성 되므로 필요하지 않은 파일은 삭제 하시고, init.js파일에서 i18next의 init 함수에서 중국어 locale을 지워주세요.

 

• src/i18n/init.js
• src/i18n/keys.js
• src/i18n/english.js
• src/i18n/chinese.js.

- 그리고 다음과 같이 init.js를 import하시면 끝입니다.

 

// entry point인 root/src/index.js에서 아래와 같이 import
import ./i18n/init.js;

- 참고로 자동 생성된 코드가 완벽하지는 않습니다. 가령 다음과 같이 다른 UI 프레임워크를 같이 섞어 쓰면서 문자열로 된, Prop을 넘겨준 경우에는 그 문자열의 번역까지 생성되는 경우가 있으니, 어느정도 수작업이 필요합니다. 스타일링이나 Prop들을 한 번 정리해준 다음에 라이브러리를 적용하는 것이 더 효율적인 것 같습니다

// ~
<Popover
  anchorOrigin={{
    vertical: "top", // top 번역 생성
    horizontal: "left", // left 번역 생성
  }}
  open={showColorPicker}
  onClose={handleClose}
  >
  // ~

 

# 마치며

- 실행 한 번으로 완벽한 결과를 얻을 수는 없지만, 하드코딩된 문자열들을 찾아서, 테이블 및 키들을 정의하고, 그 결과 값을 입력하는 과정도 만만치 않기 때문에, 이를 해결해 주는 것만으로도 충분히 사용해볼만 한 것 같습니다