와플카드 서비스가 궁금하다면!
와플카드 서비스 둘러보기 : https://waffle-card.com/
와플카드 깃허브 둘러보기 : https://github.com/waffle-card
와플카드를 개발하면서 네트워크 요청은 axios를 활용하였다. fetch를 사용하지 않고 axios를 사용한 이유는 아래와 같은 장점들 때문이다.
가장 편리하고 유용하다고 생각한 기능은 인터셉터의 기능이었다. 인터셉터의 기능을 활용하면 네트워크 요청을 하는 컴포넌트에서 응답을 파싱하는 번거로운 작업을 네트워크 요청 모듈에서 해결할 수 있다.
api 네트워크 요청의 에러 응답은 아래와 같은 구조라고 가정해보자.
// sucess
{
status: number;
data : {...};
...
}
// error
{
status: number;
message: String;
}
그리고 아래 와플카드의 네트워크 요청의 모듈 예시를 보자.
// 에러 파싱 함수 예시
const convertErrorResponse = (response) => {
return {
status: response.status ?? 500,
message: response.data.message ?? '알 수 없는 에러가 발생했습니다.',
};
};
// 응답 데이터 파싱
const convertSucessResponse = (response) => {
return {
status: response.status ?? 500,
data: response.data, // 구조에 따라 구조분해
};
}
// 인터셉터를 활용하여 요청과 응답을 가로채어 파싱처리
const setInterceptors = (instance: AxiosInstance) => {
instance.interceptors.request.use(
config => {
config.headers = {
// 생략
...config.headers,
};
return config;
},
error => Promise.reject(convertErrorResponse(error.response)), // 에러 파싱
);
instance.interceptors.response.use(
response => {
return parseResponse(response); // 응답 파싱
},
error => Promise.reject(convertErrorResponse(error.response)), // 에러 파싱
);
return instance;
};
// 인스턴스 생성 및 config 설정
const createInstance = () => {
const instance = axios.create({
baseURL: process.env.REACT_APP_API_END_POINT,
timeout: 5000,
});
return setInterceptors(instance);
};
export const request = createInstance(); // request로 모듈 내보내기
// in 유저 관련 네트워크 요청 모듈
export const userApi = {
login: userInfo => request.post('/auth/login', userInfo),
...
}
위 코드를 보면 인스턴스를 활용하여 반복되는 설정을 하나의 인스턴스로 만들어서 재사용할 수 있는것을 확인할 수 있다. 그리고 인터셉터를 활용하여 응답과 에러를 파싱하여 리턴하도록 설정할 수 있다.
결과적으로 axios 모듈을 사용하는 측에서는 아래와 같이 별다른 파싱없이 응답 데이터를 편리하게 사용할 수 있고 코드를 훨씬 간결하게 구성할 수 있었다.
try {
const user = await userApi.login(userInfo);
setUser(user); // 간편하게 데이터를 바로 활용
} catch (error) {
alert(error.message); // 에러 메세지를 편리하게 활용
}