자바스크립트 fetch API를 사용한 데이터 시각화

10 Sep 2023

javascript

자바스크립트는 웹 개발에서의 데이터 시각화에 매우 강력한 도구입니다. 그 중에서도 fetch API는 서버로부터 데이터를 가져와서 화면에 시각적으로 표현하는 데 사용됩니다. 이번 글에서는 자바스크립트의 fetch API를 사용하여 데이터를 가져와 시각화하는 방법에 대해 알아보겠습니다.

fetch API 소개

fetch API는 웹 개발에서 널리 사용되는 비동기 네트워크 통신 인터페이스입니다. 이 API를 사용하면 서버로부터 데이터를 가져올 수 있습니다. fetch API는 Promise 기반으로 동작하며, JSON, 텍스트 등 다양한 형식의 데이터를 가져올 수 있습니다.

데이터 가져오기

먼저, fetch API를 사용하여 서버로부터 데이터를 가져오는 방법을 알아보겠습니다. 아래 예제 코드를 참고해주세요.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직
  })
  .catch(error => {
    console.error('데이터를 불러오는 중 오류가 발생했습니다:', error);
  });

위 코드에서는 fetch() 함수를 사용하여 서버로부터 데이터를 가져옵니다. 해당 URL에서 데이터를 성공적으로 가져오면 then() 함수에 전달된 콜백 함수가 호출됩니다. 이 콜백 함수에서는 데이터를 처리하는 로직을 작성하면 됩니다. 만약 데이터를 가져오는 도중에 오류가 발생한다면 catch() 함수에 전달된 콜백 함수가 호출됩니다.

데이터 시각화 하기

데이터를 가져왔으면, 이제 해당 데이터를 시각화하는 로직을 작성해보겠습니다. 자바스크립트에서 데이터 시각화를 위해 다양한 라이브러리를 사용할 수 있습니다. 여기서는 가장 널리 사용되는 Chart.js 라이브러리를 예시로 소개하겠습니다.

먼저, Chart.js 라이브러리를 프로젝트에 추가합니다. <script> 태그를 사용하여 라이브러리를 불러오는 코드를 HTML 파일에 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <title>데이터 시각화</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <!-- 시각화를 표시할 캔버스 요소 -->
  <canvas id="chart"></canvas>

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

그리고 자바스크립트 파일(app.js)에 아래와 같이 코드를 작성합니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 시각화 로직
    const ctx = document.getElementById('chart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: data.labels,
        datasets: [{
          label: 'Data',
          data: data.values,
          backgroundColor: 'rgba(0, 123, 255, 0.75)',
          borderColor: 'rgba(0, 123, 255, 1)'
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  })
  .catch(error => {
    console.error('데이터를 불러오는 중 오류가 발생했습니다:', error);
  });

위 코드에서는 Chart 클래스를 사용하여 캔버스 요소에 차트를 그리는 로직을 작성합니다. 데이터를 처리하는 부분에서는 가져온 데이터를 바탕으로 시각화를 위한 설정을 정의합니다. 이를 통해 데이터를 차트로 시각화할 수 있습니다.

마무리

이렇게 자바스크립트의 fetch API를 사용하여 데이터를 가져오고, Chart.js를 사용하여 데이터를 시각화하는 방법에 대해 알아보았습니다. fetch API는 웹 개발에서 데이터 통신에 유용하게 사용될 수 있으며, Chart.js와 같은 라이브러리를 활용하여 데이터 시각화를 더욱 효과적으로 할 수 있습니다.

다양한 데이터 시각화 라이브러리나 API를 활용하여 웹 개발 프로젝트에서 데이터를 시각화하는 방법을 탐구해보세요!