포스트마크 거래 분석 대시보드 구현
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발자 및 데이터 시각화에 관심 있는 개발자
- FastAPI, MongoDB, React 기술 스택 사용 경험자
- 이메일 기반 거래 데이터 처리 시스템 구축이 필요한 개발자
핵심 요약
- FastAPI + MongoDB + React 기반의 실시간 거래 분석 대시보드 구현
- Postmark Inbound Webhooks와 LLM을 활용한 이메일 기반 거래 자동 파싱
- Render.com에서 Docker 없이 단일 서비스 배포 가능
섹션별 세부 요약
1. 시스템 개요
- 이메일에서 자동으로 은행 거래 추출 및 시각화 기능 제공
- MongoDB에 거래 내역 저장 후 Pie Chart 기반 통계 분석 제공
- FastAPI 백엔드와 React 프론트엔드 구성
2. 기술 스택
- 백엔드:
FastAPI
,MongoDB
사용 - 프론트엔드:
React
기반 대시보드 개발 - 이메일 파싱:
Postmark Inbound Webhooks + LLM
활용 - 배포:
Render.com
에서 Docker 없이 간단한 배포 가능
3. 데이터 형식 및 설정
- MongoDB에 삽입할 샘플 데이터:
```json
{
"is_transaction": true,
"bank_name": "ICICI Bank",
"amount": 2590,
"currency": "INR",
"transaction_type": "debit",
"confidence": 100
}
```
.env
파일에LLM_API_KEY
,MONGO_URL
,VITE_SITE_URL
설정 필요
4. 로컬 개발 환경 구축
ngrok http 8000
으로 로컬 서버 노출 후 Postmark Webhook 설정uvicorn app.main:app --reload
으로 FastAPI 서버 실행- 프론트엔드:
npm install
후npm run dev
로 개발 서버 실행
결론
- Render.com과 ngrok을 활용한 간편한 배포 및 로컬 개발 환경 구성
- LLM 기반 이메일 파싱과 MongoDB 집계 기능을 통해 실시간 거래 분석 가능
- Docker 없이도 단일 서비스 배포 가능해 개발 복잡도를 줄일 수 있음