[토스] Transpiler, “사용”말고 “활용”하기

🗣️ 이벤트 버블링과 캡쳐링에 대해서 알고 계시나요?

~~모던 자바스크립트 딥다이브에서 봤었는데;;~~
버블링은 버블 정렬처럼 bubble up이라는 말에서 유추할 수 있듯이 어떤 이벤트가 아래에서 위로 전이되는 거고,
캡쳐링은 반대로 위에서 아래로 전이되는 거 아니었나?

개념은 어느 정도 알고 있지만 실제 적용을 하는 경우로는 연결이 되지 않았었다.
이번 기회에 실제로 캡쳐링을 활용한 토스의 'Transpiler, “사용”말고 “활용”하기'가 좋은 예시인 거 같아서 알아보고자 한다.

법적 영역을 잘 모르는 입장에서 사용자의 일거수일투족을 로깅하는 건 동의하에만 가능할 거 같기 때문에 적용해 볼 기회가 있을지는 모르겠지만, 실제 사용 사례를 알아야 기억에 더 남을 거 같아서,
어떤 식으로 트랜스파일러와 이벤트 캡쳐링을 활용해서 로깅 과정 개선을 했는지 토스가 이 이벤트 캡쳐링을 활용해서 로깅을 자동화한 방법에 대해 살펴보고자 한다.

먼저 이전에 정리했던 이벤트 전파에 대한 글을 재방문해서 버블링/캡쳐링에 대해 살펴본 뒤, 토스의 글을 정리해 보자.

이벤트 전파 (event propagation)

이벤트 전파란, dom 트리 상에 존재하는 dom 요소 노드에서 발생하는 이벤트는 dom 트리를 통해 전파되는 것을 말한다.

다음 코드는 각 태그에 클릭 이벤트로 로그를 찍고 있는데, 이벤트 전파가 어떻게 발생하는지 살펴보자.

<body>
    <p>버블링 캡쳐링 이벤트 <button>버튼</button></p>
</body>

document.body.addEventListener('click',()=>{
    console.log('Handler for body');
});

document.querySelector('p').addEventListener('click',()=>{
    console.log('Handler for paragraph');
});

document.querySelector('button').addEventListener('click',()=>{
    console.log('Handler for button');
});

버튼을 클릭하면 어떤 일이 생길까?

👉 직접 해보기 https://1973072.playcode.io/

JavaScript Playground

Upgrade to Personal Prop plan to remove the introduction. The introduction appears once for every user.

1973072.playcode.io

먼저 생성된 이벤트 객체는 이벤트를 발생시킨 dom 요소인 이벤트 타깃을 중심으로 dom 트리를 통해 전파된다.

전파 단계는 3단계로 구분할 수 있는데, 캡쳐링/ 타깃 / 버블링으로 구성된다.

캡쳐링 단계에서는 이벤트가 dom 트리 최상단에서 하위 요소로 전파되고, 타깃 단계에서는 이벤트가 이벤트 타깃에 도달하여 실행하고,

버블링 단계에서는 이벤트가 하위 요소에서 상위 요소 방향으로 전파된다.

이렇게 이벤트 전파가 되는 현상을 염두하고 동작을 예측해 본다면

'Handler for paragraph'(캡쳐링) -> 'Handler for button'(타깃)->'Handler for body'(버블링) 순으로 출력될 것이다.

하지만 실제로 버튼을 클릭하면 다음과 같이 출력이 된다.

'Handler for button' -> 'Handler for paragraph' -> 'Handler for body'

이는 이벤트 리스너에 capture option을 특정( { capture: true } ) 하지 않았기 때문에 이벤트를 캡쳐링 단계에서 잡지 않는다.

따라서 button 요소를 클릭하면 캡쳐링 -> 타깃 -> 버블링 단계에 따라서

body 요소와 p 요소의 이벤트를 캡처만 하고 (실행 x), 타깃인 버튼 요소에서 이벤트가 실행되고,

버블링 단계에서 p요소와 body요소의 이벤트 순차적으로 실행된다.

캡쳐링 단계에서 이벤트 실행을 원한다면 다음과 같이 옵션을 추가해 보면

document.querySelector('p').addEventListener('click',()=>{
    console.log('Handler for paragraph');
}, { capture: true });

이번에는 출력 순서가 첫 예측대로 동작한다.

👉 직접 해보기 https://1973090.playcode.io/

Clone JavaScript Playground

Upgrade to Personal Prop plan to remove the introduction. The introduction appears once for every user.

1973090.playcode.io

하지만 때에 따라 이벤트 전파가 되지 않도록 하고 싶을 수도 있다. 그럴 때 event.stopPropagation 메서드를 활용할 수 있다.

다만 상위 요소에서 버블링이 필요한 상황을 아예 차단하기 때문에 사용에 주의를 해야 한다.

이벤트 위임 (event delegation)

이벤트 위임은 여러 개의 하위 dom 요소에 각각 이벤트 핸들러를 등록하는 대신

하나의 상위 dom 요소에 이벤트 핸들러를 등록하여 여러 요소를 한꺼번에 다룰 수 있도록 이벤트 전파를 활용한 이벤트 핸들링 패턴이다.

이제 data-click-log 속성이 있는 가장 근접한 요소를 클릭하도록 변경해 보자.

<body data-click-log="body">
    <p data-click-log="paragraph">
      버블링 캡쳐링 이벤트 <button data-click-log="button">버튼</button>
    </p>
</body>

<script>
  document.body.addEventListener(
      'click',
      event => {
        const logTarget = event.target.closest('[data-click-log]'); 
        if (logTarget) {
          console.log(`Handler for ${logTarget.getAttribute('data-click-log')}`);
        }
      },
      { capture: true }
    );
</script>

이렇게 이벤트 전파 속성을 활용해 단순 반복의 과정을 하나 덜 수 있다.

이번에는 토스의 글에서는 트랜스파일러를 활용해 data-click-log 속성을 자동으로 주입하는 방법에 대해 살펴보자.

토스: Transpiler를 활용한 로깅

트랜스파일러는 코드를 변환해 주는 도구다.

예를 들면, ES6를 ES5로 변환하거나 리액트의 JSX/TS를 브라우저가 이해할 수 있는 자바스크립트로 변환해 주는 역할을 해주고,

브라우저 호환성 등을 유지할 수 있도록 도와준다는 점에서, 개발자는 비즈니스 로직에 집중을 해줄 수 있다는 점에서 유용하다.

babel이나 swc가 대표적인 트랜스파일러에 해당되는데, 토스는 이 트랜스파일러의 특징을 살려 로깅 과정을 개선했다.

로깅을 설계하는 방식은 크게 두 가지로 생각해 볼 수 있다.

// 수동으로 로깅 함수 실행
<Button
  onClick={() => {
    log({ content: '다음' });
    handleClick();
  }}
>
  다음
</Button>

// 추상화된 로깅 컴포넌트 활용
<LoggingClick>
  <Button onClick={handleClick}>
    다음
  </Button>
</LoggingClick>

또는 위에서 다루었던 이벤트 캡쳐링과 data-attribute으로 로깅을 처리할 수도 있다.

<Button onClick={() => {}} data-click-log>
  다음
</Button>

// 클릭 시 click event 캡쳐링을 통해 인지하고, 
// 클릭 타깃에서 가장 근접한 data-click-log 속성을 지닌 DOM 찾고,
// dom의 text node를 파악하여 유저가 클릭한 컴포넌트의 정보를 다음과 같이 로깅한다.

{
  log_type: 'click',
  content: '다음',
}

하지만 위의 방식은 오타나 누락 실수에 취약하고 여러 프롭스가 전달되는 상황에서는 더욱더 취약해질 수밖에 없다.

그리고 반복/규칙적으로 코드를 변경해야 하는 지루한 작업도 업무 효율을 저하시킬 것이다.

<Button
  type="primary"
  variant="weak"
  size="large"
  data-cilck-log // 오타
  onClick={() => {}}
  disabled={false}
  loading={false}
  css={{ minWidth: 100, minHeight: 80 }}
>
  다음
</Button>

lint rule을 추가하거나 자동 완성 기능을 제공하는 방식으로 단순 실수를 줄일 수는 있지만,

이 방식은 비즈니스 로직과 직결된 코드랑 로깅 코드를 분리하지 않는다는 점에서 근본적인 문제를 해결할 수 없어 아쉽다는 문제가 여전히 있다.

clickable 한 요소에 data-click-log 속성을 자동으로 주입할 수 있다면? +𝛼 코드를 짤 필요가 없다면?

여기서 트랜스파일러의 역할이 빛을 낼 수 있다.

특정조건(Clickable 한 요소)에 따라 알맞게(data-click-log 속성 추가) 코드 변환하기에 transplier가 적합!

<Button onClick={() => {}}>
  다음
</Button>

// 위의 코드가 아래처럼 자동 변환되면 좋겠다!
<Button onClick={() => {}} data-click-log>
  다음
</Button>

토스는 다음과 같이 clickable (onClick, onChange, onTouchStart)와 같은 유저 클릭 반응 이벤트 핸들러를 규정하고,

해당 조건에 충족하는 SWC와 Babel용 플러그인을 만들었다.

const CLICK_EVENTS = ['onClick', 'onTouchStart', 'onChange', 'onMouseDown'];
const CLICK_LOG_ATTR = 'data-click-log';

function plugin({ types: t }: typeof babel): PluginObj {
  return {
    name: 'babel-plugin-tossbank-logger',
    visitor: {
      JSXOpeningElement(path) { // JSX 태그의 시작 요소들을 순회하며 실행할 콜백 정의
        const { node } = path;

		// 각 요소 순회하며 CLICK_EVENTS에 해당하는 clickable 이벤트 핸들러가 존재하는 지 체크
        const hasOnClickAttribute = node.attributes.some(attr => { 
          return CLICK_EVENTS.includes(attr.name.name);
        });
		// clickable 이벤트가 존재하면 CLICK_LOG_ATTR 주입!
        if (hasOnClickAttribute) {
          const dataClickLogAttribute = t.jSXAttribute(t.jSXIdentifier(CLICK_LOG_ATTR), null);

          node.attributes.push(dataClickLogAttribute);
        }
      },
    },
  };
}

Babel은 AST(추상 구문 트리)를 만들고, 각 플러그인에게 제공하여 각 노드들을 순회하며 처리할 수 있도록 인터페이스를 제공하고 있다.

이제 로깅 플러그인을 활용한다면 클릭 로깅을 코드에 추가할 필요 없이 비즈니스 로직만으로 코드를 작성할 수 있다.

<Button onClick={() => {}}>
  다음
</Button>

해당 방법으로는 관심사가 분리될 뿐만 아니라 누구든지 동일하게 로깅을 처리하도록 보장해 준다는 장점이 있다.

🍀 마치면서

오늘은 이벤트 위임(event delegation)과 트랜스파일러를 활용한 토스의 로깅 자동화 방법에 대해 살펴봤다.
이전에 이벤트 위임/전파에 대해 정리한 글이 있었는데, 오류를 발견!
책만 읽고 피상적으로 그럴 것이다~라고 생각했는데, 실제로 코드를 찍어보니 좀 다른 결과가 나왔었다.
이벤트 버블링/캡쳐링에 대해 가물가물 해질 때쯤, 이벤트 전파에 대해 알고 있는 것을 점검하고, 좋은 실제 사용 사례에 대해 다뤄 볼 수 있어서 더욱 기억에 남을 거 같다!

토스 글 댓글에 질문이 하나 있었는데, 답을 찾기 위해 이것저것 찾아보다가 리액트에서는 이벤트 핸들링 방식이 기존 dom과는 좀 다른 형태라는 걸 알게 되었는데, 다음에는 이 부분에 대해 더 살펴볼 거 같다.

리액트 이벤트 핸들러는 버블링 시 실행된다는 점을 보면 onClickCapture를 통해 따로 명시하지 않았기 때문에 버블링을 활용한 게 맞는 거 같다.

📚 References

https://github.com/Pyotato/fe_study/blob/main/modern_javascript_deep_dive/40_event.md

fe_study/modern_javascript_deep_dive/40_event.md at main · Pyotato/fe_study

📕 프론트엔드 공부를 하면서 끄적이는 이것 저것. Contribute to Pyotato/fe_study development by creating an account on GitHub.

github.com

https://toss.tech/article/27750

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

매일 “사용”만 하는 transpiler, 토스뱅크에서는 한 단계 더 잘 “활용”해 보기로 했어요. 오늘은 transpiler로 로깅 과정을 개선한 사례를 소개 드릴게요.

toss.tech

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

ko.javascript.info

'👩🏻‍💻 dev' 카테고리의 다른 글

[⚛️ React Conf 2024] 리액트 19에서 새로워진 것들 (What's new in React 19 \| Lydia Hallie) (1)	2024.09.24
[⚛️ react] synthetic event (ft. +17 비포&애프터) (0)	2024.08.16
[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(7) Sentry 설정 (0)	2024.08.15
[Nextjs Image] The request resource XX has type "image/svg+xml" but dangerouslyAllowSVG is disabled (0)	2024.08.12
[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(6) tanstack query 설정 (0)	2024.08.10

🥕 pyotato's dev farm

[토스] Transpiler, “사용”말고 “활용”하기

이벤트 전파 (event propagation)

이벤트 위임 (event delegation)

토스: Transpiler를 활용한 로깅

🍀 마치면서

📚 References

'👩🏻‍💻 dev' 카테고리의 다른 글

티스토리툴바

[토스] Transpiler, “사용”말고 “활용”하기

이벤트 전파 (event propagation)

이벤트 위임 (event delegation)

토스: Transpiler를 활용한 로깅

🍀 마치면서

📚 References

'👩🏻‍💻 dev' 카테고리의 다른 글

'👩🏻‍💻 dev' Related Articles

티스토리툴바