끝나지 않은 번역 자동화 프로젝트....! 디벨롭해서 가져왔다..!

이 글을 먼저 읽기 전에 아래 글을 먼저 읽고 오시는 걸 추천드립니다..!

vue-i18n-extract 활용한 번역 자동화하기

프로젝트를 할 때마다 번역하는 일이 너무 귀찮아서, 직접 번역을 해주는 스크립트를 짰다.

그리고 팀 내에서 일주일에 한 번씩 진행하는 기술 위클리에서 내가 만든 스크립트를 공유하게 됐다. 왜 만들었는지, 번역이 얼마나 귀찮은 작업인지(한 번이라도 나와 같은 서비스의 코드를 만져본 팀원이라면 다 알 테니까..!) 그래서 이게 얼마나 획기적인지 솔직히 입이 근질근질 거렸기 때문에 남들 앞에서 뭔가 소개하는 건 부끄럽지만 용기내서 발표를 했다.

사실 나는 이 스크립트를 프로젝트에 넣을 생각은 없었다. 파일을 읽고 다시 쓰는 것도 근데 생각보다 반응이 너무 좋았다.
(내 생각보다 더 고통을 받고 있었을지도..?)
팀원들이 우리 프로젝트에 해당 스크립트를 포함해서 다른 사람들도 쓸 수 있었으면 좋겠다고 했다.

그래서 디벨롭이 시작됐다. 😇

TrobleShooting

1. 개인적으로 번역해야 하는 파일의 경로를 다 알고 있는 것도 아니고, 그렇다고 IDE에서 매번 상대 경로를 복사해서 스크립트에 넣어서 돌리는 건 너무 귀찮고 불편하다고 생각했다. 그래서 사용자(개발자)가 파일을 쉽게 선택할 수 있게끔 node 환경에서 선택할 수 있도록 inquirer 라이브러리를 활용했다. inquirer 객체의 prompt 메소드를 사용하면 사용자 인풋을 받을 수 있는데 inquirer-directory 라고 기본 타입이 아닌 directory 타입을 주입해서 사용할 수 있는 관련 라이브러리가 있어 처음에는 이걸 활용해서 디렉토리를 탐색해 파일을 찾으려고 했다. 근데 막상 사용해보니 생각보다 파일이 제대로 디텍팅이 안 됐다. (분명 해당 디렉토리 하위에 파일이 있는데도 목록에 제대로 안 뜨는 경우가 꽤 많았다.) 그래서 고민을 하다가 fs 모듈의 isDirectory라는 메소드를 활용해 선택한 위치가 디렉토리인지 파일인지 확인해서 파일이면 탐색을 멈추고 파일 경로를 만들어 vueI18nExtract 객체에 넘기는 방식으로 파일 탐색을 쉽게 할 수 있도록 interactive UI를 하나 만들었다.

2. 보통 프론트의 서비스 구조는 src 디렉토리에 거의 모든 소스코드가 들어있는 경우가 많다. (우리 회사도 그렇다.) 그래서 vueI18nExtract이 src 하위의 vue 파일과 ts 파일을 전체 검사해서 missingKeys를 검사하는 시간이 얼마나 얼마나 걸리나 봤는데 정말 얼마 안 걸려서 husky로 pre-push hook을 걸어야겠다고 생각했다. 원격 레포지토리에 푸시하기 전에 번역 검사를 가볍게 해주면 혹시 모를 휴먼 에러를 줄이기에 충분하다는 생각이 들었다.

3. 현재 내가 주로 담당하고 있는 회사 프로젝트는 모노레포로 구성되어 있다. 원래 이 번역 헬퍼 스크립트는 해당 모노레포에 포함된 세 개의 프로젝트 중 하나의 프로젝트 하위에 위치하고 있었는데 다른 팀원의 요청으로 이를 모노레포 하위의 하나의 패키지로 빼서 실행하는 서비스에서 필요할 때 가져와서 실행할 수 있는 패키지로 만들어 줄 것을 요청했다.

   https://docs.npmjs.com/cli/v10/configuring-npm/package-json#bin

package를 만들어 본 적이 없던 나였기에 bin 파일에 대해 이번에 작업을 하면서 처음 알게 되었다. package.json 에 bin에 명시를 해야 해당 패키지가 비로소 npm과 같은 패키지 관리자가 어떤 파일을 실행해야 될 지 알게 되는 것이었다..! 그래서 ts로 작업했던 3개의 파일을 babel을 가지고 js 파일로 만든 다음 bin 파일에 추가해 각각의 서비스 내의 cli 스크립트로 실행시킬 수 있도록 만들었다.

이번에 작업하면서 새롭게 안 사실인데, tsc로 .ts 모듈을 .js로 모듈로 트랜스파일링하면 .ts 파일 내에서 import 하고 있는 다른 모듈의 경로가 알아서 .js로 바뀔 줄 알았는데 전혀 아니었다. .ts로 선언하면 tsc 트랜스파일링 해도 여전히 /~~~.ts 로 남게 되고 결국 모듈의 위치를 제대로 못 찾는다는 걸 알게됐다. 보통 ts 파일에서 경로 지정을 할 때 tsconfig.json에 baseUrl과 path를 설정하고 커스텀한 절대 경로를 많이들 사용할텐데 이 때 보통 파일 확장자는 명시하지 않기 때문에 빌드 결과물 역시 파일 확장자가 제대로 .js로 변환되지 않는다..! (OMG 🤪)

그래서 babel 플러그인들을 활용해 모듈 위치까지 제대로 트랜스파일링 해주었다.

1. 절대 경로로 설정된 모듈 위치를 상대 위치로 바꾼다. 
2. .ts로 명시된 위치를 .js로 변경한다. 

소감

일단 내가 다른 개발자들의 수고로움을 덜어줄 수 있는 작은 장치를 만들었다는 게 뿌듯했고, 개인적으로 재밌었다. 좀 더 편하게, 좀 더 쓰기 쉽게를 생각하다보니 조금씩 더 발전했던 것 같다. 앞으로도 이렇게 개발 편의성을 높여줄 수 있는 도구를 많이 만들어 일을 쉽게 해야지 :)

fin.