본문 바로가기
프론트엔드/카카오테크캠퍼스 2기

카카오테크캠퍼스 2기 | STEP2 | 27일차(24-07-30) 회고

by YUNI Heo 2024. 7. 30.
반응형

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 27일차(24-07-30) 회고

📝 에러 핸들링

  • 지난주 리뷰를 통해 서버에서 전달하는 에러 메시지를 활용하는 방법에 대해 고민하게 되었다. 기존에는 fetch를 사용하여 에러를 처리했지만, 서버에서 전달하는 에러 메시지를 활용하면 사용자에게 더 구체적이고 유용한 피드백을 제공할 수 있다는 점을 알게 되었다. 특히, axios를 사용하여 인터셉터를 통해 에러를 처리하는 방법이 더 효율적일 것이라는 피드백에 특히 집중했다.

fetch와 axios의 차이점

  • fetch는 브라우저 내장 API로서 가볍고 간편한 비동기 요청 처리 방법을 제공한다. 예를 들어, fetch를 사용하여 HTTP 요청을 보내는 코드는 다음과 같다.
fetch('<https://api.example.com/data>')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
    • 반면, axios는 더 많은 기능과 유연성을 제공하며, 특히 인터셉터를 통해 요청과 응답을 가로채서 추가 로직을 실행할 수 있는 기능을 제공한다. 이는 에러 처리를 일관성 있게 관리할 수 있는 장점을 가지고 있다.

axios 설정 및 인터셉터 적용

  • 먼저 axios 인스턴스를 생성하고 기본 설정을 정의한다.
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: '<https://api.example.com>',
  timeout: 1000,
});

 

  • 인터셉터는 모든 HTTP 응답을 가로채서 에러를 일관성 있게 처리할 수 있도록 도와준다. 인터셉터를 통해 에러 응답을 처리하는 코드를 추가한다.
axiosInstance.interceptors.response.use(
  response => response,
  error => {
    if (!error.response) {
      throw new Error('Network error');
    }

    const { status, data } = error.response;

    if (status === 403) {
      throw new Error(data.message || 'Invalid email or password');
    }

    throw new Error(data.message || 'An error occurred during login');
  }
);

비동기 요청 처리

  • 기존의 fetch 코드에서는 단순히 상태 코드만 확인했지만, axios로 전환하면서 더 상세한 에러 정보를 활용할 수 있게 되었다. axiosInstance를 사용하여 로그인 요청을 보내고, 에러가 발생하면 콘솔에 로그를 남기고 에러를 다시 던진다. 이렇게 하면 에러 처리가 일관성 있게 이루어진다.
export const login = async (credentials) => {
  try {
    const response = await axiosInstance.post('/login', credentials);
    return response.data;
  } catch (error) {
    console.error('Login failed', error);
    throw error;
  }
};

 

 

 

📝 Daily Scrum

  • 지난주 PR에 대한 리뷰 반영

😋 Today 회고

  • axios의 인터셉터를 사용하여 에러 메시지를 처리하는 방법을 이해하게 되었다. 이를 통해 반복적인 코드 작성을 줄이고, 에러 처리를 일관성 있게 관리할 수 있었다. 네트워크 오류나 인증 오류와 같은 다양한 상황에 대해 사용자에게 더 유용한 피드백을 제공할 수 있다는 점이 특히 좋았다.

➡️ 참고 링크

https://axios-http.com/kr/docs/handling_errors

 

에러 핸들링 | Axios Docs

에러 핸들링 axios.get('/user/12345') .catch(function (error) { if (error.response) { console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { console.log(error.request); } e

axios-http.com

https://velog.io/@bokjunwoo/Axios-%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0%EC%97%90%EC%84%9C-%EC%97%90%EB%9F%AC-%ED%95%B8%EB%93%A4%EB%A7%81%ED%95%98%EA%B8%B0

 

Axios 인터셉터에서 에러 핸들링하기

이번에는 Axios 인터셉터를 사용하여 에러를 핸들링하는 방법

velog.io

 

 

 

반응형