React Frontend Developer

Question 1

Для чего используется webpack-cli?

Accepted Answer

Webpack CLI — это интерфейс командной строки, позволяющий запускать Webpack, управлять настройками и выполнять сборку проекта. Без него нельзя использовать Webpack из терминала.

Question 2

Как реализовать модальное окно с формой (логин/пароль) и обработкой внешних кликов (outside click) для закрытия?

Accepted Answer

Модальное окно реализуется как компонент, который отображается поверх основного контента. Обработка клика вне модалки (outside click) делается через проверку цели события: если клик был не по модалке, то закрываем ее.

Question 3

Когда и зачем выбирать Apollo Client, Redux Toolkit или React Query?

Accepted Answer

Выбор зависит от типа данных и архитектуры вашего приложения. Apollo Client — это специализированное решение для работы с GraphQL API, которое предоставляет кэширование, управление состоянием запросов и подписок. Redux Toolkit — это универсальная библиотека для управления глобальным состоянием приложения, идеально подходит для сложной бизнес-логики, не связанной напрямую с сетевыми запросами. React Query (TanStack Query) фокусируется на асинхронном состоянии: кэшировании, синхронизации и обновлении данных, полученных по REST, GraphQL или другим протоколам.

Question 4

Что делает getBoundingClientRect?

Accepted Answer

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

Question 5

Как передать параметр в обработчик события onClick, не вызвав его немедленно?

Accepted Answer

Чтобы передать параметр в onClick, не вызывая функцию немедленно, используйте стрелочную функцию: onClick={() => handleClick(param)}. Это создает новую функцию, которая будет вызвана при клике. Альтернативно можно использовать .bind: onClick={handleClick.bind(null, param)}. Прямой вызов handleClick(param) выполнит функцию сразу при рендере.

Question 6

Как реализовать закрытие модального окна по клику на фон (click outside)?

Accepted Answer

Для закрытия модального окна по клику на фон нужно добавить обработчик клика на оверлей (затемнённый фон). Внутри обработчика проверяем, что клик был именно по оверлею, а не по содержимому модального окна. Это можно сделать, сравнив event.target с элементом оверлея или используя event.stopPropagation() на содержимом модального окна.

Question 7

Чем отличается событие click от события input при обработке пользовательского ввода?

Accepted Answer

Событие click срабатывает при клике мышью на элементе, а событие input — при изменении значения элемента ввода (например, текстового поля). Click используется для действий, таких как отправка формы, а input — для отслеживания каждого изменения ввода в реальном времени.

Question 8

Как инжектировать HttpClient в Angular-сервис?

Accepted Answer

HttpClient инжектируется через конструктор сервиса с помощью механизма Dependency Injection. Для этого нужно импортировать HttpClientModule в AppModule или в standalone компоненте. Затем в сервисе объявить параметр конструктора с типом HttpClient, и Angular автоматически предоставит экземпляр.

Question 9

Как отправить GET-запрос на бэкенд через HttpClient?

Accepted Answer

Для отправки GET-запроса через HttpClient нужно импортировать HttpClientModule в AppModule, затем внедрить HttpClient в сервис или компонент. Вызовите метод http.get(url), который возвращает Observable. Подпишитесь на него с помощью subscribe() для получения данных или используйте async pipe в шаблоне.

Question 10

Настраивал ли заголовки безопасности на сервере?

Accepted Answer

Заголовки безопасности настраиваются на сервере для защиты от распространенных веб-атак. Например, Content-Security-Policy предотвращает XSS, X-Frame-Options защищает от clickjacking, а X-Content-Type-Options блокирует MIME-сниффинг. Это важная практика для любого веб-приложения.

Вопросы React Frontend Developer