Vibe CodingDay 3
바이브 코딩 시작하기 Day 3
2026년 1월 19일 · 세 번째 날
오늘은 대시보드에 실시간 데이터를 연동하고, Todo List를 만들었다. 그리고 프로덕션 배포에서 버그를 만나고 해결하는 과정을 경험했다. 실제 서비스를 운영할 때 겪는 문제를 미리 맛본 느낌!
오늘 한 것들
1. 대시보드 풀 업그레이드
어제 만든 대시보드를 완전히 업그레이드했다. 3개 코인에서 9개 코인으로 확장하고, 차익거래 기회를 자동으로 계산해서 보여주는 기능을 추가했다.
- ✓ 9개 코인 지원 (BTC, ETH, SOL, DOGE, AVAX, ARB, SUI, LINK, XRP)
- ✓ 차익거래 기회 TOP 3 카드
- ✓ 예상 일일 수익률 계산
- ✓ 60초 자동 새로고침 타이머
- ✓ 코인별 롱/숏 전략 표시
Next.js API RoutesReal-time Data
2. Todo List + 텔레그램 알림
개인 생산성 툴을 만들었다. 할 일을 추가하거나 완료하면 텔레그램으로 알림이 온다. PIN 잠금 기능도 넣어서 나만 사용할 수 있게 했다.
📌 새 할 일 추가
📝 블로그 Day 3 작성
⏰ 오후 10:30:45
- ✓ 할 일 추가/완료/삭제
- ✓ 텔레그램 실시간 알림
- ✓ PIN 코드 잠금 (보안)
- ✓ 일일 요약 보내기 기능
3. 버그와의 싸움 (React Hooks)
로컬에서는 잘 되는데 Vercel 배포하니까 Todo 페이지에서 에러가 났다. "Application error: a client-side exception has occurred" 이런 에러...
문제의 코드:
if (!isAuthenticated) {
return <PinScreen />; // 여기서 리턴
}
// ❌ useEffect가 조건부 return 아래에!
useEffect(() => {
localStorage.setItem(...);
}, [todos]);원인: React Hooks는 항상 같은 순서로 호출되어야 하는데, 조건부 return 아래에 useEffect를 넣어서 규칙 위반이 됐다.
해결: 모든 useEffect를 조건문 위로 이동시켰더니 해결!
배운 것
- •Next.js API Routes로 서버사이드 데이터 처리 (CORS 해결)
- •React Hooks 규칙: 조건문 안에서 hooks 호출하면 안 됨!
- •Hydration 에러: 서버/클라이언트 상태 불일치 해결법
- •텔레그램 Bot API로 웹에서 알림 보내기
- •로컬 vs 프로덕션 환경 차이 (배포하면 다른 에러 발생)
오늘의 숫자
9
코인 지원
2
새 기능
3
버그 수정
7
커밋
느낀 점
오늘 버그 잡으면서 진짜 개발자가 된 기분이었다. 로컬에서 되는데 배포하면 안 되는 거, React Hooks 규칙 위반... 이런 게 실제 개발하면서 겪는 문제구나 싶었다.
Claude한테 에러 메시지 보여주니까 바로 원인 찾아서 해결해줬다. 혼자였으면 몇 시간은 걸렸을 것 같은데, 바이브 코딩의 힘!
내일 할 것
- ☐ 자동매매 봇 (페이퍼 트레이딩)
- ☐ 더 많은 DEX 추가 (Nado, Extended)
- ☐ 펀딩비 히스토리 차트