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

 

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

📝 모듈화

• 멘토님 코드: initInstance 함수를 통해 axios 인스턴스 생성 로직을 캡슐화하여 재사용성을 높였다. 이 함수는 AxiosRequestConfig 타입의 객체를 인자로 받아, 기본 설정과 함께 새로운 Axios 인스턴스를 생성하고 반환한다. 이렇게 하면 필요에 따라 다른 설정(예: baseURL, headers, timeout)을 가진 여러 Axios 인스턴스를 쉽게 생성하고 관리할 수 있다.

import { AxiosInstance, AxiosRequestConfig } from 'axios';
import axios from 'axios';

const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
  const instance = axios.create({
    timeout: 5000,
    ...config,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      ...config.headers,
    },
  });
  return instance;
};

export const fetchInstance = initInstance({
  baseURL: 'https://react-gift-mock-api-sugoring.vercel.app/api',
});

---

• 나의 코드: 단순히 axios.create를 사용하여 단일 Axios 인스턴스를 생성했다. 이는 간단한 프로젝트에서는 문제가 되지 않지만, 여러 API 엔드포인트를 사용하거나 설정을 변경해야 하는 경우에는 유연성이 떨어진다. 또한, 코드 중복이 발생할 가능성이 높아 유지보수가 어려워질 수 있다.

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://react-gift-mock-api-sugoring.vercel.app/',
  headers: {
    'Content-Type': 'application/json',
  },
});

export default axiosInstance;

 

📝 타임아웃 설정

• 멘토님 코드: timeout: 5000 옵션을 설정하여 API 요청 시간이 5초를 초과하면 자동으로 요청을 취소한다. 이는 서버 응답 지연 등 예상치 못한 상황에서도 안정적으로 동작하도록 돕는다.

timeout: 5000, // 5초

---

• 나의 코드: 타임아웃 설정이 없기 때문에, API 요청이 지연되는 경우 저하될 수 있다.

타임아웃 설정 없음

 

📝 React Query 활용

• 멘토님 코드: React Query를 사용하여 데이터 fetching 로직을 효율적으로 관리한다. React Query는 데이터 캐싱, 재요청, 네트워크 상태에 따른 자동 재요청 등 다양한 기능을 제공한다.

import { QueryClient } from '@tanstack/react-query';

export const queryClient = new QueryClient({
  // ... React Query 설정
});

---

• 나의 코드: React Query를 사용하지 않아 데이터 fetching 로직이 복잡하고, 데이터 캐싱이나 재요청 기능을 직접 구현해야 하는 어려움이 있었다.

React Query 사용 안 함

 

📝 오류 처리

• 멘토님 코드: React Query의 retry 옵션을 활용하여 API 요청 실패 시 자동으로 재시도하는 기능을 사용했다.

React Query의 retry 기능 활용

---

• 나의 코드: 오류 처리 로직이 전혀 없었기 때문에, API 요청 실패 시 사용자에게 적절한 피드백을 제공할 수 없다. 응답 상태 코드가 400 이상인 경우 에러 메시지를 출력하고, 네트워크 오류가 발생한 경우 재시도 로직을 구현하는 등의 처리를 할 수 있다.

오류 처리 로직 없음

 

📝 Daily Scrum

• 개인 일정으로 참여하지 못하였다.
• 지난 PR 리뷰 회고

 

😋 Today 회고

• 3주차 과제를 진행하면서 Axios와 React Query를 사용하는 데 어려움을 겪었다. 특히 Axios 인스턴스 관리, API 요청 에러 처리, 데이터 fetching 로직을 효율적으로 만드는 부분에서 부족함을 느꼈다. 멘토님의 코드는 이런 문제들을 해결하는 좋은 예시였다. 멘토님의 코드를 분석하고 내 코드와 비교하면서 Axios와 React Query에 대한 이해도를 높이고, 실제 프로젝트에 바로 적용할 수 있는 기술들을 배울 수 있었다.

 

➡️ 참고 링크

https://velog.io/@kandy1002/React-Query-%ED%91%B9-%EC%B0%8D%EC%96%B4%EB%A8%B9%EA%B8%B0

[React-Query] React-Query 개념잡기