Recharts로 포트폴리오 Insights 차트 만들기

2026-07-24

Recharts로 포트폴리오 Insights 차트 만들기

0. 작업 목표

목적: 포트폴리오에 스터디·프로젝트 활동 통계를 시각화하는 Insights 페이지를 추가.
조건: 기존 Next.js + React 스택과 잘 맞고, 막대/파이 정도의 단순 차트에 과하지 않을 것.
결과: Recharts 라이브러리로 /insights 페이지에 월별 스터디, 카테고리, 프로젝트 구성, 기술 스택 차트를 구현.

1. Recharts란?

Recharts는 React용 차트 라이브러리입니다.

JSX로 BarChart, PieChart, XAxis 같은 컴포넌트를 조합해 차트를 그립니다.
렌더링은 주로 SVG 기반입니다.
개발자가 필요할 때 가져다 쓰는 구조라 프레임워크가 아니라 라이브러리에 가깝습니다.

import { BarChart, Bar, XAxis, YAxis } from "recharts";

<BarChart data={data}>
  <XAxis dataKey="label" />
  <YAxis />
  <Bar dataKey="value" fill="#d97706" />
</BarChart>

차트 흐름을 내가 조립하는 방식이라, 포트폴리오처럼 페이지 단위로 기능을 붙일 때 다루기 쉽습니다.

2. 왜 Recharts를 선택했나

당시 프로젝트는 Next.js 14 + React 18이었고, 필요한 시각화는 다음과 같았습니다.

월별 스터디 게시글 수 (세로 막대)
카테고리별 / 기술 스택별 비중 (가로 막대)
현업·개인 프로젝트 비율 (파이)

후보	판단
Recharts	React 선언형 API, 학습·구현 비용이 낮음 → 선택
Chart.js	가능하지만 React 연동 래핑이 한 단계 더 필요
D3 / Nivo	표현력은 좋지만 이번 범위에는 무거움

선택 이유 요약

React 컴포넌트와 같은 감각으로 작성 가능
막대/파이만으로 충분한 요구사항에 맞음
기존 stone / amber 톤 색상을 props로 맞추기 쉬움
포트폴리오 번들에 과도한 의존성을 늘리지 않음

3. 포트폴리오에 어떻게 적용했는지

3.1 설치

npm install recharts

3.2 데이터는 이미 있는 소스를 집계

별도 DB 없이, 포트폴리오에 있는 배열을 집계했습니다.

차트	데이터 소스	집계 내용
월별 스터디	`STUDY_POSTS`	연도별 1~12월 게시글 수
카테고리별 스터디	`STUDY_POSTS`	`categoryId`별 개수
프로젝트 구성	`WORK_PROJECTS`, `PERSONAL_PROJECTS`	현업 / 개인 개수
기술 스택	프로젝트 `tech` 필드	language / framework / library / devops 출현 빈도

집계 로직은 insights/stats.ts에 모아 두었고, 차트 UI는 insights/components/InsightsCharts.tsx에서 Recharts로 그립니다.

스터디·프로젝트를 constants에 추가하면 Insights에도 같이 반영됩니다.

3.3 실제 사용 예시 (월별 스터디 막대)

<ResponsiveContainer width="100%" height="100%">
  <BarChart data={data} margin={{ top: 48, right: 20, left: -8, bottom: 4 }}>
    <CartesianGrid stroke={theme.grid} vertical={false} />
    <XAxis dataKey="label" interval={0} />
    <YAxis allowDecimals={false} />
    <Bar
      dataKey="value"
      fill={theme.bar}
      radius={[4, 4, 0, 0]}
      maxBarSize={28}
      isAnimationActive={false}
      onMouseEnter={(item) => {
        // 막대 좌표로 HTML 말풍선 표시
      }}
    />
  </BarChart>
</ResponsiveContainer>

ResponsiveContainer: 부모 크기에 맞춰 차트 리사이즈
BarChart + Bar: 세로 막대
isAnimationActive={false}: 불필요한 진입 애니메이션 제거
연도 드롭다운으로 2025 / 2026을 나누고, 각 연도는 1~12월 전부 표시

3.4 파이 차트 예시 (프로젝트 구성)

<PieChart>
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    innerRadius={52}
    outerRadius={78}
    paddingAngle={3}
  >
    {data.map((entry, index) => (
      <Cell key={entry.name} fill={index === 0 ? theme.bar : theme.barMuted} />
    ))}
  </Pie>
</PieChart>

도넛 형태(innerRadius)로 현업/개인 비중을 보여 줍니다.

4. 적용하면서 겪은 포인트

4.1 기본 Tooltip보다 커스텀 말풍선

Recharts 기본 Tooltip은 애니메이션이나 위치 이슈가 있어, 최종적으로는 막대 onMouseEnter 좌표를 받아 HTML 말풍선을 띄우는 방식으로 맞췄습니다.
차트는 Recharts가 그리고, 호버 UI는 프로젝트 톤에 맞게 직접 제어하는 구조입니다.

4.2 값이 0인 막대

Recharts는 높이가 0인 막대를 렌더에서 빼는 경우가 있습니다.
처음엔 빈 달까지 한 그래프에 넣었다가 인덱스가 어긋나는 문제가 있었고, 이후에는 연도별로 나누고 1~12월을 고정하는 방식으로 정리했습니다.

4.3 축 라벨 잘림

12월 라벨 "12"가 오른쪽에서 잘려 "2"처럼 보이던 이슈가 있었습니다.
margin.right와 XAxis padding을 늘려 해결했습니다.

5. 정리

Recharts는 React에서 차트를 빠르게 붙이기 좋은 차트 라이브러리다.
이 포트폴리오에서는 Insights 페이지의 활동 통계(스터디·프로젝트·스택) 시각화에 사용했다.
데이터는 기존 STUDY_POSTS / 프로젝트 배열을 집계해 넘기므로, 콘텐츠를 추가하면 차트도 함께 갱신된다.
라이브러리가 차트 본체는 잘 담당하고, 말풍선·연도 필터·테마 색 같은 UX는 서비스 요구에 맞게 커스텀하는 편이 안정적이었다.

참고

공식 문서: https://recharts.github.io
적용 페이지: /insights
관련 파일:
- portfolio/src/app/insights/stats.ts
- portfolio/src/app/insights/components/InsightsCharts.tsx