영문화를 위한 i18n 모듈 적용

회사에서 다국어 지원을 적용하기로 해 React에 i18n 적용 방법을 정리해 보았다.

i18n 모듈 적용 계획

• 구글 스프레드 시트 사용
• 소스 코드에 key를 스캔하고 추가된 key를 구글 스프레드 시트에 업로드하도록 함
• 소스 빌드 시 구글 스프레드 시트에서 번역된 문자열을 다운로드하여 빌드하도록 함

노드 패키지 설치

1. i18next
   1. hook을 사용 (useTranslation) 번역된 결과 표현
2. i18next-parser
   1. 소스코드에서 지정된 패턴의 함수 (i18next.t())를 스캔하여 key를 추출하고 언어별 json 파일 생성
   2. 해당 파일은 locales > en-us/ko-kr에 위치
3. google-spreadsheet
   1. 구글 시트를 사용할 수 있도록 한 라이브러리: 시트 생성 및 행을 읽고 추가 셀 조작

폴더 구조

• i18n: i18n 설정파일
  • locales: 변환된 json 파일 저장
    • en-US
    • ko-KR
• translation
  • .credential
    • index.js: google api key
    • 해당 디렉토리는 따로 설정이 필요함
  • default-pack.cjs: 언어 설정 파일
  • download.js: google sheet 에서 다운로드 받아오는 설정
  • i18next-parser.config.cjs: key parser config
  • index.js: 구글 연동 설정
  • upload.js: google sheet 로 키 업로드 내용 설정

구글 스프레드 시트 연동

1. 설정 파일 추가하기
   1. 설정 파일은 translations 폴더 내 위치
      1. upload.js
      2. download.js
      3. index.js
2. 구글 스프레드 시트 권한 설정 및 시트 추가 : 완료
   1. spreadSheetDocId:
   2. sheetID:
   3. 구글 스프레드시트 인증 필요
      1. 서비스계정 만들기
      2. 봇 사용자 추가하여 json인증서 다운로드
   4. 스프레드 시트를 브라우저에서 문서 공유자에 서비스 계정을 추가

package.json에 스크립트 추가

1. scan:i18n: 소스코드에서 key 추출 및 value로 구정된 언어별 json 파일을 만듬
2. upload:i18n: 생성된 여러 개의 언어별 json파일은 하나의 테이블로 만들어 구글 스프레드 시트에 업로드
3. download:i18n: 반대로 동가 - 번역된 값을 각 언어별 json파일에 반영
4. npm run upload:i18n 실행
   1. 소스 코드의 모든 key가 스프레드 시트에 업로드 됨
5. 빌드 시 마다 최신 번역값이 빌드에 반영되도록 설정
   1. npm run download:i18n이 실행되도록