지출·소비 분석

지출의 입력·수정·삭제와 기간·분류별 조회, 월별 요약과 카테고리 분석을 구성한 개인 지출 관리 웹입니다. React 화면과 Express API, JWT 인증과 보호 경로를 함께 다뤘습니다.

사례: 기록과 분석을 잇는 개인 지출 관리
수행 유형: 제품·시연 사례
작업 범위: 지출 CRUD · 날짜·분류 필터 · 월별 요약 · 분류별 분석 · API · JWT 인증
자료: 제공된 제품 화면 · 예시 데이터

지출·소비 분석 사례 자료 1. 제공된 제품 화면 · 예시 데이터 — 01 / 03

지출·소비 분석 사례 자료 2. 제공된 제품 화면 · 예시 데이터 — 02 / 03

지출·소비 분석 사례 자료 3. 제공된 제품 화면 · 예시 데이터 — 03 / 03

입력과 조회가 이어지는 지출 관리

금액·카테고리·날짜·설명을 입력하는 양식을 구성하고, 목록에서 지출을 수정하거나 삭제하도록 만들었습니다. 카테고리와 시작·종료 날짜로 조회 범위를 정하고 내역의 금액과 합계를 살펴볼 수 있습니다.

월별 흐름과 카테고리 구성을 함께

전체 지출·월평균·사용 카테고리 수를 요약하고 월별 추이를 선형 차트로 표현했습니다. 월간 요약표와 카테고리별 막대·도넛 차트를 함께 두어 시간에 따른 변화와 분류별 구성을 살펴보도록 했습니다.

인증과 지출·분석 API

React 19·TypeScript 화면과 Node.js·Express 서버를 함께 구성했습니다. JWT 인증과 보호 경로, 지출 생성·조회·수정·삭제, 월별 요약과 카테고리 집계 API를 다룹니다. 요청 실패 시 오류 표시와 재시도 처리, Recharts 기반 시각화도 포함합니다.

PROJECT INFO