Cake를 9개 언어에서 동작하도록 글로벌화 작업을 하면서 얻은 경험을 공유하려고 해요. 제가 가졌던 고민의 시간들이 누군가에게는 도움이 되고 시행착오를 줄이는 데 도움이 될 거라 믿으면서 시작해보겠습니다.

# 이미 좋은 게 있겠지?

구글신에게 물어보니 몇가지 라이브러리를 알려주네요.

• i18n-js
• react-i18next
• react-intl

간단한 기능만 있으면 되는데 슈퍼셋을 제공하다 보니 모두 필요 이상으로 복잡(구현 코드도 복잡)하네요. 결정적으로 사용을 망설이게 만드는 건 기본적인 사용법이었습니다.

// i18n-js
I18n.t('TOTAL_USER_COUNT', { count });

// react-i18next
<Text>{t('TOTAL_USER_COUNT', { count })}</Text>

모두 잘 사용하는데 뭐가 문제라는 걸까요?

• 문자열을 키로 사용

  키로 TOTAL_USER_COUNT 같은 문자열을 입력하다 보면 실수로 잘못 넣을 가능성은 입력 마다 존재합니다. 에디터에서 자동 완성도 제대로 되지 않기 때문에 타이핑이 고달프고 유지 보수하는 것도 힘들어집니다.

• 정의 확인의 어려움

  소스를 읽을 때 해당 키가 어떤 텍스트로 정의됐는지, 파라미터를 사용하는지를 바로 확인하기 어렵습니다. 매번 언어를 정의한 파일을 열어서 검색하는 건 원더키드와 맞팔할법한 2019년에는 어색한 방식입니다.

이런 이유들이 쌓이면 개발 생산성을 급격하게 저하됩니다. 그래서 에디터에서 자동완성이 되는 변수를 키로 사용하고 정의 및 매개변수를 바로 확인할 수 있으면서 잘못 사용할 경우 오류를 실시간으로 확인할 수 있는 방법을 만들겠다는 야심찬 목표를 세웠습니다.

# 결과부터 이야기드리면

목표로 했던 그대로 구현해서 서비스 출시까지 완료했습니다. 이 방식이 저만 괜찮아 보이나요?

자동 완성 / 힌트 : 이젠 실수를 하기도 어렵겠네요.

타입 확인/체크 : 동적 타입인 경우 사용된 매개변수 확인 및 체크가 가능합니다.

오류 확인 : 잘못된 키나 제거된 키를 사용하거나, 함수형의 매개 변수를 잘못 전달하면 바로 에러가 발생합니다.