Next.js 15에서 Chart.js로 동적 데이터 시각화 마스터하기
2025-03-28 08:15:10Next.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 및 관련 라이브러리 설치하기
-
Next.js 프로젝트 생성:
npx create-next-app@latest my-chart-app또는 GitHub 레포지토리를 클론하여 시작할 수 있습니다.
-
프로젝트 디렉터리로 이동:
cd my-chart-app -
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로부터 데이터를 가져와 차트를 업데이트하는 방법을 알아보겠습니다.
-
JSON Server 설치:
npm install -g json-server -
데이터 파일 생성:
프로젝트 디렉터리에
_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를 사용하여 동적인 데이터 시각화를 어떻게 구현할 수 있는지 알아보았습니다. 이러한 기술을 활용하여 다양한 웹 애플리케이션에서 사용자가 원하는 데이터를 시각적으로 표현할 수 있습니다.