Transpiler, “사용”말고 “활용”하기
강현구 토스 · 토스 기술 블로그
AI 핵심 요약
토스뱅크는 클릭 로깅을 위해 각 요소에 `data-click-log`를 직접 붙였지만, 반복 작업과 오타로 로그가 누락될 수 있었습니다. 이를 해결하기 위해 `onClick`, `onTouchStart` 등 지정한 이벤트 핸들러가 있는 JSX 요소를 clickable하다고 정의하고, Babel·SWC 플러그인으로 해당 요소에 속성을 자동 주입했습니다. 기존의 이벤트 캡처링 기반 로깅은 유지하면서 개발자는 비즈니스 로직에 집중하고, 서비스 전반에서 일관된 클릭 로그를 남길 수 있게 됐습니다. 반복적이고 규칙적인 코드 수정이 휴먼 에러를 낳는다면 transpiler를 개발 경험 개선 도구로 활용할 수 있다는 점을 보여줍니다.
- 반복적이고 규칙적인 코드 변경은 transpiler로 자동화할 수 있는지 살펴보세요.
- Babel 플러그인의 Visitor에서 JSX 노드를 순회하고 조건에 맞는 속성을 추가할 수 있습니다.
- SWC와 Babel은 같은 변환 로직을 각각의 플러그인 방식으로 구현할 수 있습니다.
- 자동 로깅 조건은 이벤트 핸들러의 존재 여부처럼 코드에서 판별 가능한 기준으로 정의하세요.
소개
매일 “사용”만 하는 transpiler, 토스뱅크에서는 한 단계 더 잘 “활용”해 보기로 했어요. 오늘은 transpiler로 로깅 과정을 개선한 사례를 소개 드릴게요.
비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 24 - Yarn Plugin으로 우아하게 자동 로깅하기
컨퍼런스 SLASH
수많은 사용자와 서비스로부터 만들어지는 로그, 어떻게 관리하면 좋을까요? Yarn을 활용하여 속도와 정확성, 개발자 경험까지 모두 잡은 방법을 소개합니다. 전성 / 토스 Frontend Platform Engineer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #frontend #yarn #yarnplugin 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는 모든 개인...
프론트엔드 개발 도구
문서 토스 프론트엔드 챕터
무엇이든 물어보세요 (feat. 테스트 코드, ESLint Rule) | EP.10 캠프파이어 특집 하편
문서 신지호
브라우저용 번들링 플러그인, 직접 만들었어요
문서 전성
ESLint와 AST로 코드 퀄리티 높이기
문서 박지우