토스뱅크에서 Transpiler를 활용하여 로깅을 개선한 사례를 소개합니다.

Transpiler는 코드를 변환해 다양한 브라우저 호환성을 유지하는 도구입니다. 토스뱅크는 유저 활동 데이터를 수집하는 로깅 과정에서, 기존에는 수동으로 DOM에 data 속성을 추가하는 방식을 사용했습니다. 그러나 실수로 로그를 누락하는 위험 등의 문제가 있어서 Transpiler를 활용하여 자동으로 data attribute를 주입하는 방식으로 개선했습니다.

토스뱅크는 Babel과 SWC용 플러그인을 만들어 클릭 이벤트 핸들러가 있는 요소에 자동으로 data-click-log 속성을 추가하도록 했습니다. 이를 통해 개발자가 비즈니스 로직에만 집중할 수 있게 되었고, 로깅의 일관성을 보장할 수 있었습니다.

토스뱅크는 로깅뿐만 아니라 다국어 처리에도 Transpiler를 활용하고 있다고 합니다. Transpiler를 문법 변환 도구로만 생각하고 있었는데, 로깅 자동화에 Transpiler를 활용한 점이 흥미로웠습니다.

https://toss.tech/article/27750