Как это ложится на ваше приложение
Теперь наложите всю эту картинку на приложение, написанное в стиле vibe coding, потому что каждая деталь, которую вы будете строить, живёт на одной из сторон танца:
- Фронтенд — это всё, что работает в браузере: кнопки, формы и вёрстка, которые пользователь видит и нажимает. Это клиент. В основном он шлёт запросы и отображает ответы.
- Бэкенд — это ваш код, работающий на сервере: логика, которая решает, что делать с запросом, говорит с базой данных и строит ответ. Это сервер.
Вот всё путешествие регистрации на одной картинке — каждое выделенное жирным слово из главы стоит там, где ему положено:
ФРОНТЕНД (браузер = клиент) БЭКЕНД (сервер)
┌────────────────────────┐ ┌────────────────────────┐
│ клик "Регистрация" │ POST /signup │ создать аккаунт │
│ │ ──────────────▶ │ установить cookie │
│ │ через HTTPS │ │
│ показать экран ◀── │ ─────────────── │ ◀── вернуть 200 OK │
└────────────────────────┘ └────────────────────────┘
Реальное взаимодействие сшивает всё это вместе. Пользователь нажимает «Зарегистрироваться» (фронтенд). Браузер шлёт POST-запрос по на path вроде /api/signup, неся данные формы. Ваш бэкенд получает его, создаёт аккаунт, устанавливает куку, чтобы пользователь оставался в системе, и возвращает 200. Фронтенд видит успех и показывает экран приветствия. Каждое слово, выделенное там жирным, — это то, что вы только что узнали, — и это вся форма почти всего, что вы будете строить.
Вам не нужно держать всё это в голове разом. Но когда позже какая-нибудь глава скажет «запрос дошёл до сервера, но вернулся с 500», или «установи этот заголовок», или «этот маршрут обрабатывает POST», вы теперь будете точно знать, на какую часть танца она указывает. Эта мысленная модель и есть настоящее предварительное условие — и оно у вас уже есть.