Axios는 자바스크립트에서 서버와의 HTTP 통신을 간편하게 처리할 수 있는 라이브러리입니다. 이번 포스팅에서는 Axios를 사용하여 서버와의 실시간 데이터 통신을 어떻게 할 수 있는지 알아보겠습니다.

Axios 설치

Axios를 사용하기 위해서는 먼저 axios 패키지를 설치해야 합니다. npm을 이용하여 다음과 같이 설치할 수 있습니다.

npm install axios

GET 요청

Axios를 사용하여 GET 요청을 보내는 방법은 간단합니다. 다음은 GET 요청을 보내고 응답을 받는 예제입니다.

const axios = require('axios');

axios.get('https://api.example.com/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

위 코드에서는 axios 모듈을 불러와 get 함수를 호출하여 서버에 GET 요청을 보내고, 응답을 받으면 then 블록에서 데이터를 출력합니다. 오류가 발생하면 catch 블록에서 에러를 처리합니다.

POST 요청

POST 요청을 보내는 방법도 GET 요청과 비슷합니다. 다음은 POST 요청을 보내고 응답을 받는 예제입니다.

const axios = require('axios');

axios.post('https://api.example.com/data', {
    name: 'John Doe',
    age: 25
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

위 코드에서는 post 함수를 호출할 때, 두 번째 인자로 보낼 데이터를 전달합니다. 서버로 데이터를 보내고 응답을 받으면 then 블록에서 데이터를 출력합니다. 오류가 발생하면 catch 블록에서 에러를 처리합니다.

참고 자료

• Axios 공식 문서

지금까지 Axios를 사용하여 서버와의 실시간 데이터 통신을 하는 방법에 대해 알아보았습니다. Axios는 간편한 API를 제공하면서도 다양한 기능을 지원하므로, 프론트엔드 개발에 유용하게 활용할 수 있습니다.