Как стать хакером, охотником за ошибками?! Практическая статья.

Задание 1. Изучить и понять ==>

Основы работы с веб-технологиями: HTTP, API, Cookies, LocalStorage и HTML

Веб-разработка – это многослойный процесс, в основе которого лежат несколько ключевых технологий. Разберем принципы работы HTTP-сервера и клиента, API (включая REST API), а также такие важные компоненты, как cookies, LocalStorage и HTML.

1. HTTP-сервер и клиент: обмен данными

HTTP (HyperText Transfer Protocol) – это основа взаимодействия между сервером и клиентом в веб-приложениях.

• Как это работает:
  Клиент (обычно браузер) отправляет запрос на сервер, используя методы HTTP (например, GET, POST, PUT, DELETE). Сервер обрабатывает запрос и возвращает ответ с необходимыми данными.
• Ключевые элементы HTTP-запросов и ответов:Заголовки (Headers): содержат метаинформацию, например, тип контента или данные авторизации.
  Тело запроса/ответа (Body): используется для передачи данных, например, в формате JSON.
  Статус-коды: указывают на результат обработки запроса (200 – успех, 404 – не найдено, 500 – ошибка сервера).
  

2. API и REST API: мост между системами

API (Application Programming Interface) – это набор правил и протоколов, который позволяет приложениям взаимодействовать между собой.

• Что такое REST API:
  REST (Representational State Transfer) – архитектурный стиль для создания API. Он основывается на принципах:Использование стандартных HTTP-методов (GET, POST и др.).
  Поддержка понятной иерархии ресурсов (например, /users/123).
  Передача данных в популярных форматах (JSON или XML).
  
• Почему это важно:
  REST API используется для интеграции между приложениями. Например, фронтенд-запросы в мобильных и веб-приложениях часто обрабатываются через API, обеспечивая доступ к данным на сервере.

3. Cookies и LocalStorage: хранение данных на клиенте

Данные часто нужно сохранять на стороне клиента – будь то токен авторизации или настройки пользователя.

• Cookies:Используются для хранения небольших данных, которые передаются с каждым HTTP-запросом.
  Применяются для авторизации, персонализации и отслеживания сессий.
  Имеют ограничения по размеру (до 4 КБ) и время жизни, которое можно настроить.
  
• LocalStorage:Это объект в браузере для хранения данных, которые остаются доступными даже после перезагрузки страницы.
  Позволяет сохранять до 5 МБ данных и использовать их без дополнительной отправки на сервер.
  Идеален для хранения пользовательских настроек, кешированных данных или состояний приложения.
  
• Сравнение:Cookies передаются с запросами, а данные из LocalStorage доступны только через скрипты на клиенте.
  Cookies подходят для сессионных данных, а LocalStorage – для долгосрочного хранения.
  

4. HTML: фундамент веб-страниц

HTML (HyperText Markup Language) – это язык разметки, который используется для создания структуры веб-страниц.

• Основные элементы:Теги: строительные блоки, например <div>, <p>, <a>, <img>.
  Атрибуты: дополнительные данные для элементов, например id, class, href.
  Семантические теги: такие как <header>, <footer>, <article> помогают улучшить читаемость кода и SEO.
  
• Как работает HTML:
  Браузеры интерпретируют HTML, создавая DOM-дерево (Document Object Model), которое используется для визуализации страницы и взаимодействия с JavaScript и CSS.

5. Почему важно понимать эти технологии

• Эффективная разработка: Знание работы HTTP и API помогает оптимизировать взаимодействие между клиентом и сервером.
• Создание удобных интерфейсов: HTML, вместе с cookies и LocalStorage, позволяет создавать приложения с удобным и персонализированным пользовательским опытом.
• Интеграции: REST API упрощает объединение разных систем и сервисов, что особенно важно для построения микросервисной архитектуры.

Заключение

Разобравшись в этих технологиях, вы получите базу, необходимую для понимания работы веб-приложений.

Почитать

https://sadykov.notion.site/1-4-1-7dcc0b9a84dc4c2da02d0c42e908a7d2