React Frontend Developer

Question 1

Какова цель webpack-dev-сервера?

Accepted Answer

Webpack Dev Server предоставляет локальный сервер для разработки, который автоматически обновляет страницу в браузере при изменении кода. Это ускоряет процесс разработки и тестирования.

Question 2

Как webpack-dev-сервер обрабатывает замену горячего модуля (HMR)?

Accepted Answer

HMR позволяет обновлять модули в реальном времени, избегая полной перезагрузки страницы. Webpack-dev-сервер отслеживает изменения, пересобирает только изменённые части и применяет их в браузере через WebSocket.

Question 3

Как использовать Docker для множества окружений приложений?

Accepted Answer

Для работы с несколькими окружениями в Docker используется Docker Compose. Создаются отдельные файлы docker-compose для каждой среды (например, docker-compose.dev.yml), и на основе этих файлов запускаются соответствующие окружения с нужными настройками.

Question 4

Какую роль играет DevOps в процессе деплоя frontend-приложения?

Accepted Answer

DevOps отвечает за инфраструктуру и автоматизацию деплоя frontend-приложений. Он настраивает CI/CD-пайплайны и окружения. Обеспечивает стабильность сборки и доставки кода. Следит за мониторингом и логами. Это позволяет разработчикам сосредоточиться на коде.

Question 5

Как подписываться на события в браузере и какие параметры можно передать?

Accepted Answer

Подписка на события выполняется через addEventListener. В него передается тип события, обработчик и объект параметров. Можно указать параметры capture, once, passive и другие, которые управляют поведением обработчика.

Question 6

Как работает передача функций в addEventListener?

Accepted Answer

Метод addEventListener принимает два основных аргумента: тип события и функцию-обработчик. Функция передаётся по ссылке и будет вызвана при наступлении указанного события. Можно передавать как именованные функции, так и анонимные. Важно не вызывать функцию сразу, а передавать её объявление, иначе она выполнится мгновенно, а не по событию.

Question 7

Почему removeEventListener может не удалить обработчик?

Accepted Answer

Метод removeEventListener может не удалить обработчик, если переданные ему параметры не совпадают в точности с теми, которые использовались при добавлении через addEventListener. Чаще всего это происходит, когда в качестве обработчика передаётся анонимная функция, так как каждый вызов создаёт новую функцию в памяти. Также важно совпадение фаз события (capturing или bubbling) и других опций, если они указаны.

Question 8

Что смотреть во вкладке Network в DevTools?

Accepted Answer

Во вкладке Network можно увидеть все запросы, которые делает страница: HTML, CSS, JS, изображения, API-вызовы. Полезно смотреть статус ответа (200, 404, 500), время загрузки, размер файла, заголовки запроса и ответа. Это помогает отлаживать ошибки, оптимизировать скорость загрузки и проверять корректность отправляемых данных.

Вопросы React Frontend Developer