자바스크립트(fetch API)는 웹 브라우저에서 서버와 데이터를 주고받을 수 있는 강력한 기능 중 하나입니다. 데이터 시각화는 데이터를 시각적으로 표현하여 보다 쉽게 이해할 수 있게 해주는 중요한 작업입니다. 이번 글에서는 자바스크립트의 fetch API를 사용하여 데이터를 가져오고 시각화하는 방법에 대해 알아보겠습니다.

Fetch API로 데이터 가져오기

먼저, fetch API를 사용하여 서버에서 데이터를 가져오는 방법을 알아보겠습니다. fetch 함수는 Promise를 반환하며, 이를 통해 데이터를 비동기적으로 가져올 수 있습니다. 아래는 fetch API를 사용하여 JSON 데이터를 가져오는 예제입니다.

fetch('http://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터를 가져온 후에 수행할 작업
    console.log(data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

위의 예제에서는 fetch() 함수를 사용하여 ‘http://api.example.com/data’ 주소에서 데이터를 가져오도록 요청합니다. 응답은 response 객체로 반환되며, response.json()을 사용하여 JSON 형식으로 변환합니다. 변환된 데이터는 data 변수에 저장되어 로그에 출력됩니다.

데이터 시각화

데이터를 가져온 후에는 시각화하는 작업을 진행할 수 있습니다. 여러 방법이 있지만, Chart.js 라이브러리를 사용하여 예제를 작성해보겠습니다. Chart.js는 간단하게 사용할 수 있으며, 다양한 종류의 차트를 지원합니다.

먼저, Chart.js를 HTML 문서에 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

다음으로, 가져온 데이터를 Chart.js를 사용하여 시각화합니다.

fetch('http://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터를 가져온 후에 수행할 작업
    console.log(data);

    // Chart.js를 사용하여 데이터 시각화하기
    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.7)'
        }]
      }
    });
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

위의 예제에서는 Chart.js를 사용하여 막대 그래프를 그립니다. data.labels에는 X축 레이블, data.values에는 Y축 데이터가 포함되어 있어야 합니다. 이를 통해 데이터를 시각적으로 표현할 수 있습니다.

마치며

이제 자바스크립트 fetch API를 사용하여 데이터를 가져오고, Chart.js를 사용하여 데이터를 시각화하는 방법에 대해 알아보았습니다. 데이터 시각화는 복잡한 정보를 쉽게 이해할 수 있도록 도와주므로, 데이터 처리와 시각화 기술은 개발에서 중요한 역할을 합니다.

더 많은 데이터 시각화 기법과 라이브러리를 알고 싶다면, D3.js 등 다양한 도구와 자료를 참고해보시기 바랍니다.