에러 메시지 피드백(alert, toast 유형)에 lodash debounce 적용 사례

개요

• react axios 공통화 작업(interceptor 등)을 하던 중,
  에러 메시지 알림에 debounce 처리를 해야 하는 요건이 발생.

소스

• axios-settings.ts (커스텀 파일)

  /**
  * axios 기본설정
  */
  const axiosOpts = {
  // timeout: 5000,
  // headers: {
  //   "Content-Type": "application/json",
  // },
  };
  //
  export const ax = Axios.create(axiosOpts);
  //
  /**
  * axios response interceptor
  */
  ax.interceptors.response.use(
      (response: any) => {
      // TODO: 응답에 따른 예외처리
      return response;
      },
      (error: any) => {
      showErrNoti(error);
      return Promise.reject(error);
      },
  );
  //
  /**
  * axios error 를 인수로 받아서 noti bar 를 출력한다.
  */
  const showErrNoti = (error: any) => {
      // 네트워크 에러 (서버 응답 없음 등)의 경우에는 error 객체에 response 가 존재하지 않음.
      const er = error.response;
      const httpCode = er ? `${error.response.status}` : '';
      processError(httpCode);
  }
  //
  /**
  * axios error 에 대한 후처리 중, debounce를 걸어야 하는 부분을 별도로 래핑한 것
  *  - debounceMillis 동안에는 동일한 메시지피드백을 연속적으로 하지 않는다.
  */
  const processError = debounce((httpCode: any) => {
          alert(`[${httpCode}] error !!`);
      },
      debounceMillis, 
      { leading: true, trailing: false }  
  );

참고

• debounce의 세 번째 인수
  • leading: true
    • 기본적으로 debounce는 interval이 다 지나야 한 번 내용을 호출하는데,
      나는 에러가 발생하자마자 알림을 띄워야 했기 때문에 이 옵션을 주었다.
  • trailing: false
    • leading: true로 초기 시점 문제는 해결했는데,
      interval이 끝날 때 무조건 내용을 한 번 더 호출하는 문제가 있었다.
      이 옵션을 주어 해결된 것으로 보임.