Axios?

Axios: 간편한 HTTP 요청을 위한 JavaScript 라이브러리

웹 개발을 하다 보면 클라이언트와 서버 간의 데이터 통신이 필수적입니다. 이때 HTTP 요청을 간편하게 처리할 수 있는 도구가 필요합니다. Axios는 JavaScript에서 이러한 HTTP 요청을 쉽게 처리할 수 있도록 도와주는 인기 있는 라이브러리입니다. 이 글에서는 Axios의 개념, 주요 기능, 사용법, 그리고 활용 사례에 대해 자세히 알아보겠습니다.

Axios란 무엇인가?

Axios는 브라우저와 Node.js 환경에서 모두 동작하는 Promise 기반의 HTTP 클라이언트입니다. Ajax 요청을 단순화하고, 다양한 HTTP 요청 방식(GET, POST, PUT, DELETE 등)을 지원하며, 요청 및 응답 데이터를 자동으로 JSON 형식으로 변환해주는 기능을 제공합니다.

Axios의 주요 기능

Promise 기반: Axios는 Promise를 기반으로 하여 비동기 작업을 쉽게 처리할 수 있습니다.

요청 및 응답 인터셉터: 요청이 서버로 보내지기 전 또는 응답을 받은 후에 작업을 수행할 수 있는 인터셉터 기능을 제공합니다.

자동 JSON 변환: 요청 데이터와 응답 데이터를 자동으로 JSON 형식으로 변환합니다.

CSRF 보호: XSRF(크로스 사이트 요청 위조) 보호 기능을 내장하고 있습니다.

취소 토큰: 요청을 취소할 수 있는 기능을 제공합니다.

브라우저 및 Node.js 지원: 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다.

Axios 설치

Axios는 npm 또는 CDN을 통해 쉽게 설치할 수 있습니다.

npm을 통한 설치

npm install axios

CDN을 통한 설치

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 

Axios 사용법

기본적인 GET 요청

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

기본적인 POST 요청

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

요청 인터셉터와 응답 인터셉터

// 요청 인터셉터 추가
axios.interceptors.request.use(config => {
  console.log('Request was sent');
  return config;
}, error => {
  return Promise.reject(error);
});

// 응답 인터셉터 추가
axios.interceptors.response.use(response => {
  console.log('Response received');
  return response;
}, error => {
  return Promise.reject(error);
});

동시 요청 처리

axios.all([
  axios.get('https://jsonplaceholder.typicode.com/posts'),
  axios.get('https://jsonplaceholder.typicode.com/users')
])
.then(axios.spread((posts, users) => {
  console.log('Posts:', posts.data);
  console.log('Users:', users.data);
}))
.catch(error => {
  console.error('Error with requests:', error);
});

 

Axios 활용 사례

API 데이터 가져오기: Axios는 RESTful API에서 데이터를 가져올 때 자주 사용됩니다. 예를 들어, 블로그 게시물이나 사용자 정보를 가져오는 데 유용합니다.

폼 데이터 전송: Axios는 사용자 입력 데이터를 서버로 전송할 때도 유용합니다. 로그인 폼, 회원가입 폼 등을 처리할 수 있습니다.

파일 업로드: Axios를 사용하여 파일을 서버로 업로드할 수 있습니다. `FormData` 객체를 사용하여 파일을 전송할 수 있습니다.

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
  console.log('File uploaded successfully:', response.data);
})
.catch(error => {
  console.error('Error uploading file:', error);
});

결론

Axios는 간편하고 강력한 HTTP 클라이언트로, 웹 애플리케이션에서 서버와의 데이터 통신을 쉽게 처리할 수 있게 해줍니다.

Promise 기반의 비동기 작업 처리, 요청 및 응답 인터셉터, 자동 JSON 변환 등의 기능을 통해 개발자는 더욱 간편하게 네트워크 요청을 관리할 수 있습니다. Axios를 사용하여 웹 애플리케이션의 데이터를 효과적으로 관리하고, 보다 나은 사용자 경험을 제공해보세요.