[Article] 다국어 아티클 보완

[Article] 다국어 아티클 보완

Author: Hong-JunHyeok

_posts/how-to-support-i18n.md

@@ -213,12 +213,10 @@ t("번역키1", {
 ```
 
 이것에 대한 정확한 기술이름을 못찾아서 이것을 `리플레이스 태그 방식`이라고 자칭했습니다.
-이렇게되면 조금 더 `Frotnend` 개발에 유연한 방식으로 구현할 수 있고 번역 객체에는 정말 필요한 번역 문구만 지정할 수 있게됩니다.
+이렇게되면 조금 더 `Frontend` 개발에 유연한 방식으로 구현할 수 있고 번역 객체에는 정말 필요한 번역 문구만 지정할 수 있게됩니다.
 
 이전 직장에서도 이러한 방식을 사용해왔기 때문인지 몰라도 저는 이 방식을 주장해왔습니다.
 
-그래서 이 의견을 설득시키는 과정에서 CTO 분이랑 정말 많은 의견 교류를 했었지만...
-
 **결국 저는 패배했습니다.**
 
 이것이 가져다주는 명확한 장점이 무엇인지 설득을 잘 못했거든요.
@@ -355,10 +353,87 @@ export default elementReplacer;
 
 이제, 위와 같은 동작을 통하여 클랩에서도 다국어를 지원할 수 있는 준비가 되었습니다.
 
-다른 클라 개발자분들도 쉽게 사용할 수 있도록 [API 문서](https://celestial-juice-f35.notion.site/useLocalized-API-Docs-163c17b94c2f80ec87abfa9735df409b?pvs=4)와 사용 예시가 담긴 데모 페이지를 제공했습니다.
-
 ![SLACK3](/assets/blog/how-to-support-i18n/image3.png)
 
-기반 작업은 완료되었지만, 아직 클랩의 다국어 변환은 진행중이에요.
+=이 아래부터는 글 작성일로부터 100일이 지난 시점에 추가된 내용입니다.=
+
+위의 기반작업으로 다국어 기반 작업을 다졌고, 실제 프로덕션에 반영이 된지 100일이 지났습니다.
+
+결론부터 말씀드리면 위에서 설명드린 기반 작업은 미약했었습니다. (여러므로 비효율 적인 부분들이 많았었거든요.)
+
+**1. 기존에 한글 문구로 있는 부분들을 전부 다국어 Key 값으로 변경해주어야한다.**
+
+비지니스에서의 기능 개발이라는 것은 신속하고 문제가 없이 완료가 되어야합니다.
+
+하지만 기존에 존재하던 다양한 한글 문구들이 있고 그걸 하나하나 다국어 키로 변환해주는 과정이 비효율적이였습니다.
+
+3000개가 넘는 문구들을 한명이 변환하기에는 부족했었죠. 그래서 클랩 팀에서는 총 4명이서 "다국어 스쿼드"를 구성하여 엑셀 시트에 있는 Line Number를 기준으로 변환 작업을 진행해갔습니다. 그 과정이 결코 쉽지만은 않았습니다. 단순 반복작업이 반복되다 보니 피로감이 쉽게 쌓였었습니다.
+
+그래서 그걸 타파하기 위해서 다양한 발악(?)을 해봤었습니다.
+
+![SLACK4](/assets/blog/how-to-support-i18n/image4.png)
+
+하지만 이것이 근본적으로 피로감을 해결해주진 못했었습니다. 도움은 되었지만요.
+
+아직까지 풀어나가야할 숙제이긴 합니다만 저는 CLI 형태로 한글 문구들을 자동으로 Replace 시켜주는 기능을 개발해보려고 합니다.
+
+이것도 개발이 완료되는 시점에 사용해보고 후기 글을 남기도록 할게요.
+
+**2. 다국어 문구를 업데이트할 때 실수를 하게된다.**
+
+문구를 다국어로 변환할때 동적 변수 값들도 함께 전달을 해주어야합니다. 이 과정에서 실수가 굉장히 많이 나왔었어요.
+
+전달해주어야하는 동적변수를 누락하여 전달한다던지, 동적변수에 오타가 발생하여 UI가 깨지는 문제가 발생한다던지.
+
+저희 다국어 스쿼드는 이 문제를 런타임 환경이 아니라 사전에 타입으로 인지할 수 있으면 좋을 것 같다는 생각을 했었어요.
+
+그런데 그러려면 다국어 키를 생성할 때마다 해당 키에 맞는 동적변수를 하나하나 추가해주고 관리해주어야해서 매우 비효율적이였는데요.
+
+다행히도 다국어 값들에 패턴이 존재하더라구요.
+
+`다국어키 : "문구문구 {동적변수1} 문구문구 {동적변수2} 문구문구"`
+
+여기서 `동적변수1`, `동적변수2`에 해당하는 타입만 추출해서 타입으로 제공해주면 되잖아요.
+
+그래서 저는 이런 타입을 추출해주는 것을 자동으로 해주는 스크립트를 만들었어요.
+
+해당 스크립트를 실행하면 아래와 같이 타입이 자동 생성되게 됩니다.
+
+```ts
+export type MessageVariables = {
+  "adminSettings.removedAsAdmin": { user: React.ReactNode | React.ReactElement[] };
+  "adminSettings.addedBy": { user: React.ReactNode | React.ReactElement[] };
+  "adminSettings.excludedFrom": { role: React.ReactNode | React.ReactElement[] };
+  "adminSettings.confirmExcludeUser": {
+    user: React.ReactNode | React.ReactElement[];
+    role: React.ReactNode | React.ReactElement[];
+  };
+  ...
+}
+```
+
+**3. 다국어 시트를 업데이트하는 방식이 비효율적이다.**
+
+저희 다국어 스쿼드는 구글 시트에 다국어 값들을 관리하고 있었는데 예전에는 구글 시트에 AppScript를 돌려서 JSON을 추출하는 방식을 사용했었어요.
+
+그러면 매번 문구가 업데이트 될때마다 구글 시트에 가서 JSON 파일을 추출하고 에디터에 해당 파일을 업데이트 해주어야 했었어요.
+
+이 과정이 불편했고 개선하고 싶었습니다.
+
+그래서 CLI를 통해서 메시지 업데이트하는 과정을 자동화하도록 설정하였습니다.
+
+![SLACK5](/assets/blog/how-to-support-i18n/image5.png)
+
+**4. 다국어 작업 이후로 프로덕션의 속도가 느려졌다.**
+
+아무래도 다국어 JSON파일의 크기가 크다보니까 프로덕션의 속도가 느려진게 체감이 되었습니다.
+
+이 성능 개선은 여전히 클랩 내에서 많은 분들이 고민해주고 계시고 개선이 될 예정입니다.
+
+## 마무리하며
+
+추후에 다국어 관련해서 공유드릴 내용이 더 생기면 공유드릴수 있도록 하겠습니다.
+
+참고로 저희 클랩에서 클라이언트 개발자 채용을 진행중입니다. 이 글을 읽고 같이 다국어 작업 개선을 하고 싶으신 개발자분들은 지원해주시면 감사하겠습니다.
 
-위 방식을 사용하면서 불편한 점이나 변경된 내용이 있으면 해당 글에 내용을 추가하도록 하겠습니다.
+[클랩(CLAP) 프론트 엔드(React) 개발자 채용 사이트](https://dwhale.career.greetinghr.com/o/114732)