📃 axios는 JavaScript 환경에서 서버와의 HTTP 요청 및 응답을 처리하는 데 널리 사용되는 Promise 기반의 HTTP 클라이언트 라이브러리입니다
https://velog.io/@hyeonjeong/Axios%EB%9E%80
💻Get request
axios.get("https://jsonplaceholder.typicode.com/posts")
.then(res => {
console.log(res.data) // 성공적으로 받은 데이터
})
.catch(err => {
console.log(err) // 에러 처리
})
console.log(res.data)
⬆️ GET 메서드는 데이터를 요청할 URL을 입력한 뒤, .then을 통해 서버에서 받아온 데이터를 처리하거나, .catch를 통해 에러를 처리합니다
📃 이 개념을 좀 더 쉽게 이해하려면, 우리가 GitHub Actions를 통해 배포를 자동화하는 것과 비슷한 개념이라고 볼 수 있습니다. GitHub Actions에서는 코드가 특정 조건을 만족할 때마다 자동으로 작업을 실행할 수 있도록 설정합니다. 자동화 스크립트를 작성해두죠?? 예를 들어, 코드가 변경되면 자동으로 테스트를 실행하고, 그 후에 배포를 진행하는 것처럼 말이죠. 이 과정에서 중간에 특정 작업을 "가로채서" 처리하는 단계가 있습니다. 즉, 코드가 변경되면 "배포"라는 요청이 자동으로 트리거되고, 그 전에 테스트가 먼저 실행되는 식입니다.
💻 요청(Request) 전처리
axios.interceptors.request.use(
(config) => {
// 모든 요청에 인증 토큰 추가
const token = 'your-auth-token';
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
console.log('Request sent:', config);
return config; // 수정한 config 반환
},
(error) => {
// 요청 전 에러 처리
console.error('Request error:', error);
return Promise.reject(error);
}
);
⬆️ 서버에 인증이 필요한 요청에서, 우리는 매번 HTTP 헤더에 인증 토큰을 추가해서 보낼 수가 없습니다. 이때 Interceptors를 사용하면 모든 요청에 자동으로 헤더를 추가할 수 있습니다
💻 음답(Request) 후처리
// 응답 인터셉터 추가
axios.interceptors.response.use(
(response) => {
// 응답 데이터 구조 간소화
console.log('Response received:', response);
return response.data; // 필요한 데이터만 반환
},
(error) => {
// 공통 에러 처리
if (error.response.status === 401) {
console.error('Unauthorized! Redirecting to login...');
// 예: 로그인 페이지로 이동
window.location.href = '/login';
}
return Promise.reject(error);
}
);
⬆️응답 후처리는, 우리가 GET 메서드를 통해 데이터를 받아올 때마다 응답 객체에서 res.data를 통해 실제 데이터를 추출하는 과정을 자동화하는 것입니다. 이를 Interceptors를 사용하여 응답을 받을 때마다, 응답 객체 안에서 필요한 데이터만 바로 추출하도록 처리할 수 있습니다. 이렇게 하면, 매번 res.data를 직접 사용하지 않고도 원하는 데이터를 바로 사용할 수 있게 됩니다
📝 SUMMARY
📌 Axios 라이브러리를 사용하는 것도 좋은 선택이지만, 우선 기본적으로 제공되는 fetch 내장 함수를 사용하여 구현해보는 것이 중요합니다. 이후 axios를 사용했을 때 어떤 이점이 있는지 비교해보면 더 큰 이해를 얻을 수 있습니다
