Axios: 인터셉터와 기본 URL
baseURL로 Axios 인스턴스를 만들고 요청 인터셉터에서 인증 토큰을 추가하며, 응답 인터셉터에서 4xx/5xx 오류를 처리합니다.
Axios: 인터셉터와 기본 URL은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Axios를 사용하는 이유
Axios는 XMLHttpRequest를 기반으로 만들어진 인기 있는 HTTP 클라이언트입니다. 자동 JSON 처리, 요청/응답 인터셉터, baseURL 설정, 제한 시간, 요청 취소 token을 제공합니다. 여전히 많은 팀이 fetch보다 Axios를 선호합니다.
Axios 설치
npm을 통해 설치하십시오. 브라우저 번들의 크기는 gzip 압축 후 약 14KB입니다.
npm install axios기본 GET과 POST
Axios는 JSON 본문을 자동으로 문자열화하고 JSON 응답을 자동으로 파싱하므로 수동으로 JSON.stringify나 .json()을 호출할 필요가 없습니다.
import axios from 'axios';
const { data } = await axios.get('/api/users');
console.log(data); // already parsed
const res = await axios.post('/api/users', { name: 'Alice' });
console.log(res.data, res.status);Axios 인스턴스 생성
API에 맞게 설정한 인스턴스를 만들어 모든 호출에서 기본 URL, 머리글, 제한 시간을 반복해서 지정하지 않도록 하십시오.
import axios from 'axios';
export const api = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 10000,
headers: { 'Content-Type': 'application/json' }
});
// Use it:
const { data } = await api.get('/users');
const res = await api.post('/users', { name: 'Alice' });요청 인터셉터: 인증 token
같은 코드를 반복하지 않고 모든 요청에 인증 token을 주입하십시오.
api.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});응답 인터셉터: 전역 오류
모든 응답의 오류 처리를 한곳에서 관리하십시오. 401이면 리디렉션하고, 5xx이면 토스트를 표시하는 등의 작업을 수행할 수 있습니다.
api.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
window.location.href = '/login';
}
if (error.response?.status >= 500) {
toast.error('Server error. Please try again.');
}
return Promise.reject(error);
}
);401에서 token 갱신
응답 인터셉터를 사용하여 401을 감지하고, token을 갱신한 다음, 원래 요청을 사용자에게 드러나지 않게 다시 시도하십시오.
api.interceptors.response.use(null, async (error) => {
const originalRequest = error.config;
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const newToken = await refreshToken();
localStorage.setItem('token', newToken);
originalRequest.headers.Authorization = `Bearer ${newToken}`;
return api(originalRequest); // retry
}
return Promise.reject(error);
});URL 매개변수와 쿼리
Axios는 params 객체를 받으며, 이 객체는 자동으로 쿼리 문자열로 직렬화됩니다.
const { data } = await api.get('/search', {
params: { q: 'react hooks', page: 2 }
});
// GET /search?q=react+hooks&page=2시간 제한
느린 서버에서 요청이 계속 대기하는 것을 방지하려면 요청 시간 제한을 설정하세요.
api.get('/slow-endpoint', { timeout: 5000 })
.catch(err => {
if (err.code === 'ECONNABORTED') {
console.log('Request took too long');
}
});요청 취소
AbortController(최신 Axios) 또는 CancelToken(이전 API)을 사용하세요.
const controller = new AbortController();
api.get('/big-data', { signal: controller.signal })
.catch(err => {
if (axios.isCancel(err)) console.log('cancelled');
});
controller.abort();오류 객체 구조
Axios 오류에는 error.response(서버가 오류 상태 코드로 응답함), error.request(응답을 받지 못함) 또는 둘 다 없는 경우(요청 설정 실패)가 있습니다.
Axios와 Fetch 중 선택하기
Axios: 더 깔끔한 API, 기본 제공되는 인터셉터, 간단한 오류 처리. Fetch: 네이티브 API, 더 작은 번들, 최신 스트리밍 지원. 새 프로젝트에서는 흔히 fetch와 얇은 래퍼를 함께 사용하고, 기존 Axios 프로젝트는 거의 마이그레이션하지 않습니다.
빠른 확인
각 요청을 개별적으로 수정하지 않고 모든 요청에 인증 헤더를 추가할 수 있게 해 주는 Axios의 기능은 무엇인가요?
복습: Axios
baseURL과 timeout이 설정된 인스턴스에는 axios.create()를 사용합니다. JSON 응답은 자동으로 구문 분석됩니다(res.data). 요청 인터셉터는 토큰을 추가하고, 응답 인터셉터는 오류를 처리하며 토큰을 갱신합니다. 쿼리 문자열에는 params 객체를 사용합니다. 취소에는 AbortController를 사용합니다. 깔끔한 구성이 중요하면 Axios를, 더 작은 번들이 필요하면 fetch + 래퍼를 선택하세요.
자주 묻는 질문
“Axios: 인터셉터와 기본 URL” 강의는 무료인가요?
네 — “Axios: 인터셉터와 기본 URL” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Axios: 인터셉터와 기본 URL”에서 뭘 배우나요?
baseURL로 Axios 인스턴스를 만들고 요청 인터셉터에서 인증 토큰을 추가하며, 응답 인터셉터에서 4xx/5xx 오류를 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“Axios: 인터셉터와 기본 URL” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.