트랜스파일(혹은 컴파일)은 코드를 다른 형태로 변환하는 과정을 말합니다. 예를 들어 JavaScript 코드가 ES7로 작성되었더라도, 실제 운영 환경에서는 ES5로 트랜스파일되어 동작할 수 있는데요.

토스에서는 이 트랜스파일을 이용해서 로깅 과정을 자동화 하였습니다.

사실 개발자 입장에서 로깅은 매우 귀찮은 존재인데요. 코드에 로깅을 추가하면 복잡해지고 가독성이 떨어지기 때문입니다. 하지만, 비즈니스적으로는 매우 중요한 활동이 바로 이 로깅인데요. 사용자 클릭, 페이지 뷰 등 다양한 사용자 활동에 대한 데이터를 수집해야만 비즈니스 방향을 제대로 설정할 수 있기 대문입니다.

따라서 로깅은 개발 경험을 해치지 않으면서도 효율적으로 구현 되는게 중요한데요.

토스에서는 어떻게 트랜스파일을 이용해서 로깅 코드 입력없이 자동으로 로깅 기능을 구현했을까요?

기존 토스에서는 캡처링 방식과 데이터 속성을 이용하여 로깅을 자동화 했었습니다.

그렇지만 데이터 속성을 입력하는 번거로움이 있었고, 이런 번거로움을 해결하기 위해 클릭 가능한 요소 즉 ‘onClick, ‘onTouchStart’ 같은 속성이 있는 JSX 요소에 자동으로 data-click-log 라는 로깅을 해주는 속성을 트랜스파일을 이용해서 넣어주었습니다.

이벤트버블링, 데이터속성 그리고 트랜스파일 플러그인 을 이용해 로깅 이라는 번거로운 작업을 자동화 하다니, 정말 놀랍네요.

https://toss.tech/article/27750