카카오테크캠퍼스 2기 | STEP2 | 27일차(24-07-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

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 인터셉터에서 에러 핸들링하기