Загрузка…
Загрузка…
fullstack / intern / tech_deep
Формат
online
Стадия
tech_deep
Когда
within_quarter
Длительность
—
01
Поведенческий
Расскажите про ваш опыт в разработке: с чего начинали, чем занимаетесь сейчас, какой коммерческий опыт.
Вступительная часть про опыт и проекты.
02
Поведенческий
Расскажите про ваши более серьёзные проекты (например, по авторизации).
Кандидат рассказал про ротацию JWT-токена через refresh, OAuth, OpenID Connect, NestJS, микросервисы.
03
Теория
Расскажите, как устроен ваш проект на микросервисах концептуально и как микросервисы общаются между собой.
Config-сервис, общение через Redis, фильтр исключений для микросервисов.
04
Поведенческий
Какую самую сложную или объёмную задачу вы решали и что бы выделили?
Заметки
Собеседование на стажировку в команду разработки обучающей платформы IT Booster. Кандидат — фулстек (но фокус на фронтенде), без коммерческого опыта, ~5 лет опыта общей разработки, активно занимается ~7-8 месяцев. Стек: React, TypeScript, Next.js, NestJS, микросервисы, Redis, Prisma, Knex, Zustand, Redux, TanStack Query. Итог интервьюера: теория по React и TypeScript — на высоком уровне, понимает и умеет писать код; алгоритмическая задача — провал, к решению без явных подсказок не пришёл. Интервьюер делает скидку на то, что это уровень стажёра.
Подготовка
Нужно нарешивать алгоритмические задачи (LeetCode), иначе на очевидных вещах замыливается глаз. Больше практики по React/TS для закрепления (кандидат сам отметил нехватку практики из-за перерывов). Углубить дженерики (constraints, условные типы), TanStack Query initialData/SSR-гидрацию в Next.js, WebSocket.
Стиль интервьюера
Доброжелательный, поддерживающий стиль. Задаёт вопросы по нарастающей сложности, ведёт к нужному ответу наводящими follow-up-ами, даёт подсказки на задачах (вплоть до пошагового объяснения алгоритма). Использует live-coding в общем редакторе и TS Playground. Проверяет глубину понимания, уводя вопрос в сторону. Алгоритмическую задачу рассматривает как наблюдение за ходом мыслей, а не как ключевой критерий.
Проблема ротации JWT при обновлении страницы, обработка 401, уровень работы интерсепторов.
05
Поведенческий
Как вы работаете с логическими ошибками в коде: как дебажите, какие инструменты используете?
try/catch, конфиги, тесты, дебагеры, redux/state devtools, React DevTools.
06
Поведенческий
Оцените свой уровень владения React по десятибалльной шкале и объясните, чего не хватает до десятки.
Ответ: 5-6, не хватает практики.
07
Теория
Чем инструменты вроде React и Vue нам помогают и почему выгоднее использовать их, чем писать на голом JavaScript?
Клиентский рендеринг, актуальные данные, управление состоянием, виртуальный DOM, клиентская маршрутизация.
08
Теория
Работали ли вы со стейт-менеджерами и с какими?
09
Теория
Зачем нам нужны стейт-менеджеры?
Глобальное состояние, избежание prop drilling.
10
Теория
Расскажите про useMemo: зачем он нужен и какую задачу решает?
Кеширование результата тяжёлых вычислений при тех же аргументах.
11
Теория
Расскажите про useCallback: зачем он нужен?
Стабильная ссылка на функцию между рендерами.
12
Теория
Что дешевле — пересоздать функцию или постоянно хранить её от рендера к рендеру?
Уточняющий follow-up по useCallback.
13
Теория
Когда React решает, что должен произойти рендер компонента? Что для этого должно произойти?
Изменение контекста (если подписан), стейта, пропсов, рендер родителя.
14
Теория
Родитель перерендерился, дочерний компонент тоже рендерится, но пропсы для него не изменились. Как сделать, чтобы дочерний компонент не рендерился?
React.memo, второй аргумент для кастомной проверки.
15
Теория
Что будет, если родительский компонент передаёт в дочерний функцию, не обёрнутую в useCallback, и как это предотвратить?
Дочерний перерисуется из-за новой ссылки; нужен useCallback, чтобы memo работал.
16
Кейс
Есть длинный список (например, 1000 карточек товаров), который рендерится сразу и всё лагает. Как быть в этой ситуации?
Виртуальный список или пагинация.
17
Теория
Как работает виртуальный список (virtual list)?
Область видимости, estimated size, монтирование/размонтирование элементов по индексам. Пример — библиотека TanStack Virtual.
18
Теория
Как вы работаете с бэкендом на фронтенде: какие подходы и инструменты используете?
URL бэкенда в env, папка services, fetch, TanStack Query (кеширование, флаги loading/fetching, мутации, запросы).
19
Теория
Расскажите про серверные и клиентские компоненты: что есть что и как вы это понимаете?
20
Кейс
Как синхронизировать серверные данные (полученные в серверном компоненте Next для SEO) и клиентские данные, подтягиваемые через TanStack Query при бесконечном скролле?
Ответ через параметр initialData в TanStack Query; кандидат с этим почти не работал.
21
Поведенческий
Оцените свой уровень владения TypeScript по десятибалльной шкале.
Ответ: 6-7.
22
Теория
Какие проблемы решает TypeScript?
Слабая динамическая типизация JS, приведение типов, кастомные типы, алиасы, интерфейсы.
23
Теория
TypeScript называют языком со структурной типизацией. Как вы понимаете этот термин?
Сравнение по структуре, а не по имени; сравнение с C#.
24
Теория
Какие утилитарные типы TypeScript вы использовали в работе?
Partial, Omit, Pick, Required, Readonly, строковые литеральные (Uppercase/Lowercase), Extract.
25
Теория
В чём разница между Omit и Exclude?
type C = Exclude<A, B>; // Exclude работает с union-типами
type U = A | B | C;Omit убирает поля объекта, Exclude работает с union-типами. Разбирали на примере в playground.
26
Теория
Расскажите про Union и Intersection типы: как понимаете и как они работают?
Union — либо один, либо другой; Intersection — объединение всех свойств (как наследование).
27
Теория
Какие подходы/антипаттерны в TypeScript считаются плохой практикой?
any, type assertion, @ts-ignore, необработанные дискриминированные юнионы, enum.
28
Кейс
Есть функция, которая принимает на вход любой заранее неизвестный тип. Хочется поставить any, но это неправильно. Как быть и как с этим работать правильно?
Использовать unknown и сузить тип до ожидаемого.
29
Теория
Какие есть основные способы сузить тип в TypeScript?
Type guards: typeof, in, instanceof, проверка истинности/ложности, сравнительные проверки, switch.
30
Теория
Расскажите про дженерики: как вы ими пользуетесь и какие возможности они дают? Приведите реальный пример.
Пример: дженерик-интерфейс пагинации (items, meta), где items универсальны.
31
Теория
Какие возможности NestJS вы прощупали (гарды, фильтры, интерсепторы, обработка ошибок и т.д.)?
Guards (проверка ролей, RBAC), декораторы, обработка 401.
32
Теория
С какими способами взаимодействия клиента и сервера вы работали?
HTTP, SSE; WebSocket и GraphQL — только теория.
33
Теория
Для чего нужны такие инструменты, как Prisma, и чем они полезны?
Упрощение работы с SQL, миграции, модели БД в коде, типизация.
34
Теория
Для чего нам нужны миграции?
Отслеживание изменений схемы БД в итеративной разработке.
35
Код
Есть onClick, в котором дважды вызывается setCount(count + 1). Чему будет равен count и почему? Как исправить, чтобы увеличивалось на 2?
setCount(prev => prev + 1);Будет 1, т.к. не учитывается предыдущий стейт; нужно функциональное обновление setCount(prev => prev + 1).
36
Код
Есть useEffect, который работает не так, как хотелось бы. Как его улучшить (с handleBefore, объявленным выше)?
Нужна функция очистки (removeEventListener) и корректный массив зависимостей вместо пустого.
37
Код
Есть два массива. Нужно найти пересечение этих массивов (общие элементы, без дубликатов в результате). Реализуйте оптимально.
function intersection(arr1, arr2) {
const set = new Set(arr1);
const result = [];
for (const x of arr2) {
if (set.has(x)) {
result.push(x);
set.delete(x);
}
}
return result;
}Кандидат сначала предложил вложенные циклы (O(n*m)), затем с подсказками дошёл до решения через Map; эталонное решение — через Set за линейную сложность. Решено в основном по подсказкам.