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

 

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

📝 API 요청 - axios

• 초기 API 연동 단계에서는 각 요청마다 base URL과 헤더를 일일이 명시했다. 특히 여러 API 엔드포인트를 사용하는 경우 코드 중복이 심했고, 인증 토큰을 수동으로 관리하면서 실수 가능성과 코드 복잡도가 높아졌다.

// 초기 코드 (개선 전)
axios.get('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json',
  },
});

---

해결 방안 1: axios 인스턴스

• axios 인스턴스를 생성하여 base URL과 공통 헤더를 통합 관리했다. 이를 통해 코드 중복을 제거하고 설정 변경 시 단일 지점에서 관리할 수 있도록 개선했다.

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
  },
});

axiosInstance.get('/data'); // 간결하고 명확해진 요청 방식

---

해결 방안 2: Axios 인터셉터 활용

• 인증 토큰 관리의 어려움을 해결하기 위해 axios 인터셉터를 구현했다. 요청 인터셉터를 통해 토큰을 자동으로 추가하고, 응답 인터셉터를 통해 인증 오류 시 로그인 페이지로 리다이렉트하는 등 예외 상황에 대한 처리 로직을 구현했다.

axiosInstance.interceptors.request.use(config => {
  // ... (토큰 추가 로직)
});

axiosInstance.interceptors.response.use(
  response => response,
  error => {
    // ... (오류 처리 로직)
  }
);

 

📝 Daily Scrum 

• STEP2 마무리
• 내일 PR 할 수 있도록, STEP3을 진행할 계획

 

😋 Today 회고

• 처음엔 JavaScript 기본 라이브러리인 Fetch를 썼다. 간단한 요청에는 문제없었지만, 프로젝트가 커지면서 오류 처리, 요청 취소 등 기능이 부족함을 느꼈다. 특히 React 환경에서 서버 상태 관리가 힘들었다.
• 이를 해결하기 위해 Axios를 도입했다. Axios는 다양한 기능과 편리한 인터페이스 덕분에 복잡한 요청도 효율적으로 처리할 수 있었다. React Query를 함께 사용하면서 서버 상태 관리 문제도 해결했다. React Query의 데이터 캐싱, 자동 재요청 등 기능은 큰 도움이 되었다.
• Fetch는 간단한 프로젝트에는 괜찮지만, 복잡한 요구사항에는 Axios와 React Query 조합이 더 효과적임을 알게 됐다. React Query 덕분에 서버 상태 관리가 쉬워졌고, 데이터 일관성을 유지하며 사용자 경험도 향상할 수 있었다.
• 다만 React Query는 학습 곡선이 높아 어려움이 있었다. 라이브러리 개념과 사용법을 익히는 데 시간이 걸렸지만, 그만큼 효율적인 서버 상태 관리를 구현할 수 있었다.

 

➡️ 참고 링크

https://velog.io/@dusunax/AXIOS%EB%9E%80-feat.-React

AXIOS란? (feat. Fetch API)

https://velog.io/@yrats/Axios

Axios