NutriTrack — React, Supabase 및 Real Food Data 로 풀스택 영양 트래커를 만든 방법
Source: Dev.to
위 링크에 있는 글의 전체 내용을 제공해 주시면, 해당 텍스트를 한국어로 번역해 드리겠습니다. (코드 블록, URL 및 기술 용어는 그대로 유지됩니다.)
소개
저는 브라질 출신의 독학 개발자로, 아직 배우는 중이며 실제로 사용하고 싶은 것들을 만들고 있습니다. 웹 개발을 공부한 뒤, 단순한 할 일 목록보다 더 유용한 무언가를 만들 때가 되었다고 판단했습니다.
영양을 진지하게 관리하려고 시도해 본 적이 있다면 그 어려움을 잘 아실 겁니다. MyFitnessPal 같은 인기 앱은 필수 기능을 유료 장벽 뒤에 숨기거나 미국·유럽 제품에 초점을 맞춘 데이터베이스에 의존해 브라질 음식이 누락되거나 부정확하게 표시됩니다.
NutriTrack은 브라질 사람들이 실제로 먹고 쇼핑하는 방식을 기반으로 설계된 영양 관리 시스템이며, 전 세계 어디서든 사용할 수 있을 만큼 유연합니다.
핵심 기능
개인 식품 은행
무언가를 기록하기 전에 먼저 개인 식품 은행을 구축합니다—정기적으로 섭취하는 모든 식품의 목록입니다. 디지털 식료품 저장고 카탈로그라고 생각하면 됩니다.
Open Food Facts 연동
영양표를 직접 입력하는 대신 제품 이름을 검색하면 앱이 Open Food Facts API를 호출합니다. 이 API는 전 세계 300만 개 이상의 제품을 포함한 크라우드소싱 데이터베이스이며, 특히 브라질 카탈로그가 풍부합니다.
일일 기록
- 식품 은행에서 식품을 선택합니다.
- 식사 종류를 선택합니다.
- 양을 입력합니다(그램 또는 사용자가 설정한 단위).
- 앱이 즉시 칼로리, 단백질, 탄수화물, 지방을 계산합니다.
실시간 합계
페이지 상단에서 실시간으로 일일 합계를 확인할 수 있습니다: 총 칼로리, 총 단백질, 그리고 개인 목표 대비 진행 상황을 보여주는 진행 바.
예시: 목표 = 2,500 kcal, 섭취 = 1,800 kcal → 바가 72 %를 표시합니다.
식단 계획 (14일 그리드)
스케줄링 페이지에 2주 그리드가 표시되어 앞으로의 날짜에 대한 완전한 식단 계획을 만들 수 있습니다.
맞춤 영양 목표
기본값 대신 사용자가 직접 목표(예: 칼로리, 단백질)를 설정합니다. 일일 계획 페이지에서는 이러한 목표 대비 진행률을 백분율로 보여주어, “칼로리는 60 %인데 단백질은 35 %에 불과해”와 같이 비례적으로 생각하도록 돕습니다.
근처 매장 기능
브라우저의 GPS, OpenStreetMap 데이터, 그리고 Overpass API를 활용해 사용자의 위치 근처에 있는 슈퍼마켓과 약국을 찾아줍니다—완전 무료이며 API 키가 필요 없습니다.
기술 선택
Supabase (주 백엔드)
Supabase는 실제 PostgreSQL을 사용하여 적절한 관계형 테이블, SQL 쿼리 및 행 수준 보안(RLS)을 제공하기 때문에 Firebase보다 선택되었습니다. 관대한 무료 티어와 뛰어난 개발자 대시보드가 명확한 승자를 만들었습니다.
데이터베이스 접근 레이어 (db.js)
모든 데이터베이스 상호작용에 대한 단일 진실 소스. 프론트엔드가 user_id 로 필터링하더라도 실제 보안은 RLS 정책을 통해 데이터베이스에 존재합니다.
-- Example RLS policy (PostgreSQL)
create policy "user_can_access_own_data"
on logs
for all
using (user_id = auth.uid());로그의 스냅샷 값
화요일에 “150 g 닭 가슴살”을 기록하면, 앱은 영양값을 그 순간의 값대로 (snap_calories, snap_protein, snap_carbs, snap_fat) 저장합니다. 이러한 스냅샷은 로그 행에 직접 저장되어 과거 정확성을 보존합니다.
OAuth 흐름
Supabase(및 대부분의 OAuth 제공자)는 이메일을 기준으로 계정을 연결합니다. Google과 GitHub 계정이 동일한 이메일을 공유하면 동일한 user_id 로 매핑되어 로그인 제공자를 전환해도 접근 권한을 잃지 않습니다. 구현은 오래된 Implicit 흐름을 피하고 PKCE 흐름을 사용합니다.
인근 매장 구현
- 데이터 소스: Overpass API를 통한 OpenStreetMap (크라우드소싱, 폭넓지만 가끔 부정확).
- 정규화 문제: 도시 이름이 다양한 대소문자(
'City Two','city two'등)로 들어왔습니다. 정규화가 없으면 도시 필터가 중복 항목을 표시했습니다. 문자열을 표준화하여 렌더링 전에 해결했습니다.
오픈 소스
NutriTrack은 MIT 라이선스 하에 완전 오픈 소스입니다. 저장소에는 다음이 포함됩니다:
- Supabase 데이터베이스용 전체 SQL 스키마.
- 필수 환경 변수가 포함된
.env.example파일. - README에 있는 단계별 설정 안내.
실시간 데모: