프론트엔드 vs 백엔드

        ↕ 화면 보고, 버튼 누르고                                    

  🎨 프론트엔드                               
  - 화면 구성, 사용자 입력 받기                
  - Next.js (React 기반)                      

        ↕ 데이터 주고받기 (API)                                     

  ⚙️ 백엔드                                   
  - 데이터 저장, 인증, 비즈니스 로직           
  - Supabase                                 

        ↕ 데이터 저장/불러오기                                      

  💾 데이터베이스                             

├── HTML: 화면의 뼈대. "여기 버튼 넣어줘, 여기 글자 넣어줘"
├── CSS: 화면의 옷. "버튼 색깔 빨간색, 글자 크기 20px"
├── JavaScript: 화면의 두뇌. "버튼 누르면 이거 해라"
├── React: JavaScript를 편하게 쓰는 도구 (인기 많음)
└── Next.js: React를 더 편하게 쓰는 도구 (이 시리즈에서 사용)

⚙️ 백엔드 기술 (데이터 저장하는 도구)
└── Supabase: 백엔드를 통째로 빌려쓰는 서비스
              (DB + 로그인 + 파일저장 다 해줌. 바이브 코더 필수템)

🚀 배포 (만든 걸 인터넷에 올리는 도구)
└── Vercel: Next.js 만든 회사에서 운영하는 배포 서비스
            (GitHub 연결하면 자동으로 배포됨)

├── localStorage (로컬 스토리지)
  - 내 브라우저에만 저장됨
  - 새로고침해도 남아있음
  - 근데 다른 기기에서는 안 보임
  - 예: 메모장에 혼자 적어둔 것

└── DB (데이터베이스)
    - 서버에 저장됨
    - 어디서든 접근 가능
    - 다른 사람도 같은 데이터 볼 수 있음
    - 예: 구글 드라이브에 올린 것

├── id: 고유 번호
├── title: 할 일 내용
├── done: 완료 여부 (true/false)
└── created_at: 만든 날짜

   - 계산기, 단위 변환기
   - 타이머, 스톱워치
   - 메모장 (단, 새로고침하면 사라짐)

❌ 백엔드 필요
   - 회원가입/로그인 → 사용자 정보 저장
   - 게시글 → 다른 사람도 봐야 함
   - 좋아요 수 → 모든 사람이 같은 숫자
   - 장바구니 → 다음에 와도 남아있어야 함

대표적인 BaaS:
- Supabase: DB + 인증 + 저장소 (바이브 코더 추천)
- Firebase: 구글에서 만든 BaaS

 프론트 (내가 만듦) ↔ 백엔드 (내가 만듦) ↔ DB    
 BaaS 쓸 때                                     
 프론트 (내가 만듦) ↔ Supabase (이미 구현됨)     

 나: "할 일 관리 서비스 만들 건데,                                      
     프론트는 Next.js로, 백엔드는 Supabase 쓸 거야."                    

 AI: "Supabase 쓰면 백엔드 코드 거의 안 짜도 돼요.                      
     프론트에서 Supabase 클라이언트로 바로 DB 접근하면 됩니다."         

 나: "좋아. 프론트에서 어떻게 구성할지 추천해봐."                        

 AI: "프론트엔드 구조 제안드려요:                                       
     - 로그인 페이지 (Supabase Auth 연동)                             
     - 할 일 목록 페이지                                              
     - 할 일 추가 폼                                                  
     이렇게 3개 페이지로 구성하면 어떨까요?"                            

 나: "오케이, 그렇게 가자."                                            


 2단계: 화면 만들기 + 확인                                              

 나: "로그인 페이지부터 만들어줘.                                       
     이메일/비밀번호 입력창이랑 로그인 버튼 있어야 돼."                  

 AI: "Next.js로 로그인 폼 만들었어요. 확인해보세요."                    

 [기능 단위로 직접 확인]                                               
 - 이메일/비밀번호 입력 → 잘 됨                                        
 - 로그인 버튼 클릭 → 어? 에러 나네?                                   

 나: "로그인 버튼 누르니까 에러 나. 뭐가 문제야?"                        

 AI: "Supabase 환경변수 설정 확인해보세요."                             

 나: "아, 환경변수 설정 안 했네. 추가했어."                             

 [다시 확인] → 로그인 잘 됨!                                           


 3단계: 데이터 연결                                                     

 나: "할 일 목록 페이지 만들어줘.                                       
     Supabase DB에서 데이터 가져와서 보여주고,                         
     추가하면 DB에 저장하게 해줘."                                     

 AI: "할 일 목록 페이지 만들었어요. 확인해보세요."                       

 [기능 단위로 직접 확인]                                               
 - 할 일 목록 표시 → 잘 됨                                            
 - 할 일 추가 → 잘 됨                                                 
 - 삭제 → 잘 됨                                                       

 나: "완벽해!"                                                         

   → 프론트: 화면 (브라우저)
   → 백엔드: 처리/저장 (서버)

✅ 프론트만으로는 "화면에서 끝나는 것"만 가능
   → 저장하거나 공유해야 하면 → 백엔드 필요

✅ BaaS 쓰면 백엔드 직접 안 만들어도 됨
   → Supabase 추천

✅ AI한테는 단계적으로 요청
   1단계: "장바구니 페이지 만들어줘" (화면)
   2단계: 확인
   3단계: "API로 연동해줘" (백엔드 연결)