Vanilla JS와 Supabase 기반의 No-Login 탄소 추적 시스템 구축

I Built a Carbon Footprint Tracker in 48 Hours — Here's How Copilot Saved Me

HARD IN SOFT OUT2026년 4월 18일3분beginner

AI 요약

Context

기존 탄소 계산기의 지나친 단순함 또는 기업 보고서 중심의 복잡한 구조로 인한 사용자 접근성 저하 문제 발생. 정확한 데이터 산출과 사용자 이탈 방지를 위한 UX 최적화 사이의 Trade-off 해결 필요.

Framework-less 설계를 통한 빌드 단계 제거 및 런타임 오버헤드 최소화
localStorage 기반 persistent device_id 생성 및 Supabase Row-Level Security(RLS) 결합을 통한 익명 클라우드 동기화 구조 설계
Chart.js 인스턴스의 명시적 destroy 호출을 통한 메모리 누수 방지 및 캔버스 컨텍스트 초기화 로직 구현
전 세계 Electricity Maps API 연동을 통한 국가별 실시간 전력 그리드 탄소 집약도 반영
15개 이상의 입력 필드를 Collapsible Section으로 그룹화하여 데이터 입력 부하를 줄인 UX 설계

실천 포인트

1. 사용자 인증 없이 데이터를 유지해야 할 경우 device_id 생성과 DB RLS 정책을 조합하여 보안성 확보

2. 차트 라이브러리 사용 시 런타임 에러 방지를 위해 이전 인스턴스의 생명주기를 명확히 관리

3. 초기 프로토타이핑 단계에서 Boilerplate 코드를 줄이기 위해 AI 도구를 활용한 설정 객체 생성 및 정규식/인코딩 로직 자동화 검토

태그