바이브 코딩 시작하기 Day 9
2026년 1월 24일 · 아홉 번째 날
남는 도메인 tftchess.com을 활용해서 새로운 원페이지 대시보드를 만들었다! 에어드랍 트래커, 리서치 노트, 캘린더, 할 일 관리를 한 페이지에 모아놓은 개인용 크립토 대시보드.
오늘 한 것들
1. shud-onepage 프로젝트 생성
기존에 WordPress로 방치하고 있던 tftchess.com 도메인에 새로운 Next.js 사이트를 만들었다. Cloudflare Pages를 먼저 시도했으나 Next.js 16 호환 문제로 Vercel로 전환.
2. Supabase 데이터베이스 연동
데이터를 영구 저장하기 위해 Supabase를 연동했다. PostgreSQL 기반이라 SQL로 테이블을 만들고, RLS(Row Level Security) 설정을 해제해서 사용.
3. 원페이지 대시보드 기능
한 페이지에 필요한 모든 기능을 모았다. PIN 로그인(1507)으로 편집 기능 잠금.
- • 에어드랍 트래커 - 태스크별 비용 관리 (Excel 스타일)
- • 코인 리서치 - 노트 + 감정(Bullish/Bearish/Neutral)
- • 캘린더 - 이벤트 + 메모
- • 할 일 목록 - 날짜별 관리
- • 김치 프리미엄 & 차익거래 기회 표시
4. 환경변수 삽질
Vercel에서 환경변수가 제대로 안 읽히는 문제 발생. "Invalid value" 에러가 계속 나서, 결국 Supabase 키를 코드에 직접 넣었다. (anon key는 공개해도 안전함)
TypeError: Failed to execute 'set' on 'Headers': Invalid value
환경변수가 undefined로 들어가서 발생한 에러. 하드코딩으로 해결.
5. 리서치 상세보기 개선
리서치 노트가 길어지면 잘리는 문제 발생. 풀스크린 상세보기로 변경하고, 적당한 폭(max-w-3xl)에서 자동 줄바꿈 되도록 수정.
배운 것
- •Cloudflare Pages는 Next.js 15.5.2까지만 지원 (16은 안 됨)
- •Supabase RLS가 기본 활성화라 DISABLE 해야 데이터 접근 가능
- •Vercel 환경변수는 NEXT_PUBLIC_ 접두사 필요 (클라이언트 노출용)
- •Supabase anon key는 공개해도 안전 (RLS로 보호됨)
- •whitespace-pre-wrap + max-width로 긴 텍스트 줄바꿈 처리
오늘의 숫자
5
DB 테이블
1
원페이지
1507
PIN 코드
2
호스팅 시도
완성된 기능
느낀 점
남는 도메인을 활용해서 유용한 걸 만들었다! 워드프레스 호스팅비 내던 걸 해지하고 Vercel 무료로 전환.
Supabase 연동은 생각보다 쉬웠는데, 환경변수 문제로 삽질을 많이 했다. 결국 하드코딩으로 해결한 건 좀 찝찝하지만... 작동하니까 OK!
원페이지 대시보드라 한 눈에 다 보여서 편하다. 에어드랍 관리할 때 유용하게 쓸 것 같다.
링크
다음에 할 것
- ☐ 리서치에 이미지 첨부 기능
- ☐ 광고 추가 (Google AdSense)
- ☐ 텔레그램 알림 연동
- ☐ 모바일 UI 개선