MERN 스택으로 AI 기반 지출 추적기 만들기
I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) here? Once I have it, I’ll keep the source link at the top and translate the rest into Korean while preserving all formatting, markdown, and code blocks.
개요
개인 재정을 관리하는 것은 어려울 수 있습니다. 많은 지출 추적기가 거래를 기록하거나 기본 차트만 보여주는 반면, 이 프로젝트는 더 스마트한 솔루션을 구축합니다: AI 기반 지출 추적기로, 지출을 기록할 뿐만 아니라 행동을 분석하고 실행 가능한 인사이트를 제공합니다.
이 애플리케이션은 MERN 스택으로 구축되었으며 LLaMA 3.3와 Groq SDK를 사용한 AI 재무 코치를 통합합니다. 이는 프로그레시브 웹 앱(PWA) 형태로 제공되어 설치 가능하고, 오프라인에서도 작동하며, 다양한 기기에서 반응형으로 동작합니다.
🔗 Live demo: https://adithyan-phi.vercel.app/project/expense-tracker
핵심 기능
비용 관리
- 실시간 대시보드 업데이트와 함께 비용을 추가, 편집 및 삭제합니다.
- 거래를 카테고리별(음식, 여행, 청구서 등)로 분류하고 AI를 사용해 자동 분류합니다.
- 인터랙티브 Recharts 시각화를 통해 월별 지출 세부 내역, 최근 거래 및 저축 추세를 확인합니다.
예산 및 알림
- 월별 예산을 설정하고 선택적으로 50/30/20 규칙(필수, 욕구, 저축) 분석을 제공합니다.
- 예산 사용량이 30 %, 50 %, 90 %, 100 %에 도달하면 이메일 알림을 받습니다.
- 다크 테마가 적용된 풍부한 HTML 이메일 알림을 제공합니다.
인증 및 보안
- 안전한 회원가입을 위한 2단계 이메일 OTP 인증.
- 보호된 라우트와 세션을 위한 JWT 기반 인증.
프로그레시브 웹 앱 (PWA) 기능
- 대시보드 접근을 위한 오프라인 캐싱.
- 모바일 및 데스크톱에 설치 가능.
- 라이트, 다크 및 커스텀 테마 지원.
AI 재무 코치
- LLaMA 3.3 및 Groq SDK 기반.
- 사용자는 자연어 질문을 할 수 있습니다. 예:
- “이번 달 음식에 얼마나 쓰고 있나요?”
- “저축을 더 늘리려면 어떤 팁이 있나요?”
- AI가 사용자 데이터를 분석하여:
- 비정상적인 지출 패턴을 감지합니다.
- 반복 구독을 식별합니다.
- 실행 가능한 저축 조언을 제공합니다.
- 인도 루피(₹)로 인사이트를 현지화합니다.
기술 스택
| 계층 | 기술 |
|---|---|
| 프론트엔드 | React.js, Vite, VitePWA, Recharts, Framer Motion |
| 백엔드 | Node.js, Express.js |
| 데이터베이스 | MongoDB, Mongoose |
| 인증 | JWT, Nodemailer (OTP) |
| AI 통합 | Groq SDK, LLaMA 3.3 |
| 스타일링 | 다크‑테마 지원, 맞춤 테마 |
아키텍처 하이라이트
- Scalable Data Models: 비용, 예산, 사용자 프로필을 위한 MongoDB 스키마를 설계했습니다.
- Secure Auth Flow: 세션 관리를 위해 OTP 검증을 구현하고 JWT를 발급했습니다.
- AI Response Pipeline: Groq SDK를 통합하여 사용자 질의와 비용 데이터를 LLaMA 3.3에 전송하고, 로컬화된 응답을 포맷했습니다.
- Performance Optimizations: Vite의 빠른 번들링, 지연 로드 차트 컴포넌트, 그리고 오프라인 지원을 위한 서비스 워커를 활용했습니다.
주요 학습 내용
- 실시간 업데이트를 위한 WebSockets(또는 유사 기술)를 사용한 풀스택 MERN 애플리케이션 구축은 사용자 경험을 향상시킵니다.
- PWA 기능(서비스 워커, 캐싱 전략) 구현은 오프라인 복원력을 제공하면서 UX를 손상시키지 않습니다.
- LLM을 프로덕션 앱에 통합하려면 프롬프트 엔지니어링과 데이터 정제에 신중을 기해 AI 응답의 정확성과 컨텍스트 인식을 유지해야 합니다.
- OTP 흐름과 JWT를 결합한 보안 인증은 현대 웹 앱에 강력한 인증 메커니즘을 제공합니다.
시작하기
- 리포지토리를 클론합니다.
- 클라이언트와 서버 모두에 대한 의존성을 설치합니다 (
npm install). - MongoDB, JWT 비밀키, 이메일 서비스, 그리고 Groq API 키에 대한 환경 변수를 설정합니다.
- 개발 서버를 실행합니다 (
npm run dev는 Vite,npm start는 Express).
결론
AI 기반 비용 추적기를 구축하면서 풀스택 개발 역량이 향상되고, PWA 기능을 선보였으며, 실제 애플리케이션에 생성형 AI를 통합하는 방법을 입증했습니다. MERN 스택을 학습하고 있다면 기본 CRUD를 넘어서는 프로젝트에 도전해 보세요—실제 문제를 해결하고, 최신 기술을 실험하며, 사용자 경험을 최우선으로 고려하십시오.
실제 앱을 탐색하고, 소스 코드를 검토하고, 질문이나 피드백이 있으면 언제든지 연락 주세요.