React Frontend Developer

Question 1

В чём разница между event.target и event.currentTarget?

Accepted Answer

event.target — это элемент, который вызвал событие (например, кнопка внутри div, на которую кликнули).event.currentTarget — это элемент, к которому прикреплён обработчик (например, сам div).

Question 2

Чем отличаются GET и POST-запросы?

Accepted Answer

GET — получает данные (параметры в URL, кэшируется).POST — отправляет данные (тело запроса, не кэшируется).GET менее безопасен, POST — для изменения данных.

Question 3

При разборе запроса на Target, Body и Header — что шифруется?

Accepted Answer

При HTTPS шифруется всё: URL (Target), Body, Headers. Исключение — домен (виден в SNI)

Question 4

Как работает получение данных на сервере в Next.js? (Раньше — getServerSideProps, в App Router — async-компоненты)

Accepted Answer

В старом Pages Router для получения данных на сервере использовалась специальная функция getServerSideProps, которая передавала данные в компонент страницы через пропсы. В новом App Router Server Components (помеченные как async) могут напрямую получать данные с помощью fetch или других библиотек, а затем рендерить JSX.

Question 5

Чем отличаются getStaticProps, getServerSideProps и getStaticPaths?

Accepted Answer

getStaticProps получает данные для статических страниц во время сборки. getServerSideProps получает данные при каждом запросе на сервере. getStaticPaths определяет какие динамические пути должны быть предварительно сгенерированы для статических страниц.

Question 6

Почему авторизацию нельзя (или нежелательно) делать через GET-запрос?

Accepted Answer

GET-запросы передают данные через URL, который легко логируется и кэшируется. Авторизационные данные могут попасть в историю браузера или серверные логи. Это создаёт риск утечки токенов или паролей. Даже при HTTPS URL остаётся видимым для клиента. Поэтому для авторизации используют body запроса.

Question 7

Что делает getBoundingClientRect?

Accepted Answer

Метод getBoundingClientRect возвращает объект DOMRect с координатами элемента относительно окна браузера (viewport). Он содержит свойства top, right, bottom, left, width и height. Это полезно для определения видимости элемента, анимаций или позиционирования всплывающих подсказок.

Question 8

Можно ли отправить body в GET-запросе?

Accepted Answer

По спецификации HTTP, GET-запрос может содержать тело, но это не рекомендуется. Большинство серверов, прокси и браузеров игнорируют или отбрасывают тело GET-запроса. На практике для передачи данных лучше использовать query-параметры или перейти на POST/PUT.

Question 9

Можно ли отправлять body в GET-запросе?

Accepted Answer

Формально HTTP-спецификация не запрещает отправку тела в GET-запросе, но на практике большинство серверов, прокси и браузеров его игнорируют или не поддерживают. Поэтому полагаться на это не стоит — лучше использовать POST или PUT для передачи данных в теле.

Question 10

Почему GET-запросы кешируются?

Accepted Answer

GET-запросы кешируются, потому что они считаются идемпотентными и безопасными — они не изменяют состояние сервера. Кеширование позволяет браузеру и промежуточным прокси сохранять ответы на повторяющиеся GET-запросы, что уменьшает нагрузку на сервер и ускоряет загрузку страниц для пользователя.

Вопросы React Frontend Developer