이슈 10 react 다국어 지원, import { default as smt } from ...

프로젝트를 진행하다보니 다국어를 지원할 필요성이 생겼습니다.

우측 상단에 KO/EN 라디오 버튼을 배치한 뒤, KO를 누르면 한국어로, EN을 누르면 영어로 표시될 수 있게 하려 합니다. 이외에도 다른 언어가 추가될 것을 고려해 텍스트를 언어 별로 하나의 json 파일로 만들기로 했습니다. 언어 파일을 추가한 프로젝트 구조는 다음과 같고, 안드로이드 프로젝트 구조에서 영감을 받았습니다.

공통으로 사용하는 텍스트는 최상위에 두었고, 기능 별로 겹치는 명칭들은 네임스페이스로 만들어 관리합니다. ko.json 파일 구조는 다음과 같습니다.

{
  "info": "인적사항",
  "studentID": "학번",
  "seatNum": "좌석 번호",
  "password": "비밀번호",

  "reserve": {
    "title": "좌석 예약",
    "warning": "예약 시 주의사항",
    "warningTexts": [
      "reserveDummy1",
      "reserveDummy2",
      "reserveDummy3"
    ],
    "submit": "주의사항에 동의하며 예약을 진행합니다."
  },

  "modify": {
    "title": "예약 변경/취소",
    "warning": "예약 취소/변경 시 주의사항",
    "warningTexts": [
      "modifyDummy1",
      "modifyDummy2",
      "modifyDummy3"
    ],
    "submit": {
      "cancel": "예약 취소",
      "modify": "예약 변경"  
    }
  },

  "end": {
    "title": "사용 종료",
    "warning": "사용 종료 시 주의사항",
    "warningTexts": [
      "endDummy1",
      "endDummy2",
      "endDummy3"
    ],
    "submit": "사용 종료"
  }
}

en.json이나 ch.json 또한 언어만 다를 뿐 마찬가지로 구성합니다. 마지막으로 이를 통합하는 index.js를 만듭니다. 이전에 올렸던 2020/01/17 - [엥휴/Electron-Webpack + React] - 단 한 줄! index.js로 내 코드 깔끔하게 import하기를 응용하여 만들었습니다.

단 한 줄! index.js로 내 코드 깔끔하게 import하기

const glob = require('glob')
const path = require('path')

const folder = './src/strings/'
const select = '!(index)'
const format = '.json'
const local = folder + select + format

module.exports = {}
glob.sync(local).forEach(file => {
  const filePath = path.basename(file)
  const fileName = path.basename(filePath, format)
  const m = require('./' + filePath)
  module.exports[fileName] = m
})

아래와 같이 import하여 사용하시면 됩니다.

import { ko, en } from '../strings'

물론 파일이 한 두 개 정도로 적다면 직접 import해서 사용해도 됩니다.

import { default as ko } from '../strings/ko.json'
import { default as en } from '../strings/en.json'

이렇게 관리하게 되면 추가되는 언어가 늘어날수록 똑같은 import 코드가 중복되니, 제 입장에서는 위와 같이 사용하는 게 더 좋아보입니다.