프론트의 로깅은 무엇일까? 로깅을 알아보자

로깅

로깅 아키텍쳐

• 로깅이란?
• 로깅이 필요한 이유
• 로깅 타겟
• 로깅 분석 도구
• 로그 코드 넣기
• 마무리

로깅이란?

백엔드에서는 시스템 에러와 같은 문제를 파악하기 위해서 사용하지만 프론트엔드에서는 사용자가 제품을 어떻게 사용하는지, 제품을 사용할 때 어떤 행동을 하는지 로그로 기록하고 분석해 비즈니스 측면으로 도움을 줄 수 있는 방법이다.

큰 단위로는 페이지에서 체류 시간 (active time)을 기록하거나
form의 버튼과 같은 컴포넌트 이벤트 발생에 대해서도 기록할 수 있습니다.

 

📊 로깅이 필요한 이유

유저의 경향성 분석을 통해 개선 방향성을 탐색하거나 유저 페르소나를 정의하는 등의 비즈니스적 활동을 겸하는 활동을 할 수 있습니다. 비즈니스적인 성격도 많이 가지고 있기 때문에 이 데이터를 이용해 기획팀이 개선 방향성을 도출하는 데 도움을 줄 수 있습니다.

 

🔭 로깅 타겟

로깅을 유저의 모든 활동에 대해서 적용한다면 필요 없는 데이터들이 쌓일 수 있을 것이고, 개발 인력에 따라 어느 범위까지 로깅할 지 결정하는 과정도 중요하다. 모든 데이터를 로깅하는 게 가장 좋은 방법일 수도 있지만 현실적인 선택지에서 고르는 게 좋다.

 

로깅 분석 도구

로깅 분석 도구는 시스템에서 생성된 로그 데이터를 수집, 저장, 분석하여 보안 위혐을 탐지하거나 사용자 활동 모니터링, 시스템 성능 개선 등에 활용하는 도구를 이야기합니다. 아래와 같은 도구들이 있습니다.

• ELK Stack(Elasticsearch, Logstash, Kibana) : 대규모 로그 데이터를 수집, 분석, 시각화하는 오픈 소스 도구
• Fluentd : 로그 데이터 수집기로서 클라우트 네이티브 환경에서 유연한 도구

로그 코드 넣기

로그가 일반적으로 포함하는 정보는 다음과 같다.

• FEATURE 정보
• PAGE 정보
• AT 발생 위치 정보
• TARGET 발생 컴포넌트 위치 정보
• ACTION 액션 발생 정보

코드는 토스 블로그 로그 포스팅을 참고했습니다.
[toss tech 링크]https://toss.tech/article/engineering-note-5

import { Button, useToaster } from '@tossteam/tds';
// ...

const REGISTER_CARD_SCREEN_LOG_ID = 123;
const REGISTER_CARD_CLICK_LOG_ID = 456;
const REGISTER_CARD_POPUP_LOG_ID = 789;

const PAGE_TITLE  = '카드 정보를 입력해주세요';

function RegisterCardPage() {
  // ...
  const toast = useToaster();
  const logger = useLogger();

  useEffect(() => {
    // 스크린 로그 요청
    logger.screen({
      logId: REGISTER_CARD_SCREEN_LOG_ID,
      params: { title: PAGE_TITLE } 
    });
  },[])

블로그 포스팅을 준비하기 전에는 로깅 구현 방법에 대해서 생각해 본 적은 없었는데, 러프하게 생각했던 방향과 비슷했다. 유저의 활동에 대해 fetch 요청을 함께 싣어 보내는 것.

로그 아이디와 함께 파라미터로 타겟에 대한 관련 정보를 함께 보내주는 것이 기본적인 구조이다.

그런데 이런 구조에서는 결국에는 비즈니스 로직과 깊게 얽히기 때문에 많은 프론트엔드 개발자들이 이벤트 로그 동작을 분리하고 싶어하는 것 같다.

interface Props extends ComponentProps<typeof TdsButton> {
  logParams?: LogPayloadParameters;
}

export const Button = forwardRef(function Button({ logParams, ...props }: Props, ref: ForwardedRef<any>) {
  return (
    <LogClick params={{ ...logParams, button: getInnerTextOfReactNode(props.children) }} component="button">
      <TdsButton ref={ref} {...props} />
    </LogClick>
  );
});

그래서 이런 식으로 로그 데코레이터를 붙이거나, pub-sub 패턴을 이용해 기존 로직과 분리해 사용하는 방법을 쓰려고 많이 노력하는 것 같다.

마무리

백엔드와 협업하는 프로젝트에서 백엔드에 어떻게 부하를 줄 수 있을지에 대해 고민해보다 보니 (모두들 데이터를 받아보는 걸 선호할 테니까) 캐시 공부 vs 로그 공부 중에서 로그 공부를 선택하게 되었는데, 로그 공부는 오늘 처음이라 이 포스팅을 수정하거나 추가 포스팅을 작성하면서 로그에 대해 더 공부해보는 것이 좋을 것 같다.

프론트엔드와 로그는 뗄 수 없는 관계라고 하니까. 여기저기 포스팅 찾아봤는데 고급화된 패턴이 정말 많았어서 어떤 걸 선택해야 할지 어떻게 공부해야 할 지 선택하는 것도 중요하게 느껴졌다.