이것이 당신의 앱에 어떻게 대응되는가

이제 이 그림 전체를 바이브 코딩으로 만든 앱 위에 놓아 보자. 당신이 만들 모든 조각이 이 춤의 한쪽에 살고 있기 때문이다:

• 프론트엔드는 브라우저에서 실행되는 모든 것이다 — 사용자가 보고 클릭하는 버튼, 폼, 레이아웃. 그것이 클라이언트다. 대체로 요청을 보내고 응답을 표시한다.
• 백엔드는 서버에서 실행되는 당신의 코드다 — 요청을 어떻게 처리할지 결정하고, 데이터베이스와 이야기하고, 응답을 만드는 로직. 그것이 서버다.

진짜 상호작용은 그 모든 것을 엮는다. 사용자가 "가입"을 클릭한다(프론트엔드). 브라우저는 폼 데이터를 실은 채 /api/signup 같은 path로 HTTPS를 통해 POST 요청을 보낸다. 당신의 백엔드가 그것을 받아 계정을 만들고, 사용자가 로그인된 상태를 유지하도록 쿠키를 설정하고, 200을 돌려보낸다. 프론트엔드는 성공을 보고 환영 화면을 보여준다. 거기서 굵게 표시된 모든 단어는 당신이 방금 배운 것이다 — 그리고 그것이 당신이 만들 거의 모든 것의 전체 모양이다.

이 모든 것을 한 번에 머릿속에 담고 있을 필요는 없다. 하지만 뒤의 챕터가 "요청은 서버에 닿았는데 500으로 돌아왔다", 또는 "이 헤더를 설정해라", 또는 "이 라우트가 POST를 처리한다"라고 말할 때, 당신은 이제 그것이 춤의 어느 부분을 가리키는지 정확히 알게 된다. 그 멘탈 모델이 진짜 선행조건이다 — 그리고 당신은 이제 그것을 가졌다.