Axios는 브라우저와 Node.js에서 HTTP 요청을 만들고 처리하는데 사용되는 인기 있는 자바스크립트 라이브러리입니다.

주로 비동기적으로 데이터를 가져오거나 서버에 데이터를 전송하기 위해 사용됩니다.

Axios는 단순한 API, 강력한 기능, 그리고 다양한 환경에서 사용 가능하기 때문에 웹 개발에서 널리 사용됩니다.

주요 기능 및 특징

1. Promise 기반: Axios는 Promise API를 사용하여 비동기 작업을 처리합니다. 이는 비동기 코드를 더 간단하고 직관적으로 작성할 수 있게 합니다.
2. 자동 JSON 변환: 요청과 응답 데이터를 자동으로 JSON으로 변환합니다.
3. 요청 취소: 요청을 취소할 수 있는 기능을 제공합니다.
4. 요청 및 응답 인터셉터: 요청과 응답을 가로채어 처리할 수 있는 인터셉터를 설정할 수 있습니다.
5. 타임아웃 설정: 요청에 대한 타임아웃을 설정할 수 있습니다.
6. 헤더 설정: 요청에 필요한 커스텀 헤더를 설정할 수 있습니다.
7. Node.js와 브라우저 모두에서 사용 가능: 브라우저 환경뿐만 아니라 Node.js 환경에서도 사용할 수 있습니다.
8. 보안: XSRF 보호 기능을 제공합니다.

• XSRF 란? XSRF (Cross-Site Request Forgery)는 사용자가 의도하지 않은 행동을 하게끔 하는 공격 유형으로, 공격자가 사용자의 인증된 세션을 악용하여 웹 애플리케이션에 비정상적인 요청을 보내는 방식
  

설치 방법

npm을 사용한 설치

npm install axios

CDN을 사용한 설치

HTML 파일에 다음 스크립트 태그를 추가합니다.

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

사용 예제

GET 요청 예제

const axios = require('axios');

// GET 요청
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

POST 요청 예제

const axios = require('axios');

// POST 요청
axios.post('https://api.example.com/data', {
    key1: 'value1',
    key2: 'value2'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

요청 인터셉터 설정 예제

const axios = require('axios');

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

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

요약

Axios는 HTTP 요청을 쉽게 처리할 수 있게 해주는 강력한 자바스크립트 라이브러리입니다. Promise 기반으로 비동기 코드를 작성하기 쉽고, 다양한 기능을 제공하여 웹 개발에서 효율적으로 데이터를 가져오고 전송할 수 있습니다.