chore: Axios 추가

[bytrustu]

작업 주제

• Axios 추가 #11

작업 내용(어떤 부분을 리뷰어가 집중해서 봐야할까요?)

• Axios 모듈 추가
• interceptor를 활용한 에러 핸들링
  feat: 데이터 API 요청 처리 #9 (comment)

관련 Docs

• https://axios-http.com/kr/docs/interceptors

추가 코멘트

• 마지막 작업으로 fetch API 대신에 axios를 활용하도록 추가했습니다.

체크리스트(PR 올리기 전 아래의 내용을 확인해주세요.)

• base, compare branch가 적절하게 선택되었나요?
• 로컬 환경에서 충분히 테스트 하셨나요?

리뷰 규칙

• P1: 꼭/적극적 반영해 주세요 (Request changes)
• P2: 웬만하면 반영해 주세요 (Comment)
• P3: 반영해도 좋고 넘어가도 좋습니다 (Approve)

[leeyun1533]

P2: handlerErrorResponse 라는 함수에서 처리하시면 어떨까요?
그리고, 만약에 axios에러에서 response값이 없는 에러가 발생하게 된다면 전체 앱이 뻗을 수도 있을 것 같아요.
옵셔널 체이닝으로 관련 에러 방지 해주시면 좋을 것 같아요

[bytrustu]

export const handleErrorResponse = (error) => {
  if (error instanceof CustomError) {
    console.log('CustomError: ', error.name, error.message);
    return;
  }
  console.log('Error: ', error?.message);
};

리뷰 주신 내용으로 handlerErrorResponse 함수 구현해보았습니다.

[leeyun1533]

P3: 이런느낌으로 에러를 확장해서 쓰실 수 있어요! 추후에 센트리 설계하실때 입맛에 맞게 변경하실 수 있을거에요

class CustomError extends Error {
  constructor(message: string) {
    super(message);
    this.name = 'SomeThing Error';
  }
}

[bytrustu]

CustomError는 추가해보았는데, 아직 센트리를 반영하면서 어떤식으로 변경되는지는 감이 잘 오질 않네요.
센트리를 반영해보면서 더 고민해보도록 하겠습니다! 🙂

[bytrustu]

리뷰 주신내용 모두 반영하여 Axios PR도 머지하도록 할게요.
toss-tech-router 프로젝트 리뷰 해주셔서 감사합니다! 🙇‍♂️