Fetch vs Axios & AxiosInstance 활용법

안현희·2024년 11월 22일

React

React를 배워보자!

목록 보기

21/30

1. Fetch와 Axios란?

1-1. Fetch란?

fetch는 브라우저 내장 함수로, 네트워크 요청을 보내는 데 사용됩니다.
Promise 기반으로 동작하며, 브라우저가 제공하는 표준 API입니다.
하지만 실무에서는 Fetch의 몇 가지 단점 때문에 보완 라이브러리를 사용하는 경우가 많습니다.

📌그런데 또 웃기게.. 요즘 Nextjs에서는 fetch사용이 권장됩니다.

Fetch의 특징

내장 API: 추가 설치 없이 바로 사용 가능.
Promise 기반: 비동기 처리를 지원하여 then, catch, async/await 문법 사용 가능.
응답 처리: 응답 데이터를 response.json() 또는 response.text()로 한 번 더 변환해야 함.
헤더 및 설정의 유연성: 요청 헤더, 메소드, 바디 등을 쉽게 설정할 수 있음.

Fetch의 응답 처리 흐름

1. HTTP 응답 상태 확인

fetch는 네트워크 요청의 성공 여부만을 기준으로 Promise를 resolve 또는 reject합니다.

성공 (resolve): 요청이 네트워크적으로 성공했다면, HTTP 상태 코드가 404나 500과 같은 에러 상태라 하더라도 Promise는 resolve 됩니다.
이 경우, 응답 객체의 response.ok 속성이 false로 설정됩니다.
실패 (reject): 네트워크 장애(예: 인터넷 연결 문제)나 요청 자체가 실패한 경우에만 Promise가 reject됩니다.

📌 따라서 HTTP 상태 코드로 에러를 판단하려면, 개발자가 수동으로 response.ok를 확인하고 적절한 처리를 해야 합니다.

설계 철학: 유연성과 낮은 수준의 제어 제공

fetch는 네트워크 요청 및 응답 처리를 더 유연하게 제어할 수 있도록 설계되었습니다. HTTP 상태 코드를 에러로 자동 처리하지 않음으로써, 개발자가 특정 상태 코드(예: 401 Unauthorized 또는 404 Not Found)에 대해 세부적인 로직을 작성할 수 있게 합니다.

출처: MDN

2. 응답 본문 처리

fetch의 응답 객체(response)는 메타데이터(상태 코드, 헤더 등)와 응답 본문 데이터를 포함하지만, 본문은 비동기 스트림 형태로 제공됩니다.

JSON 데이터: response.json()으로 변환
텍스트 데이터: response.text()로 변환
이외에도 Blob, FormData와 같은 형식으로 변환 가능합니다.

왜 이런식으로 되어있나요?

이를 통해 대용량 데이터를 더 효율적으로 다룰 수 있으며, 필요할 때만 본문 데이터를 읽도록 설계되었습니다.

다시 한번 정리! 이것만은 알고 갑시다!

fetch는 다음과 같은 철학에 기반해 설계되었습니다.

유연성과 제어 권한 제공
- HTTP 상태 코드로 요청 성공/실패를 자동으로 판단하지 않아, 개발자가 특정 상태 코드(예: 404 Not Found)나 조건에 대해 직접 로직을 작성할 수 있습니다.
- 이는 높은 추상화보다, 낮은 수준에서의 세밀한 제어를 가능하게 합니다.
비동기 스트림 기반 처리
- 응답 본문 데이터를 스트림 형태로 제공해, 데이터 크기에 관계없이 효율적으로 처리할 수 있도록 설계되었습니다.
- 필요할 때 데이터를 읽고 변환하도록 강제해, 메모리 효율성을 극대화합니다.

Fetch의 예제

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => {
    // HTTP 상태 코드 확인
    if (!response.ok) { // false
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json(); // 응답 데이터를 JSON으로 변환
  })
  .then((data) => console.log(data)) // 변환된 데이터를 사용
  .catch((error) => console.error('Error:', error));

1-2. Axios란?

axios는 Fetch의 단점을 보완한 HTTP 클라이언트 라이브러리입니다.
Promise기반으로 동작하며, 브라우저와 Node.js 환경 모두에서 사용할 수 있습니다.

Axios의 특징

자동 HTTP 상태 처리: HTTP 에러(404, 500 등)가 발생하면 자동으로 catch 블록으로 이동.
자동 JSON 변환: 응답 데이터를 추가 처리 없이 바로 사용할 수 있음.
요청/응답 인터셉터: 요청이나 응답 전에 로직을 추가하거나 데이터를 수정 가능.
CancelToken 지원: 네트워크 요청을 취소하는 기능 제공.
기본 설정 관리: baseURL, headers 등 반복적인 설정을 한 곳에서 관리 가능.

Axios의 응답 처리 흐름

axios는 Fetch와 달리 한 번의 요청으로 HTTP 상태 확인과 데이터 변환이 모두 가능합니다.

Axios의 예제

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then((response) => console.log(response.data)) // 응답 데이터를 바로 사용 가능
  .catch((error) => console.error('Error:', error));

2. Fetch와 Axios의 차이점

2-1. Response 처리 차이

특징	Fetch	Axios
HTTP 에러 처리	HTTP 상태 코드를 에러로 간주하지 않음, 수동으로 `response.ok` 확인 필요	HTTP 에러(404, 500 등)를 자동으로 `catch`로 처리
응답 데이터 변환	`.json()`이나 `.text()` 호출 필요	응답 데이터가 자동으로 JSON으로 변환
Promise 구조	두 단계로 나누어 처리해야 함 (`then` 또는 `await`로 HTTP 확인 → 데이터 변환)	한 번의 `then` 또는 `await` 호출로 상태 확인 및 데이터 사용 가능

Fetch vs Axios: 코드 비교

Fetch로 응답 처리

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => {
    if (!response.ok) { 
      throw new Error('HTTP Error');
    }
    return response.json(); // 전체 응답 객체
  })
  .then((data) => console.log(data))
  .catch((error) => console.error('Error:', error)); // JSON 데이터

Axios로 응답 처리

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then((response) => console.log(response.data)) // 상태 확인과 데이터 변환을 동시에 처리
  .catch((error) => console.error('Error:', error));

2-2. 실무에서의 Fetch와 Axios 사용 팁

간단한 요청: Fetch는 별도의 설치 없이 빠르게 사용할 수 있으므로 간단한 API 호출에 적합.
복잡한 요청: Axios는 인터셉터, 요청 취소, 기본 설정 관리 기능을 제공하므로 반복적이고 복잡한 API 호출에 적합.
Cross-Origin 요청: Axios는 Fetch보다 CORS에러를 처리하기 쉬움.
- 하지만 CORS는 궁극적으로는 결국 서버에서 처리를 해줘야 하는 경우가 더 많다!

3. AxiosInstance란?

3-1. AxiosInstance의 개념

AxiosInstance는 Axios 를 커스터마이징한 객체로, 반복적으로 설정해야 하는 요청 구성을 한 곳에서 관리할 수 있도록 도와줍니다.
이를 통해 API 호출 시 필요한 공통 설정(예: baseURL, headers, timeout)을 통합하고 코드 중복을 줄이며 유지보수를 쉽게 할 수 있습니다.

3-2. AxiosInstance의 필요성

반복 설정 제거:
- baseURL, headers, params 등 모든 요청에 동일하게 적용되는 설정을 한 번에 관리.
유지보수성 향상:
- 변경 사항을 한 곳에서만 수정하면 모든 요청에 반영.
코드 가독성 개선:
- API 요청 함수가 간결해지고, 주요 로직에만 집중 가능.

3-3. AxiosInstance 생성

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 기본 URL 설정
  timeout: 5000, // 요청 제한 시간 설정 (ms)
  headers: { 'Content-Type': 'application/json' }, // 공통 헤더 설정
});

export default axiosInstance;

baseURL: 모든 요청의 기본 경로.
timeout: 요청 시간 초과 시 실패하도록 설정.
headers: 공통적으로 적용할 요청 헤더.

3-4. AxiosInstance를 사용한 API 호출

import axiosInstance from './axiosInstance';

// 인기 영화 가져오기
export const fetchPopularMovies = async () => {
  const response = await axiosInstance.get('/movie/popular', {
    params: { api_key: import.meta.env.VITE_TMDB_KEY },
  });
  return response.data.results;
};

// 새로운 리뷰 작성하기 (POST 요청)
export const createReview = async (movieId, review) => {
  const response = await axiosInstance.post(`/movie/${movieId}/reviews`, review);
  return response.data;
};

개선된 점

API 호출마다 baseURL과 headers를 명시할 필요가 없습니다.
요청 URL과 주요 로직만 작성하여 코드가 간결해졌습니다.

Instance 를 안썼을 경우에는..?

1. Fetch를 사용한 API 호출

코드 구조

const API_KEY = import.meta.env.VITE_TMDB_KEY;
const BASE_URL = 'https://api.themoviedb.org/3';

// 인기 영화 가져오기
export const fetchPopularMovies = async () => {
  try {
    const response = await fetch(`${BASE_URL}/movie/popular?api_key=${API_KEY}`, {
      headers: {
        'Content-Type': 'application/json',
      }
    });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    return data.results;
  } catch (error) {
    console.error('Fetch Error:', error.message);
    throw error; // 필요하면 에러를 다시 던질 수도 있음
  }
};

// 현재 상영 중인 영화 가져오기
export const fetchLatestMovies = async () => {
  try {
    const response = await fetch(`${BASE_URL}/movie/now_playing?api_key=${API_KEY}`, {
      headers: {
        'Content-Type': 'application/json',
      });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    return data.results;
  } catch (error) {
    console.error('Fetch Error:', error.message);
    throw error;
  }
};

// 새로운 리뷰 작성하기 (POST 요청)
export const createReview = async (movieId, review) => {
  try {
    const response = await fetch(`${BASE_URL}/movie/${movieId}/reviews?api_key=${API_KEY}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(review),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch POST Error:', error.message);
    throw error;
  }
};

Fetch의 문제점

반복적인 설정
- BASE_URL과 api_key가 각 함수마다 반복적으로 포함됩니다.
- 헤더와 메서드 설정도 매번 작성해야 합니다.
- response.ok를 확인하는 로직을 모든 요청에 반복적으로 작성해야 합니다.
- 네트워크 에러와 HTTP 에러를 통합적으로 처리하기 어렵습니다.
응답 처리
- 응답 데이터를 response.json()으로 변환해야 하므로 코드가 장황해집니다.

2. Axios를 사용한 API 호출

코드 구조

import axios from 'axios';

const API_KEY = import.meta.env.VITE_TMDB_KEY;
const BASE_URL = 'https://api.themoviedb.org/3';

// 인기 영화 가져오기
export const fetchPopularMovies = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/movie/popular`, {
      params: { api_key: API_KEY },
      headers: { 'Content-Type': 'application/json' },
    });
    return response.data.results;
  } catch (error) {
    console.error('Axios Error:', error.message);
    throw error;
  }
};

// 현재 상영 중인 영화 가져오기
export const fetchLatestMovies = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/movie/now_playing`, {
      params: { api_key: API_KEY },
      headers: { 'Content-Type': 'application/json' },
    });
    return response.data.results;
  } catch (error) {
    console.error('Axios Error:', error.message);
    throw error;
  }
};

// 새로운 리뷰 작성하기 (POST 요청)
export const createReview = async (movieId, review) => {
  try {
    const response = await axios.post(
      `${BASE_URL}/movie/${movieId}/reviews`,
      review,
      {
        params: { api_key: API_KEY },
        headers: { 'Content-Type': 'application/json' },
      }
    );
    return response.data;
  } catch (error) {
    console.error('Axios POST Error:', error.message);
    throw error;
  }
};

Axios의 개선점

응답 처리 간소화
- Axios는 응답 데이터를 자동으로 JSON으로 변환하여 response.data로 바로 접근 가능.
HTTP 에러 처리
- Axios는 HTTP 에러(404, 500 등)를 자동으로 catch 블록으로 전달합니다.
- 네트워크 에러와 HTTP 에러 모두 Axios의 에러 객체로 통합되어 처리됩니다.
문법 간결성
- Fetch보다 직관적이고 간결한 문법.

여전히 남아있는 문제점

BASE_URL과 api_key가 여전히 각 요청마다 반복적으로 사용됩니다.

4. Interceptor란?

4-1. Interceptor의 개념

Interceptor는 Axios에서 제공하는 기능으로, 요청(Request)이나 응답(Response)이 처리되기 전/후에 특정 작업을 수행할 수 있도록 도와줍니다.
AxiosInstance와 결합하여 사용되며, API 호출의 공통 작업을 한 곳에서 처리합니다.

4-2. Interceptor의 역할

요청(Request) Interceptor

요청 전 데이터 수정이나 추가 작업 수행.
예: 인증 토큰 추가, 공통 파라미터 설정.

응답(Response) Interceptor

응답 데이터 전처리나 에러 로깅.
예: 서버 응답 데이터를 클라이언트 포맷으로 변환, 상태 코드별 에러 처리.

4-3. 요청 Interceptor 예제

1. Authorization 헤더 추가

1) 인터셉터를 사용하지 않는 경우

const API_KEY = import.meta.env.VITE_TMDB_KEY;
const BASE_URL = 'https://api.themoviedb.org/3';

const token = localStorage.getItem('authToken');

// 인기 영화 가져오기
export const fetchPopularMovies = async () => {
  const response = await fetch(`${BASE_URL}/movie/popular`, {
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
  });
  const data = await response.json();
  return data.results;
};

// 현재 상영 중인 영화 가져오기
export const fetchLatestMovies = async () => {
  const response = await fetch(`${BASE_URL}/movie/now_playing`, {
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
  });
  const data = await response.json();
  return data.results;
};

// 새로운 리뷰 작성하기 (POST 요청)
export const createReview = async (movieId, review) => {
  const response = await fetch(`${BASE_URL}/movie/${movieId}/reviews`, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(review),
  });
  const data = await response.json();
  return data;
};

문제점

반복 작업:
- 모든 API 요청마다 Authorization 헤더를 추가해야 함.
유지보수성 저하:
- 토큰 변경 시 모든 함수에서 수정 필요.

2) 인터셉터를 사용한 경우

// axiosInstance.js
import axios from 'axios';

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

axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default axiosInstance;

// API 호출 코드
import axiosInstance from './axiosInstance';

export const fetchPopularMovies = async () => {
  const response = await axiosInstance.get('/movie/popular');
  return response.data.results;
};

export const fetchLatestMovies = async () => {
  const response = await axiosInstance.get('/movie/now_playing');
  return response.data.results;
};

export const createReview = async (movieId, review) => {
  const response = await axiosInstance.post(`/movie/${movieId}/reviews`, review);
  return response.data;
};

개선점

중복 제거:
- Authorization 헤더를 한 곳에서 관리.
유지보수성 향상:
- 토큰 변경 시 인터셉터만 수정하면 됨.

2. 공통 파라미터 추가

1) 인터셉터를 사용하지 않는 경우

const API_KEY = import.meta.env.VITE_TMDB_KEY;
const BASE_URL = 'https://api.themoviedb.org/3';

// 인기 영화 가져오기
export const fetchPopularMovies = async () => {
  const response = await fetch(`${BASE_URL}/movie/popular?api_key=${API_KEY}&lang=en&region=US`);
  const data = await response.json();
  return data.results;
};

// 현재 상영 중인 영화 가져오기
export const fetchLatestMovies = async () => {
  const response = await fetch(`${BASE_URL}/movie/now_playing?api_key=${API_KEY}&lang=en&region=US`);
  const data = await response.json();
  return data.results;
};

// 새로운 리뷰 작성하기 (POST 요청)
export const createReview = async (movieId, review) => {
  const response = await fetch(`${BASE_URL}/movie/${movieId}/reviews?api_key=${API_KEY}&lang=en&region=US`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(review),
  });
  const data = await response.json();
  return data;
};

문제점

반복 작업:
- 모든 API 요청마다 동일한 파라미터(lang, region)를 추가해야 함.
유지보수성 저하:
- URL이 길어져 코드가 지저분해짐.

(2) 인터셉터를 사용한 경우

// axiosInstance.js
axiosInstance.interceptors.request.use(
  (config) => {
    config.params = { ...config.params, api_key: import.meta.env.VITE_TMDB_KEY, lang: 'en', region: 'US' };
    return config;
  },
  (error) => Promise.reject(error)
);

export default axiosInstance;

// API 호출 코드
export const fetchPopularMovies = async () => {
  const response = await axiosInstance.get('/movie/popular');
  return response.data.results;
};

export const fetchLatestMovies = async () => {
  const response = await axiosInstance.get('/movie/now_playing');
  return response.data.results;
};

export const createReview = async (movieId, review) => {
  const response = await axiosInstance.post(`/movie/${movieId}/reviews`, review);
  return response.data;
};

개선점

중복 제거:
- Authorization 헤더를 한 곳에서 관리.
유지보수성 향상:
- 토큰 변경 시 인터셉터만 수정하면 됨.

개선점

코드 간결화:
- 요청마다 공통 파라미터를 작성하지 않아도 됨.
중앙화:
- 공통 파라미터 변경 시 인터셉터만 수정하면 됨.

4-4. 응답 Interceptor 예제

1. 응답 데이터 전처리

🔥🔥🔥🔥🔥 백엔드 개발자가 자꾸 응답 데이터를 result key에 담아서 보낸다고 가정해봅시다. 🔥🔥🔥🔥🔥
data : […] 원하는 값이 들어 있는게 아니고, data : { result : […] } 이런식으로 보낸다고 가정해봅시다.

1) 인터셉터를 사용하지 않는 경우

export const fetchPopularMovies = async () => {
  const response = await axios.get('https://api.example.com/movie/popular');
  
  // 응답 데이터 전처리
  if (response.data?.result) {
    return response.data.result; // 서버에서 result 키에 데이터를 담아 보낸 경우
  }
  return response.data; // 데이터를 직접 반환
};

export const fetchLatestMovies = async () => {
  const response = await axios.get('https://api.example.com/movie/latest');
  
  // 응답 데이터 전처리
  if (response.data?.result) {
    return response.data.result;
  }
  return response.data;
};

문제점

코드 중복:
- 각 함수에서 response.data?.result를 확인하고 전처리해야 함.
유지보수성 저하:
- 데이터 포맷이 변경되면 모든 함수에서 로직 수정 필요.

2) 인터셉터를 사용한 경우

// axiosInstance.js
axiosInstance.interceptors.response.use(
  (response) => {
    if (response.data?.result) {
      return response.data.result; // 서버가 데이터를 result 키에 담아 보내는 경우
    }
    return response.data; // 데이터를 직접 반환
  },
  (error) => Promise.reject(error)
);

export default axiosInstance;

// API 호출 코드 api.js
export const fetchPopularMovies = async () => {
  const response = await axiosInstance.get('/movie/popular');
  return response; // 이미 전처리된 데이터 반환
};

export const fetchLatestMovies = async () => {
  const response = await axiosInstance.get('/movie/latest');
  return response;
};

개선점

중앙화된 데이터 전처리:
- 데이터 전처리 로직이 인터셉터에 통합되어 모든 API 호출에 적용.
코드 간결화:
- 각 함수는 비즈니스 로직에만 집중 가능.

2. 상태 코드별 에러 처리

1) 인터셉터를 사용하지 않는 경우

export const fetchPopularMovies = async () => {
  try {
    const response = await axios.get('https://api.example.com/movie/popular');
    return response.data;
  } catch (error) {
    // 상태 코드별 에러 처리
    if (error.response?.status === 401) {
      alert('Authentication failed. Please log in again.');
    } else if (error.response?.status === 404) {
      console.error('Resource not found.');
    } else {
      console.error('An unexpected error occurred:', error.message);
    }
    throw error; // 에러를 다시 던짐
  }
};

export const fetchLatestMovies = async () => {
  try {
    const response = await axios.get('https://api.example.com/movie/latest');
    return response.data;
  } catch (error) {
    // 상태 코드별 에러 처리
    if (error.response?.status === 401) {
      alert('Authentication failed. Please log in again.');
    } else if (error.response?.status === 404) {
      console.error('Resource not found.');
    } else {
      console.error('An unexpected error occurred:', error.message);
    }
    throw error;
  }
};

문제점

중복 코드:
- 에러 처리 로직이 각 함수에 반복 작성됨.
유지보수성 저하:
- 에러 처리 방식이 변경될 경우 모든 함수에서 수정 필요.

2) 인터셉터를 사용한 경우

// axiosInstance.js
axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    // 상태 코드별 에러 처리
    if (error.response?.status === 401) {
      alert('Authentication failed. Please log in again.');
    } else if (error.response?.status === 404) {
	    naviagte.push('/not-found')
      console.error('Resource not found.');
    } else {
      console.error('An unexpected error occurred:', error.message);
    }
    return Promise.reject(error); // 에러를 다시 던져 호출한 함수에서 추가 처리 가능
  }
);

export default axiosInstance;

// API 호출 코드
export const fetchPopularMovies = async () => {
  try {
    const response = await axiosInstance.get('/movie/popular');
    return response.data;
  } catch (error) {
    // 인터셉터에서 처리되지 않은 에러 추가 처리
    console.error('Error fetching popular movies:', error.message);
    // 빈 배열 반환 또는 재정의된 에러 처리
    return [];
  }
};

export const fetchLatestMovies = async () => {
  try {
    const response = await axiosInstance.get('/movie/latest');
    return response.data;
  } catch (error) {
    console.error('Error fetching latest movies:', error.message);
    // 기본값 반환
    return {};
  }
};

개선점

중앙화된 에러 처리:
- 상태 코드별 로직이 인터셉터에서 관리되어 유지보수가 용이.
코드 간결화:
- 각 함수는 에러 처리 로직을 작성할 필요가 없음.

4-5 Interceptor 활용: 토큰 갱신과 요청 재시도

상황

API 호출 중 401 Unauthorized 에러가 발생했을 때, 리프레시 토큰으로 인증 갱신 후 요청을 재시도합니다.

코드 예제

axiosInstance.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      try {
        const refreshToken = localStorage.getItem('refreshToken');
        const { data } = await axios.post('/auth/refresh-token', { refreshToken });

        // 새 토큰 저장
        localStorage.setItem('authToken', data.token); // 갱신된 토큰을 가지고 있죠?

        // 원래 요청 재시도
        error.config.headers.Authorization = `Bearer ${data.token}`;
        return axiosInstance.request(error.config);
      } catch (refreshError) {
        console.error('Token Refresh Error:', refreshError.message);
        return Promise.reject(refreshError);
      }
    }
    return Promise.reject(error);
  }
);

4-6. Interceptor의 장점과 한계

장점

코드 중복 제거:
- 모든 요청/응답에 공통 작업을 처리하여 유지보수성을 향상.
효율적인 에러 관리:
- 에러 처리를 중앙화하여 코드 가독성 향상.
비즈니스 로직 분리:
- API 호출 로직에서 공통 작업 제거.

한계

요청별 맞춤 처리 부족:
- Interceptor는 전역 작업에 적합하며, 요청별 세부 로직은 try-catch로 처리해야 함.
디버깅 복잡성:
- 모든 요청/응답에 관여하므로 예기치 못한 동작이 발생할 경우 디버깅이 어려울 수 있음.

회고

오늘은 리액트 심화주차 발제와 함께 강의가 주어졌다.
매니저님, 튜터님 모두 이번주차는 정말 어렵다고 하셔서 강의를 봤는데 정말 어려웠다.
(생전 처음보고 듣는 단어들이 많았다.)
주어진 강의를 약 40% 정도 들은것 같은데 주말에 더욱 공부해야겠다.
axios에 대해 오늘 처음 알게됐는데 custom instance와 interceptors를 잘 사용하면 너무 좋을것 같다.
우선 원리와 사용법을 익혀두고 프로젝트를 하면서 익숙해져보자!!
보통 그러지 않는편인데 오늘 챌린지반 강의가 너무 좋았다.
위 자료는 내가 따로 공부하고싶어서 튜터님께서 만들어주신 강의를 가져왔다.
이것보다 더 머리에 쏙쏙 들어오고 이해가 잘되는 문서나 강의가 없기에 내가 보기 편하게 정리했다.
또 이번 심화주차에서 아웃소싱프로젝트때까지 팀장을 맡게 됐는데,
팀원들이 편하게 개발 할 수 있도록 최선을 다해보겠다. 화이팅!!!

그럼이만

안현희

모든 순간에 최선을 다합니다.

이전 포스트

세션 vs 토큰 vs 쿠키? 그리고 JWT

다음 포스트

Fetch vs Axios & AxiosInstance 활용법

React를 배워보자!

1. Fetch와 Axios란?

1-1. Fetch란?

Fetch의 특징

Fetch의 응답 처리 흐름

1. HTTP 응답 상태 확인

설계 철학: 유연성과 낮은 수준의 제어 제공

2. 응답 본문 처리

왜 이런식으로 되어있나요?

다시 한번 정리! 이것만은 알고 갑시다!

Fetch의 예제

1-2. Axios란?

Axios의 특징

Axios의 응답 처리 흐름

Axios의 예제

2. Fetch와 Axios의 차이점

2-1. Response 처리 차이

Fetch vs Axios: 코드 비교

Fetch로 응답 처리

Axios로 응답 처리

2-2. 실무에서의 Fetch와 Axios 사용 팁

3. AxiosInstance란?

3-1. AxiosInstance의 개념

3-2. AxiosInstance의 필요성

3-3. AxiosInstance 생성

3-4. AxiosInstance를 사용한 API 호출

개선된 점

Instance 를 안썼을 경우에는..?

1. Fetch를 사용한 API 호출

코드 구조

Fetch의 문제점

2. Axios를 사용한 API 호출

코드 구조

Axios의 개선점

여전히 남아있는 문제점

4. Interceptor란?

4-1. Interceptor의 개념

4-2. Interceptor의 역할

요청(Request) Interceptor

응답(Response) Interceptor

4-3. 요청 Interceptor 예제

1. Authorization 헤더 추가

1) 인터셉터를 사용하지 않는 경우

문제점

2) 인터셉터를 사용한 경우

개선점

2. 공통 파라미터 추가

1) 인터셉터를 사용하지 않는 경우

문제점

(2) 인터셉터를 사용한 경우

개선점

개선점

4-4. 응답 Interceptor 예제

1. 응답 데이터 전처리

1) 인터셉터를 사용하지 않는 경우

문제점

2) 인터셉터를 사용한 경우

개선점

2. 상태 코드별 에러 처리

1) 인터셉터를 사용하지 않는 경우

문제점

2) 인터셉터를 사용한 경우

개선점

4-5 Interceptor 활용: 토큰 갱신과 요청 재시도

상황

코드 예제

4-6. Interceptor의 장점과 한계

장점

한계

회고

그럼이만

세션 vs 토큰 vs 쿠키? 그리고 JWT

[심화과제] MBTI 테스트 만들기

0개의 댓글

관련 채용 정보