Vibe coding · 한 장 지도

가게 하나로 보는 바이브코딩 8단계

가게의 각 공간을 누르면 영상에서 배운 개념을 다시 볼 수 있어요.
'페이지 보기', '신청하기', '결제하기'를 누르면 요청이 처리되는 과정도 살펴볼 수 있어요.

노디 AI · nodiworks.com
만들고 싶은 사이트
처리 과정 보기

매장·주방·장부를 연결하고, 필요에 따라 외부 업체의 기능도 이용해요. 마스터키와 결제 금액, 장부 접근 권한을 꼭 확인하세요.

06서버 = 가게가 운영되는 공간 · 클라우드 = 그 공간을 빌리는 방식07mystore.kr간판 = 도메인개업 = 배포01매장프론트엔드02재료와 조립HTML구조CSS디자인JS동작React조립05주문 창구토스페이먼츠결제 API카카오로그인 APIClaudeAI 모델 API협력업체03주방백엔드로그인 확인금액 계산주문 처리04장부데이터베이스 · Supabase08금고키 · 권한 · 금액 검증인터넷 · 길거리손님브라우저

요청이 처리되는 과정

노란 점은 요청과 응답이 오가는 과정을 보여줘요.

이해를 돕기 위해 실제 처리 과정을 간단히 표현했어요.

  1. 위의 처리 과정 보기 버튼을 눌러보세요.
AI에게 만들게 하세요. 대신 열쇠와 돈이 있는 곳은 직접 확인하세요.노디 AI · 바이브코딩 지도