Загрузка…
Загрузка…
frontend / middle / tech_deep
Формат
online
Стадия
tech_deep
Когда
within_quarter
Длительность
—
01
Поведенческий
Расскажите о себе и своём опыте работы.
Кандидат рассказал про опыт в Газпромбанке: личный кабинет физ/юрлиц, фильтрация транзакций с выгрузкой CSV, интеграция Яндекс.Карт, UI-кит, кредитный калькулятор отдельным модулем, интеграция с Госуслугами.
02
Поведенческий
Что вам больше всего нравится в работе? Что больше всего понравилось сделать в текущей компании — технические задачи, взаимодействие с API или вёрстка?
Кандидат ответил, что больше нравится работа с данными и архитектурой, аккуратный читабельный код, чем вёрстка.
03
Поведенческий
Какие культура и стандарты разработки были на ваших проектах?
Обсуждали FSD-архитектуру с оговорками, обязательные тесты для ключевых компонентов (PR блокируется без тестов), осознанное использование мемоизации.
04
Поведенческий
Заметки
Реальное техническое собеседование на позицию middle frontend-разработчика в альфа банк (направление юрлиц). Интервьюеры Максим и Серёжа подробно рассказали про стек и процессы: TypeScript, React, Redux (переход на Redux Toolkit), Cypress (e2e на моках), Jest, Jenkins + внутренняя «Альфа-платформа», Docker, Kubernetes, Node.js (hapi) с SSR, вебпак, ~100+ проектов-микрофронтендов, скрам, 20% времени на тех. задачи, кросс-ревью (3-4 ревьюера на PR), минимум ~70% покрытия тестами с проверкой через SonarQube. Кандидат ранее работал в Газпромбанке (личный кабинет физ/юрлиц, кредитная заявка). Структура: рассказ о компании → вопросы кандидата → рассказ о себе → поведенческие вопросы → теория по React-хукам → лайвкодинг (рефакторинг компонента, задачи на this, промисы/event loop, полифил some, парсер CSV) → вопросы кандидата. По итогам обещали составить фидбек и передать HR, связь в течение 2-3 рабочих дней.
Стиль интервьюера
Доброжелательные интервьюеры, подробно рассказали о компании и процессах до технической части. Во время лайвкодинга активно подсказывали и наводили на ошибки (очистка интервала, хранение interval id, отладка CSV-парсера), терпеливо помогали с проблемами онлайн-редактора, разрешали решать и комментировать параллельно.
Как вы попали на свою первую работу — пришли с нуля после самообучения? Какая у вас была база?
Кандидат: ~год учил JavaScript и React в универе, ~3 месяца фриланс-проектов, параллельно собеседовался.
05
Теория
Какие хуки есть в React и что они делают? Расскажите вкратце своими словами.
Кандидат рассказал про useState, useEffect, useLayoutEffect, useRef, useMemo, useCallback, упомянул useReducer.
06
Теория
Расскажите вкратце, как работают хуки, которые вы используете (useState, useEffect, useRef, useMemo, useCallback) — какие есть нюансы?
Follow-up к вопросу про хуки.
07
Теория
Какой этап жизненного цикла компонента useEffect не позволяет обработать в отличие от классового компонента?
Ожидаемый ответ — обработка ошибок (componentDidCatch / error boundaries).
08
Теория
Есть хук useMemo и есть React.memo — чем они похожи и чем отличаются друг от друга? Зачем нужен React.memo?
Follow-up: как сравниваются пропсы (предыдущие и новые), когда компонент перерендерится.
09
Код
Лайвкодинг: отрефакторить React-компонент — найти и исправить все проблемы (отсутствие зависимостей useEffect, отсутствие очистки обработчиков событий и интервала, хранение ссылки на обработчик, отсутствие key в списке, лишний useCallback и т.д.).
Решалось в Яндекс Код. По ходу — теоретические врезки про useLayoutEffect и очистку интервала.
10
Теория
Зачем здесь используется useLayoutEffect — чем он отличается от обычного useEffect?
Теоретическая врезка по ходу задачи на рефакторинг: useLayoutEffect выполняется синхронно, предотвращает мерцание при изменении разметки.
11
Теория
Как правильно очистить setInterval в useEffect — где хранить interval id, чтобы вызвать clearInterval в cleanup-функции?
Follow-up по ходу задачи на рефакторинг: интервьюер указал на нюанс с неочищенным интервалом.
12
Код
Задачки на контекст this: определить, что вернёт код со стрелочными и обычными функциями при потере контекста, вызовах через bind и double bind.
Несколько мини-задач «что выведет код»; обсуждалось, что bind нельзя применить к стрелочной функции и что this определяется в момент вызова.
13
Теория
Происходит ли мутация объекта при вызове bind? Что возвращает bind?
Follow-up по ходу задач на контекст: bind возвращает новую функцию, объект не мутируется.
14
Код
Задача на промисы и event loop: определить, в каком порядке выведутся значения в коде с промисами, setTimeout и цепочками then/catch (синхронный код, микротаски, макротаски).
Параллельно кандидата попросили рассказать про event loop и очереди задач (приоритет микротасок, setTimeout — последним).
15
Теория
Попадём ли мы во второй catch в цепочке промисов и почему? Что передают дальше по цепочке then и catch?
Follow-up к задаче на промисы.
16
Код
А что будет, если изменить код цепочки промисов (модифицированный вариант задачи)?
Follow-up: интервьюер изменил код и попросил заново определить вывод.
17
Код
Написать полифил метода some для массива (Array.prototype.some): функция принимает колбэк-условие и возвращает true, если хотя бы один элемент массива ему удовлетворяет, иначе false.
Follow-up: переписать решение как метод на Array.prototype с обращением к this вместо передачи массива параметром.
18
Код
Написать парсер CSV: на вход строка CSV (первая строка — заголовки, без кавычек, запятых и висящих пробелов), на выходе — список объектов; обработать пустые строки, в том числе в середине файла.
Финальная и самая длинная задача («задача не из простых»), решение с двумя вложенными циклами (O(n²)); follow-up про обработку пустых строк посередине файла. Много времени ушло на отладку в редакторе Яндекс Код.