반응형
⭕ 카카오테크캠퍼스 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
반응형
'프론트엔드 > 카카오테크캠퍼스 2기' 카테고리의 다른 글
카카오테크캠퍼스 2기 | STEP2 | 26일차(24-07-29) 회고 (81) | 2024.07.30 |
---|---|
카카오테크캠퍼스 2기 | STEP2 | 25일차(24-07-26) 회고 (80) | 2024.07.30 |
카카오테크캠퍼스 2기 | STEP2 | 24일차(24-07-25) 회고 (80) | 2024.07.30 |
카카오테크캠퍼스 2기 | STEP2 | 23일차(24-07-24) 회고 (80) | 2024.07.29 |
카카오테크캠퍼스 2기 | STEP2 | 22일차(24-07-23) 회고 (79) | 2024.07.24 |
카카오테크캠퍼스 2기 | STEP2 | 21일차(24-07-22) 회고 (94) | 2024.07.23 |
카카오테크캠퍼스 2기 | STEP2 | 20일차(24-07-19) 회고 (81) | 2024.07.23 |
카카오테크캠퍼스 2기 | STEP2 | 19일차(24-07-18) 회고 (80) | 2024.07.18 |