Отлично, следующая тема как раз по плану 🔥

Сетевые основы для веб-разработчика

Цель:
Не вдаваясь в слишком глубокий уровень "пакетов TCP", но — чтобы ты как мидл уверенно понимал, как данные бегают по сети, как работает веб-приложение, как устроен API-запрос, и чтобы мог объяснить это на собеседовании, а главное — в работе.

🧩 Основы, которые ты должен знать уверенно:

  • HTTP/HTTPS — как работает протокол
  • TCP / UDP — зачем они нужны
  • DNS — как домен превращается в IP
  • IP / Порты — как сервер принимает соединения
  • CORS — что это и зачем нужен
  • Кэширование — типы, заголовки
  • WebSocket — как работает постоянное соединение
  • API и заголовки — как идёт обмен данными

1. HTTP / HTTPS

Протокол передачи данных клиент ↔ сервер (браузер ↔ бэкенд)
  • Клиент открывает TCP-соединение с сервером
  • Отправляет HTTP-запрос:
    • Метод (GET, POST, PUT, DELETE)
    • Заголовки (Headers)
    • Тело запроса (Body)
  • Сервер возвращает HTTP-ответ:
    • Статус код (200 OK, 404 Not Found, 500 Server Error)
    • Заголовки
    • Тело (JSON, HTML)

Важно:

  • HTTPS = HTTP + шифрование через TLS
  • Никогда не передавай данные по HTTP без SSL (особенно токены/пароли)

2. TCP / UDP

Без установки соединения
Без гарантий
Может быть нарушен
Стриминг видео, игры, DNS

TCP
Устанавливается с рукопожатием
Гарантия доставки
Сохраняется
HTTP, HTTPS, SMTP

→ Твои веб-приложения почти всегда работают поверх TCP, потому что он гарантирует доставку данных.

3. DNS — как домен превращается в IP

  • Когда пользователь открывает example.com, браузер делает DNS-запрос.
  • DNS-сервер возвращает IP-адрес, например, 192.0.2.1.
  • После этого клиент открывает TCP-соединение с этим IP по нужному порту (обычно 443 для HTTPS).

4. IP и порты

  • IP-адрес — это адрес сервера в интернете.
  • Порт — как квартира в доме: куда именно в сервере направить трафик.
  • HTTP: порт 80
  • HTTPS: порт 443
  • WebSocket: тот же порт, что и HTTP/HTTPS, если через WSS.

5. CORS (Cross-Origin Resource Sharing)

Защита браузера от междоменных запросов.

Если твой фронтенд (frontend.com) делает запрос на другой домен (api.backend.com), браузер проверяет заголовок:

Access-Control-Allow-Origin: https://frontend.com

Если его нет — браузер блокирует ответ.

Разработчику важно:

  • На бэкенде настраивается заголовок CORS
  • В dev-среде часто временно разрешают *, но в проде так делать нельзя

6. Кэширование

Ускорение работы через сохранение ответов

Виды кэша:

  • HTTP-кэш: браузер сохраняет ответ (статичные файлы, API)
  • Server-side cache: Redis, Memcached
  • CDN cache: кеширует статику и контент на узлах доставки

Заголовки:

Cache-Control: public, max-age=3600 ETag: "abc123"
  • max-age — сколько секунд держать кэш
  • ETag — идентификатор версии ресурса

7. WebSocket

Протокол для постоянного соединения клиент ↔ сервер.
  • HTTP-соединение апгрейдится до WebSocket.
  • Данные передаются в обе стороны в режиме реального времени.
  • Используется для чатов, уведомлений, realtime-игр.

8. API и заголовки

Запрос API всегда содержит заголовки, например:

POST /api/task HTTP/1.1 Host: api.example.com Authorization: Bearer <token> Content-Type: application/json

Ответ сервера:

HTTP/1.1 201 Created Content-Type: application/json  {"id":123, "status":"ok"}

📌 Важно уметь:

  • Читать заголовки
  • Понимать код ответа
  • Понимать как кешируется API-ответ

🎯 Что важно знать на собеседовании

  • Как проходит HTTP-запрос от клиента до сервера
  • Чем TCP отличается от UDP
  • Как работает DNS-запрос
  • Что такое CORS и как его настроить
  • Как кэшируются ответы API
  • Как устроены API-заголовки
  • Как работает WebSocket

Хочешь — можем пойти дальше:

  • Либо разберём практику: я дам тебе реальные ситуации (например, CORS ошибка, 502 bad gateway), а ты скажешь, что происходит и как лечить.
  • Либо сразу следующая тема из плана: Тестируемость и юнит-тесты.

Твой ход 🚀