Archive · 2024 · Development
가계부를 부탁해!
1/4
- Duration
- 2024.01 — 2024.03
- Role
- 개인 프로젝트 · 단독 개발
- Skills / Tools
- ReactTypeScriptNode.jsExpressMongoDBViteTanStack QueryRecoilReact RouterStyled-componentsNivo
- Related Link
- savebudget.app
Key Accomplishment
- 클라이언트와 서버를 하나의 모놀리식 리포지토리로 구성하고, 서비스 요구사항에 맞춰 API와 데이터 스키마 설계
- TanStack Query의 infiniteQuery로 지출 내역 무한 스크롤과 데이터 상태를 구현하고 fetchStatus·hasNextPage 기반 loader UI 구성
- date-fns·react-day-picker로 기간별 지출 조회를 제공하고, Nivo로 자산 등록·조회·수정 및 그래프 시각화 구현
- Mustache·Nodemailer 기반 멤버 초대 이메일, React Portal 기반 재사용 dropdown·modal, Media Query 기반 반응형 UX 구현
Architecture
모놀리식 리포지토리 안에서 React 클라이언트와 Express API를 연결하고, TanStack Query로 필요한 지출 구간만 이어 받아 렌더링합니다.
Technical Challenges
- 거래 데이터가 누적될수록 전체 목록 조회 비용이 커지는 문제를 TanStack Query infiniteQuery 기반 무한 스크롤로 전환하고, fetchStatus·hasNextPage에 따라 로더를 제어했습니다.
- 서버 데이터와 화면 상태를 분리하고 mutation 이후 캐시를 무효화해, 사용자가 직접 새로고침하지 않아도 여러 화면의 목록을 동기화했습니다.
- 클라이언트와 서버가 한 리포지토리에서 함께 동작하는 모놀리식 구조에서 API·스키마·라우팅·인증 경계를 분리해 기능이 커져도 각 책임을 추적할 수 있도록 했습니다.
- 기간 필터, 자산 차트, 멤버 초대처럼 서로 다른 UI 흐름을 공통 상태·Portal 컴포넌트·반응형 규칙으로 묶어 Desktop과 Mobile에서 같은 도메인 상태를 유지했습니다.
Details
가계부를 부탁해!는 지출과 자산을 함께 관리하는 개인 프로젝트입니다. 클라이언트와 서버를 하나의 모놀리식 리포지토리로 구성하고, 프로젝트 요구사항을 충족하는 API와 데이터 스키마를 직접 설계했습니다.
React Router로 페이지 라우팅과 navigate·redirect를 구현하고, TanStack Query 커스텀 훅의 infiniteQuery로 지출 내역을 필요한 구간씩 불러왔습니다. fetchStatus와 hasNextPage를 사용해 로딩 상태와 다음 데이터 존재 여부도 화면에 반영했습니다.
date-fns와 react-day-picker로 특정 기간의 지출을 조회하고, Nivo 차트로 자산을 그래프 형태로 확인·수정할 수 있도록 구성했습니다. 멤버 초대는 Mustache 이메일 템플릿과 Nodemailer로 처리했습니다.
페이지별 Open Graph 메타데이터, React Portal 기반 dropdown·modal, Desktop과 Mobile을 함께 고려한 반응형 UX까지 구현했습니다. 구현 과정은 개발 블로그의 TanStack Query 무한 스크롤 글로도 정리했습니다.