Next.js 15에서 Chart.js로 동적 데이터 시각화 마스터하기

Next.js 15와 Chart.js를 활용한 데이터 시각화 완벽 가이드

현대 웹 애플리케이션에서 데이터 시각화는 사용자에게 다양한 분석 정보를 직관적으로 제공할 수 있는 강력한 도구입니다. 특히 Next.js 같은 강력한 프레임워크와 Chart.js를 함께 사용하면 풍부한 데이터 시각화 경험을 구현할 수 있습니다. 이번 블로그 포스팅에서는 Chart.js를 Next.js 프로젝트에 통합하여 활용하는 방법을 소개합니다.

Chart.js와 Next.js 소개

Chart.js는 JavaScript 기반의 라이브러리로, 간단하고 쉽게 아름다운 차트를 만들 수 있도록 도와줍니다. Next.js는 React 프레임워크의 확장판으로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등을 지원하여 성능을 극대화할 수 있습니다. 이 두 도구를 함께 사용하면 대화형 데이터 시각화가 가능합니다.

Chart.js를 Next.js 애플리케이션에 도입해야 하는 이유

Next.js 애플리케이션에 Chart.js를 통합하면 대화형 시각화를 통해 사용자 경험(UX)을 크게 향상시킬 수 있습니다. 특히 Next.js의 서버 사이드 렌더링을 통해 초기 로딩 시간을 단축함으로써 성능을 개선할 수 있습니다. 이러한 통합은 다양한 API에서 데이터를 손쉽게 가져와 구현할 수 있습니다.

Chart.js 및 관련 라이브러리 설치하기

1. Next.js 프로젝트 생성:

   npx create-next-app@latest my-chart-app
   

   또는 GitHub 레포지토리를 클론하여 시작할 수 있습니다.

2. 프로젝트 디렉터리로 이동:

   cd my-chart-app
   

3. Chart.js와 React-Chartjs-2 설치:

   React-Chartjs-2는 Chart.js의 React 래퍼입니다.

   npm install chart.js react-chartjs-2
   

Next.js의 렌더링 메소드 이해

Next.js는 다양한 렌더링 방식을 제공하여 사용자의 요구에 맞게 성능을 조정할 수 있습니다. Chart.js는 브라우저 의존성이 있는 라이브러리이므로 서버에서 렌더링될 때 오류가 발생할 수 있습니다. 이를 방지하기 위해 클라이언트에서만 동적으로 임포트하는 방법을 사용할 수 있습니다.

"use client";

이 코드를 추가함으로써 Chart.js가 클라이언트 측에서만 로드되도록 할 수 있습니다.

첫번째 차트 만들기

Chart.js가 정상적으로 설치되었다면, 이제 데이터를 시각화할 차트를 만들어 봅시다. 여기에서는 JSON Server를 사용하여 API로부터 데이터를 가져와 차트를 업데이트하는 방법을 알아보겠습니다.

1. JSON Server 설치:

   npm install -g json-server
   

2. 데이터 파일 생성:

   프로젝트 디렉터리에 _data 폴더와 db.json 파일을 생성합니다. 이 파일에 아래와 같은 진단 기록 데이터를 입력합니다.

   {
     "diagnosis": [
       {
         "month": "3월",
         "year": 2025,
         "blood_pressure": {
           "systolic": {
             "value": 160,
             "levels": "평균 이상"
           },
           "diastolic": {
             "value": 78,
             "levels": "평균 이하"
           }
         },
         "heart_rate": {
           "value": 78,
           "levels": "평균 이하"
         },
         "respiratory_rate": {
           "value": 20,
           "levels": "정상"
         }
       }
     ]
   }
   

JSON Server로 실시간 데이터 가져오기

JSON Server를 실행하여 데이터를 가상 API로 서비스합니다. 이를 통해 Next.js 애플리케이션에서 데이터를 즉시 가져와 차트에 반영할 수 있습니다.

json-server --watch _data/db.json --port 3001

데이터를 차트에 시각화하기

React 컴포넌트 안에 react-chartjs-2의 컴포넌트를 활용하여 차트를 생성 및 구성합니다. 차트에 데이터베이스로부터 직접 가져온 데이터를 적용하면 사용자에게 실시간으로 데이터를 시각적으로 제공할 수 있습니다.

import { Line } from "react-chartjs-2";

const ChartComponent = ({ diagnosisData }) => {
  const data = {
    labels: diagnosisData.map(d => `${d.month} ${d.year}`),
    datasets: [
      {
        label: "수축기 혈압",
        data: diagnosisData.map(d => d.blood_pressure.systolic.value),
        borderColor: "rgba(75, 192, 192, 1)",
        borderWidth: 1,
      },
    ],
  };

  return <Line data={data} />;
};

fetch 또는 axios를 사용해 Next.js API 라우트를 구현하여 JSON Server에서 데이터를 가져오는 코드를 추가하면 됩니다.

최적화 및 성능 개선

Chart.js와 Next.js를 함께 사용할 때 성능을 최적화하는 것이 중요합니다. 특히 큰 데이터를 다룰 때는 데이터 가공과 차트 렌더링의 시간을 최소화하도록 코드를 작성해야 합니다.

마무리

이번 포스팅에서는 Next.js와 Chart.js를 사용하여 동적인 데이터 시각화를 어떻게 구현할 수 있는지 알아보았습니다. 이러한 기술을 활용하여 다양한 웹 애플리케이션에서 사용자가 원하는 데이터를 시각적으로 표현할 수 있습니다.

---

Next.js 공식 문서
Chart.js 공식 문서
React Chart.js 2