프론트엔드 로깅 신경 안 쓰기
최진영 토스 · 토스 기술 블로그
AI 핵심 요약
토스페이먼츠 프론트엔드 챕터는 logId를 매번 찾아 코드에 넣고, 비즈니스 로직 곳곳에 로깅 코드를 섞어야 하는 불편을 개선했다. 서비스명과 라우트, 로그 유형 등을 조합해 logName을 자동 생성하고, LogScreen·LogClick 같은 선언적 컴포넌트로 로깅을 비즈니스 로직에서 분리했다. React Context로 상위 영역의 로그 파라미터를 하위에 전달하고, TDS 컴포넌트에 로깅을 결합해 개발자가 별도 로그 코드를 작성하지 않아도 되도록 했다. 다만 서비스별 파라미터와 화면 로그는 여전히 직접 설정해야 하고 커스텀 TDS에는 적용하기 어려워, 로깅을 완전히 신경 쓰지 않는 단계에는 이르지 못했다.
- 문서에서 logId를 복사해 코드에 넣는 대신 서비스명·라우트·로그 유형 등을 조합해 logName을 자동 생성할 수 있다.
- 로깅 컴포넌트로 이벤트 기록을 선언적으로 분리하면 비즈니스 로직의 흐름을 더 쉽게 읽을 수 있다.
- React Context를 활용하면 상위 영역의 로그 파라미터를 하위 컴포넌트에 전달하면서 prop drilling을 피할 수 있다.
- 디자인 시스템 컴포넌트에 로깅을 데코레이터처럼 결합하면 버튼 텍스트 같은 UI 정보를 자동 수집하고 중복 코드를 줄일 수 있다.
- 서비스별 파라미터, 화면 로그 추가, 커스텀 TDS 지원은 여전히 개발자가 처리해야 하는 한계로 남았다.
소개
프론트엔드 개발자라면 한 번쯤 고민해봤을 클라이언트 로깅 개선 과정을 공유합니다.
비슷한 학습 자료
문서 토스 프론트엔드 챕터
무엇이든 물어보세요 (feat. 프론트엔드 코드, 디렉토리 관리) | EP.10 캠프파이어 특집 상편
문서 토스 프론트엔드 챕터
프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다! | EP.9 모닥불
문서 토스 프론트엔드 챕터
프론트엔드 개발에서 Next.js, 꼭 써야 할까? | EP.6 모닥불
문서 토스 프론트엔드 챕터
프론트엔드 개발에서 테스트 자동화, 꼭 해야 할까? | EP.3 모닥불
문서 박서진
선언적인 코드 작성하기
문서 박서진