Transpiler를 활용한 로깅 자동화 사례

이 게시물은 토스뱅크에서 transpiler를 활용해 프론트엔드 로깅 과정을 개선한 사례를 소개합니다.

Transpiler와 로깅의 역할

• Transpiler는 JSX, TypeScript 코드를 브라우저가 이해하는 JavaScript로 변환하는 도구입니다.
• 기존 로깅은 data-click-log 속성을 수동으로 붙여야 했고, 실수로 누락될 위험이 있었습니다.

자동화 구현 방법

• SWC와 Babel용 플러그인을 만들어 클릭 가능한 요소에 자동으로 data-click-log 속성을 주입하도록 했습니다.
• 이로써 개발자는 로깅 코드를 생략하고 비즈니스 로직에 집중할 수 있게 되었습니다.

확장 가능성

• 앞으로 다국어 처리 등 다양한 분야에 transpiler 활용을 확대할 계획입니다.