Axios를 사용하여 클라이언트 측에서 데이터 그래프 작성하기

10 Nov 2023

axios

많은 웹 애플리케이션에서는 데이터를 시각적으로 표현하는 그래프가 중요한 역할을 합니다. 이를 위해 클라이언트 측에서 데이터를 요청하고 받아오는 작업이 필요합니다. 이번 글에서는 Axios를 사용하여 클라이언트 측에서 데이터를 요청하고 그래프를 작성하는 방법을 알아보겠습니다.

Axios란?

Axios는 웹 애플리케이션에서 HTTP 요청을 처리하기 위한 자바스크립트 라이브러리입니다. 브라우저와 Node.js 환경에서 모두 사용할 수 있으며, 간편한 API와 유용한 기능들을 제공합니다. Axios를 사용하면 서버로부터 데이터를 요청하고 응답을 받아올 수 있습니다.

Axios 설치하기

Axios를 사용하기 위해 먼저 프로젝트에 Axios를 설치해야 합니다. npm을 사용하여 다음 명령어를 실행합니다.

npm install axios

데이터 요청하기

Axios를 사용하여 서버로부터 데이터를 요청하기 위해서는 axios.get() 메서드를 사용합니다. 이 메서드는 서버로부터 GET 요청을 보내고 데이터를 받아옵니다. 아래는 Axios를 사용하여 데이터를 요청하는 예시입니다.

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    // 데이터 요청 성공 시 실행할 코드
    console.log(response.data);
    // 그래프 작성 등의 작업을 수행할 수 있습니다.
  })
  .catch(error => {
    // 데이터 요청 실패 시 실행할 코드
    console.error(error);
  });

위의 예시에서는 /api/data 엔드포인트로 GET 요청을 보내고 응답을 받아옵니다. 성공적으로 데이터를 받아온 경우 then 블록 내의 코드가 실행되며, 실패할 경우 catch 블록 내의 코드가 실행됩니다.

그래프 작성하기

데이터를 받아온 후, 그래프를 작성하는 방법은 다양합니다. 주로 사용되는 자바스크립트 그래프 라이브러리 중 하나인 Chart.js를 사용하여 예시를 보겠습니다.

먼저, 아래와 같이 HTML 파일에 Chart.js를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Graph Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="graph"></canvas>

  <script src="app.js"></script>
</body>
</html>

그리고 app.js 파일에 다음과 같이 그래프를 작성하는 코드를 추가합니다.

import axios from 'axios';
import Chart from 'chart.js';

axios.get('/api/data')
  .then(response => {
    // 데이터 요청 성공 시 실행할 코드
    const data = response.data;

    const labels = data.map(item => item.label);
    const values = data.map(item => item.value);

    const ctx = document.getElementById('graph').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels,
        datasets: [{
          label: 'Graph',
          data: values,
        }]
      },
    });
  })
  .catch(error => {
    // 데이터 요청 실패 시 실행할 코드
    console.error(error);
  });

위의 예시에서는 받아온 데이터를 바탕으로 bar 타입의 그래프를 작성합니다. 데이터를 이용하여 labels와 values를 만들고, Chart.js를 사용하여 실제 그래프를 작성합니다.

마무리

이렇게 Axios를 사용하여 클라이언트 측에서 데이터를 요청하고 그래프를 작성하는 방법을 알아보았습니다. Axios는 간편한 사용법과 다양한 기능을 제공하여 웹 개발을 보다 편리하게 만들어줍니다. 데이터 요청과 그래프 작성은 웹 애플리케이션에서 필수적인 부분이니, Axios를 활용하여 웹 애플리케이션의 사용자 경험을 높여보세요!