На собеседовании у frontend-разработчика могут попросить сверстать компонент, объяснить поведение JavaScript или спроектировать интерфейс. Чтобы подготовиться, сначала уточните формат отбора и требования вакансии: перечень тем для первой работы и для позиции старшего разработчика будет разным.
Ниже — основные направления подготовки. Используйте их как список для самопроверки: важно не только вспомнить определение, но и объяснить, где вы применяли знание на практике.
JavaScript и асинхронность
Повторите области видимости, замыкания, прототипы, приведение типов и контекст вызова this. Разберите, как работают bind, call и apply.
Для асинхронного кода полезно потренироваться на коротких примерах с промисами, таймерами и async/await. Предскажите порядок вывода в консоль, затем запустите код и объясните расхождения. Отдельно проверьте, понимаете ли вы разницу между задачами и микрозадачами в цикле событий.
Практические задания могут включать функции debounce и throttle, обработку ошибок запроса или работу с массивами. Прежде чем писать решение, уточните входные данные и ожидаемое поведение в пограничных случаях.
TypeScript
Подготовьте примеры с объединением и пересечением типов, дженериками, сужением типов и служебными типами. Умейте объяснить выбор между type и interface, а также показать, как типизировать данные внешнего API.
Глубину подготовки удобно сверить с требованиями вакансий с TypeScript. Не ограничивайтесь перечислением возможностей языка: разберите несколько ошибок, которые типизация помогла вам обнаружить.
Браузер, DOM и CSS
- Построение страницы: HTML, DOM, CSSOM, расчёт расположения элементов и отрисовка.
- События: всплытие, перехват и делегирование.
- Сеть и хранение данных: HTTP-запросы, CORS, cookies, localStorage и sessionStorage.
- Вёрстка: блочная модель, Flexbox, Grid, позиционирование, каскад и специфичность селекторов.
- Адаптивность: поведение интерфейса на разных экранах и при увеличении текста.
Потренируйтесь сверстать небольшой компонент по макету. Проверьте длинные подписи, пустые данные, состояние загрузки и сообщение об ошибке.
React и управление состоянием
Если в вакансии указан React, повторите хуки и правила их использования, зависимости эффектов, повторные рендеры и ключи в списках. Подготовьтесь объяснить, где хранить состояние: внутри компонента, в контексте или во внешнем хранилище.
На примере формы покажите, как устроены ввод, валидация, отправка и обработка ошибок. Если используете мемоизацию, объясните, какую проблему она решает. Дополнительные ориентиры — требования вакансий React-разработчика.