~/VibeHandbook
$39

챕터 05 · 07

요청은 어떻게 흐르는가

이제 모든 걸 하나로 엮어봅시다. 방금 만난 모든 조각을 거치며, 사용자가 **"프로필 저장"**을 클릭하는 과정을 따라가 봅시다. 이것이 이 책에서 가장 쓸모 있는 단 하나의 사고 모델입니다. 다이어그램 하나를 내 것으로 만든다면, 이걸로 하세요.

1. 사용자가 "프로필 저장"을 클릭
        │
        ▼
2. FRONTEND (HTML 폼, JavaScript가 값을 읽음)
        │   HTTP 요청을 보냄:  "POST /profile  { name: 'Ada' }"
        ▼
3. HOSTING이 요청을 돌아가는 BACKEND로 라우팅
        │
        ▼
4. BACKEND
     ├─ 이 사용자는 로그인되어 있나?      (아니면 → 401 응답, 중단)
     ├─ 데이터는 유효한가?               (아니면 → 400 응답, 중단)
     └─ 모두 정상 → DATABASE에 저장
        │
        ▼
5. DATABASE가 행(row)을 기록하고, BACKEND에 확인 응답
        │
        ▼
6. BACKEND가 응답:  "200 OK  { saved: true }"
        │
        ▼
7. FRONTEND가 응답을 받아 DOM을 업데이트
        │   ("프로필 저장됨 ✓") — 사용자가 그것을 봄
        ▼
   완료

각 계층이 무엇을 했는지 짚어봅시다: frontend는 입력을 모아서 보냈고, 호스팅은 요청을 올바른 곳에 전달했고, backend는 규칙(로그인, 검증)을 강제하고 결정을 내렸고, 데이터베이스는 그것을 영구적으로 만들었고, 응답은 다시 끝까지 흘러가 frontend가 화면을 업데이트할 수 있게 했습니다. 모든 앱은 초당 수천 번씩 돌아가는 이 반복의 변주일 뿐입니다.

검사가 모두 backend에서 일어나고, frontend에서는 절대 일어나지 않는다는 점에 주목하세요 — 첫 번째 절의 규칙이 실제로 작동하는 모습입니다: frontend는 사용자를 위한 것이고, backend는 진실을 위한 것입니다. 각 단계가 어디서 일어나는지 알면, 어떤 기능을 모호하게("폼이 동작하게 해줘")가 아니라 정확하게("저장하기 전에 backend에서 이메일을 검증해줘") 설명할 수 있습니다 — 그리고 정확함이 이 모든 게임의 전부입니다.

오프라인으로 보고 싶으세요?

PDF + EPUB + 다운로드형 프롬프트 라이브러리 + 버전 업데이트를 받으세요.

$ PDF 받기 — $39