Transpiler, “사용”말고 “활용”하기

토스뱅크는 클릭 로깅을 위해 각 요소에 `data-click-log`를 직접 붙였지만, 반복 작업과 오타로 로그가 누락될 수 있었습니다. 이를 해결하기 위해 `onClick`, `onTouchStart` 등 지정한 이벤트 핸들러가 있는 JSX 요소를 clickable하다고 정의하고, Babel·SWC 플러그인으로 해당 요소에 속성을 자동 주입했습니다. 기존의 이벤트 캡처링 기반 로깅은 유지하면서 개발자는 비즈니스 로직에 집중하고, 서비스 전반에서 일관된 클릭 로그를 남길 수 있게 됐습니다. 반복적이고 규칙적인 코드 수정이 휴먼 에러를 낳는다면 transpiler를 개발 경험 개선 도구로 활용할 수 있다는 점을 보여줍니다.

• 반복적이고 규칙적인 코드 변경은 transpiler로 자동화할 수 있는지 살펴보세요.
• Babel 플러그인의 Visitor에서 JSX 노드를 순회하고 조건에 맞는 속성을 추가할 수 있습니다.
• SWC와 Babel은 같은 변환 로직을 각각의 플러그인 방식으로 구현할 수 있습니다.
• 자동 로깅 조건은 이벤트 핸들러의 존재 여부처럼 코드에서 판별 가능한 기준으로 정의하세요.