Загрузка…
Загрузка…
frontend / middle_plus / tech_deep
Формат
online
Стадия
tech_deep
Когда
within_quarter
Длительность
—
01
Теория
Расскажи про модульную архитектуру на твоём проекте — какова была структура проекта?
Вопрос по опыту кандидата; ответ: слои pages, modules, components, shared
02
Теория
Какие ещё архитектуры фронтенд-проектов знаешь?
Follow-up к вопросу про архитектуру; кандидат назвал atomic design
03
Теория
Какие виды событий в JavaScript знаешь? Какие чаще всего используешь в работе?
Ожидались onclick, onchange, onmouseover и т.д.
04
Теория
Как мы подписываемся на то или иное событие?
Заметки
Видео с записью реального собеседования на позицию middle+/senior frontend-разработчика с зарплатной вилкой до 320 000 руб. на руки. Два интервьюера (Маша и Саша) из фронтового сообщества банка (в тексте упоминается «Райф»); собеседуют от сообщества, а не от конкретной команды. Формат: теоретическая секция (JS, TS, HTML, CSS, git), затем лайвкодинг (JS-калькулятор, типизация на TypeScript, React-дерево с раскрытием узлов), затем доп. вопросы (сеть, безопасность, SEO, стейт-менеджеры) и вопросы кандидата. Проект: микрофронты, внутренняя платформа, много логики работы с деревьями, стек TypeScript/React, scrum, двухнедельные спринты, собственная дизайн-система банка. По итогу кандидат получил положительный фидбэк и приглашение на следующий этап.
Подготовка
После собеседования кандидату подсветили пробелы в знаниях и дали материалы для их закрытия. По содержанию интервью стоит готовить: события и всплытие в JS, fetch/AbortController, type vs interface, type guards, utility types (Pick/Omit/Readonly), infer, generics с дефолтами, async/defer, специфичность CSS, merge vs rebase, оптимизации рендера в React (memo, useCallback, key, виртуализация), нативные HTML-решения (details/summary), хранение токенов, SEO.
Стиль интервьюера
Два интервьюера, доброжелательная атмосфера: подсказывают по ходу лайвкодинга (наводящие вопросы про isNaN, typeof NaN), не давят при незнании («о'кей, не страшно»), просят комментировать ход решения, активно задают follow-up'ы к каждой задаче. Честно отвечают на вопросы кандидата о процессах. По итогу дали развёрнутый фидбэк с материалами.
05
Теория
Где в React-компоненте производится подписка на события?
Ожидаемый ответ: через JSX-атрибуты, либо через addEventListener в useEffect
06
Теория
В чём суть и отличие preventDefault и stopPropagation?
07
Теория
Зачем на практике может понадобиться отменить всплытие события (stopPropagation)? Приведи реальный кейс.
Follow-up; кандидат привёл пример с модалкой и overlay
08
Теория
Что такое fetch? Как он работает?
Обсуждались промисы, .json(), AbortController, параметры (headers, body)
09
Теория
Какой параметр fetch является обязательным?
Follow-up; ответ: URL/endpoint
10
Теория
В чём разница между type и interface в TypeScript?
Обсудили extends vs intersection, declaration merging интерфейсов
11
Теория
Что такое type guards в TypeScript? Приведи пример использования.
Обсуждались typeof, instanceof, оператор is
12
Теория
Зачем нужен тег script в HTML? Расскажи про его атрибуты async и defer и разницу между ними.
13
Теория
Если скрипт написан инлайн внутри тега script (без атрибута src), сработает ли атрибут async/defer?
Follow-up с подвохом
14
Теория
Расскажи про инлайновые стили в CSS: использовал ли их, зачем они нужны и как их переопределить, если очень захочется?
15
Теория
Как выглядит / как задаётся инлайн-стиль (в JSX и через атрибут)?
Follow-up
16
Теория
Расскажи про специфичность селекторов в CSS — как она работает?
Обсуждались important, inline-стили, id, классы, теги, представление в виде числа
17
Теория
Вопрос со звёздочкой: если в инлайн-стиле указать color: red !important, а в CSS-файле color: blue !important — какого цвета будет текст?
Интервьюер сам обозначил как «вопрос со звёздочкой»
18
Теория
В чём отличие git merge от git rebase? Какую команду предпочитаешь и приходилось ли использовать?
Интервьюер отметила, что правильного ответа на предпочтение нет
19
Кейс
Если в ветке работаешь только ты один (никто больше не коммитит и не пушит) — что будешь использовать: merge или rebase?
Follow-up
20
Кейс
Ситуация: мы взяли компонент из библиотеки, он написан полностью на div, и браузер не понимает, что это кнопка. Как дать понять браузеру, что это кнопка, если мы можем прокинуть любой атрибут/пропс?
Ожидаемый ответ: aria-атрибуты, role=button
21
Код
Лайвкодинг: реализовать функцию calculator с тремя параметрами (два числа и операция). Поддержать четыре оператора, возвращать ошибку при невалидном операторе, обработать невалидные типы аргументов (не number / NaN) и деление на ноль.
По ходу обсуждали isNaN, typeof NaN === 'number', проверку списка допустимых операторов
22
Теория
Как можно оптимизировать функцию calculator и сделать её более расширяемой, если придётся поддерживать новые кейсы?
Follow-up к задаче про калькулятор; кандидат не ответил
23
Код
Лайвкодинг (TypeScript): протипизировать массив persons из двух сущностей — user (только у него есть ключ occupation) и admin (только у него есть ключ role) — и функцию logPerson, в т.ч. написать type guard.
24
Теория
Какая утилита TypeScript помогает взять из типа только поля name и age (вместо Omit)?
Ответ: Pick
25
Теория
Каким ещё образом можно задать тип переменной persons, кроме явной аннотации? (через as)
26
Теория
Чем отличается satisfies Person[] от as Person[]?
Кандидат признался, что satisfies в продакшене не использовал
27
Теория
Зачем существует as const? Что мы увидим в типах, если его применим?
Ответ: поля станут readonly, литеральные типы
28
Код
Модифицируй функцию logPerson так, чтобы она принимала любой тип через дженерик, а если тип не задан — по умолчанию использовался Person.
29
Код
Напиши собственную utility-тип утилиту, которая превращает переданный тип в Readonly (итерация по ключам через mapped types).
30
Код
Напиши собственную utility-тип утилиту, которая извлекает тип из промиса (через infer).
31
Теория
Почему в утилите извлечения типа из промиса ты решил вернуть unknown, а не просто тот тип, который передали?
Follow-up к задаче про извлечение типа из промиса
32
Код
Лайвкодинг (React): пройтись по дереву данных, отрендерить всё дерево рекурсивно и реализовать функционал скрытия/раскрытия children узлов.
Рекурсивный рендер TreeNode, состояние раскрытия через useState
33
Теория
Для чего мы используем атрибут key при рендере списка компонентов?
34
Теория
Можем ли мы использовать key только в списках, или в любом JSX-элементе?
Follow-up
35
Теория
Почему в данной ситуации обработчик onToggle можно спокойно не оборачивать в useCallback?
Обсуждение: useCallback бесполезен без React.memo на дочернем компоненте
36
Теория
Для чего нам нужен React.memo?
37
Теория
Можем ли мы контролировать сравнение пропсов в React.memo?
Ответ: второй аргумент memo с кастомной функцией сравнения
38
Теория
Почему в этой ситуации мы используем useState, а не useRef?
useRef не триггерит ререндер
39
Код
Напиши, как бы мы делали запрос, если бы данные дерева приходили с сервера (fetch в useEffect, состояние, try/catch).
40
Теория
Что нужно сделать, если мы переходим на другую страницу, а запрос уже полетел? Как его отменить?
Ответ: AbortController, abort в cleanup-функции useEffect, сигнал в fetch
41
Теория
Чем отличается useEffect от useLayoutEffect?
Кандидат затруднился, интервьюер дал ответ: useLayoutEffect синхронный, до отрисовки; useEffect асинхронный, после
42
Теория
Почему ты вынес асинхронную логику в отдельную функцию внутри useEffect?
Внутри коллбэка useEffect нельзя использовать async напрямую
43
Теория
Что было бы с нашим компонентом, если бы данные приходили не в трёх вложенностях, а в миллионах? Как избежать лагов интерфейса?
Обсуждались lazy-подгрузка, виртуализация списков, мемоизация
44
Теория
Как облегчить браузеру работу, если на одном уровне дерева очень много элементов?
Follow-up; ответ: пагинация или infinite scroll с дополнительными запросами
45
Теория
Если все данные приходят разом и проблема в большом количестве уровней вложенности — как решить раскрытие/скрытие более нативно, с минимумом JavaScript?
Кандидат не ответил; интервьюер назвал три пути: details/summary, состояние чекбокса + CSS, класс/стиль через JS
46
Теория
Расскажи про твой опыт работы с GraphQL: насколько плотно работал, какие фреймворки/клиенты использовал?
Уточнение по опыту в EPAM; кандидат упомянул схемы, выборку только нужных данных в отличие от REST, GraphQL client
47
Теория
Какие ещё способы отправки запросов/обмена данными с сервером существуют, кроме GraphQL/HTTP?
Обсуждались WebSocket, Server-Sent Events, TCP
48
Теория
Где лучше хранить токены на клиенте?
Ответ: cookies с HttpOnly и Secure для защиты от XSS
49
Теория
Как помочь нашему сайту лучше попадать в поисковую выдачу (SEO)?
Обсуждались метатеги, Open Graph, семантическая вёрстка, accessibility, метрики Lighthouse
50
Теория
Можем ли мы существовать без стейт-менеджеров? Чем их заменить и какие минусы?