Загрузка…
Загрузка…
frontend / middle / tech_deep
Формат
online
Стадия
tech_deep
Когда
within_quarter
Длительность
—
01
Поведенческий
Расскажите о вашем текущем месте работы: что за проект и чем вы занимаетесь?
HR-скрининг (компания «из тех»)
02
Поведенческий
Какой стек вы используете на текущем проекте помимо React?
HR-скрининг. Кандидат: react, иногда node.js, верстки почти нет
03
Поведенческий
Сколько лет вы работаете именно с React?
HR-скрининг. Ответ: с 2017–2018
04
Поведенческий
Почему вы решили посмотреть на рынок? Что вас не устраивает в текущей компании?
HR-скрининг
Заметки
Видеозапись собеседования с YouTube-канала автора (с рекламной вставкой Skillfactory). Два этапа в одном видео: 1) HR-скрининг в аутсорсинговой компании «из тех» (основана в 2006, ~250 сотрудников, офисы в Москве, СПб, Ростове-на-Дону, Томске, Барнауле; партнёры: Альфа-банк, ВТБ24, X5 Retail Group, Открытие, mail.ru, Леруа Мерлен, Лаборатория Касперского, Tele2, Озон, иви и др.); 2) техническое собеседование с разработчиками на проект Альфа-банка (фронтенд, React, переход на TypeScript, скрам-команды 4–10 человек, наставник на испытательный срок, ~170 фронтендеров в комьюнити, своя open-source библиотека компонентов, 20% спринта на коммьюнити-задачи). Собеседование проходило ~27 февраля, видео выпущено 17 августа. Связь прерывалась (отключался интернет). Автор оценил свои ответы примерно на 6 из 10 и сомневается между уровнями middle и senior (считает себя неплохим middle).
Подготовка
Автор советует не стесняться своих знаний и не обращать внимания на хейтеров: главное — анализировать допущенные на собеседовании ошибки и затем подтягивать знания (JavaScript, React). Сам он за полгода после собеседования заметно подтянул JavaScript и React. Темы для подготовки по факту собеса: this/bind, замыкания, event loop и микро/макротаски, прототипы и классы, Redux (reducer, middleware), key и оптимизация рендера в React, margin collapse и центрирование в CSS, cookies/CORS/CSRF, каррирование.
Стиль интервьюера
HR — очень доброжелательная и профессиональная, подробно рассказала о компании, условиях и процессе («эйчар здорового человека», по словам автора). Технический интервьюер вёл живой диалог: давал серии лайвкодинг-примеров с нарастающими follow-up'ами, подсказывал и объяснял правильные ответы по ходу (margin collapse, микротаски, super/this), помогал с финальной алгоритмической задачей. Фидбэк обещали в течение 3 рабочих дней.
05
Поведенческий
Какие ключевые критерии, по которым вы выбираете потенциального работодателя? Что должно или не должно быть, чтобы вам было комфортно?
HR-скрининг
06
Поведенческий
Каким должно быть финансовое предложение (зарплата), чтобы оно было для вас комфортным и интересным?
HR-скрининг
07
Поведенческий
Рассматриваете ли вы релокацию (помимо удалёнки), и если да — куда?
HR-скрининг. Ответ: возможно Питер, в остальном удалёнка
08
Код
Лайвкодинг (React): в классовом компоненте-счётчике при клике на кнопку выбрасывается ошибка. Объясните, почему (потеря контекста this в обработчике) и как исправить.
Тех. собеседование (проект Альфа-банка). Решение: стрелочная функция или bind
09
Теория
Какие ещё есть способы привязать контекст обработчика (bind в onClick, bind в конструкторе, анонимная функция) и какой вариант предпочтительнее с точки зрения производительности?
Follow-up к задаче про потерю контекста: пересоздание функции на каждый рендер влияет на производительность
10
Код
Лайвкодинг (React): setState вызывается 4 раза подряд, но счётчик увеличивается не на 4. Почему так происходит и как исправить?
Решение: передавать в setState функцию (functional updater) или callback
11
Код
Лайвкодинг (React): в списочном компоненте при удалении элемента удаляется/отображается не тот элемент. Почему это происходит (key по индексу) и как исправить?
Нужен уникальный key вместо индекса массива
12
Теория
Как получить уникальный key для элементов списка, если в данных нет id (генерация id/хэша при создании элемента)?
Follow-up к задаче про key: нужно ли менять id при удалении элементов
13
Поведенческий
Работали ли вы над оптимизацией производительности React-приложений (shouldComponentUpdate, PureComponent, React.memo, useMemo)?
Обсудили, как PureComponent сравнивает props внутри себя
14
Теория
Расскажите, что такое Redux и как он устроен (action, reducer, store, подписчики, обновление компонентов)?
15
Теория
Что произойдёт, если в reducer не возвращать новое состояние, а мутировать существующее?
Reducer должен быть чистой функцией и возвращать новое состояние, иначе store не поймёт, что произошло изменение
16
Кейс
В каком месте приложения вы бы реализовали запись данных в localStorage (в компоненте, в action и т.д.)?
Обсудили также вынос асинхронной логики (запросы) в action и redux-thunk
17
Теория
В каком месте цикла Redux после dispatch экшена вызывается middleware и как он работает?
Middleware — посредник между экшеном и хранилищем
18
Теория
Как работает переменная, объявленная через var (область видимости, доступность вне блока/цикла)?
19
Код
Классическая задача: цикл for с var и setTimeout — что выведется в консоль и как исправить, чтобы выводились ожидаемые значения?
Выведется 5 раз 5; решение через IIFE/let
20
Теория
Объясните, почему в цикле с var и setTimeout выводится одно и то же значение (как event loop и очередь связаны с замыканием на одну переменную)?
Follow-up к задаче с циклом и setTimeout
21
Код
Что будет в консоли: задача на замыкание — функция возвращает функцию, использующую переменную из внешней области видимости?
Кандидат ответил: 25
22
Теория
Что такое контекст (this) в JavaScript?
23
Код
Что выведет вызов функции, у которой отсутствует контекст (метод вызван отдельно от объекта), и как это исправить через bind?
Лайвкодинг-серия примеров на контекст
24
Код
Что произойдёт при повторном вызове bind у уже привязанной функции — поменяется ли контекст?
Follow-up: повторный bind не перепривязывает контекст, аргумент не передастся
25
Теория
Расскажите про стрелочные функции: какой у них контекст this?
У стрелочной функции нет собственного this — берётся из вышестоящей области
26
Теория
Можете сказать пару слов про замыкания? Покажите, где в данном коде есть замыкание.
С разбором на примере кода с bind
27
Поведенческий
Расскажите, как вы работали с асинхронностью в JavaScript (Promise, async/await)?
28
Теория
Опишите схему выполнения JavaScript-кода: как работает event loop?
29
Теория
Слышали ли вы про макротаски и микротаски? Как они работают?
Кандидат ответил, что знает поверхностно
30
Код
Задача: в каком порядке выведутся console.log при сочетании setTimeout и Promise в коде?
Интервьюер пояснил: промисы (микротаски) всегда выполняются раньше макротасок
31
Теория
Расскажите про классы и прототипное наследование в JavaScript: как работают классы и прототипы?
32
Теория
Если у объекта вызвать свойство или метод (например, toString), где оно будет искаться (цепочка прототипов)? Что является прототипом объекта?
33
Код
Задача на классы: class Bar extends Foo с вызовом super.print() и this — что выведется в консоль и в каком порядке?
34
Теория
Почему при вызове метода родителя через super.print() внутри него this указывает на дочерний класс?
Follow-up к задаче на классы
35
Теория
Как расположить модальное окно по центру экрана средствами CSS (position + transform, flexbox)?
36
Теория
Карточки расположены в строку — как сделать, чтобы они шли столбцом, не меняя разметку (flex-direction: column)?
37
Теория
Два блока display: block — у верхнего margin-bottom 10px, у нижнего margin-top 20px. Какое расстояние будет между ними (схлопывание margin)?
Кандидат не знал про схлопывание margin; правильный ответ — 20px (максимальный)
38
Теория
Из чего состоит HTTP-запрос (метод, заголовки, тело)?
39
Теория
Что передаёт GET-запрос и чем он отличается от POST?
40
Теория
Как работают cookies: как сервер их устанавливает, как браузер отправляет, и как очистить конкретную cookie через document.cookie?
41
Теория
Какие важные параметры есть у cookies (secure/httpOnly, время жизни)? Можно ли такие cookies прочитать из JavaScript?
42
Теория
Можно ли с фронтенда установить время жизни cookie?
Follow-up по cookies; кандидат не был уверен
43
Теория
Cookie установлена для alfabank.ru — как сделать, чтобы она была доступна и на поддомене digital.alfabank.ru?
Через атрибут domain с маской (.domain)
44
Теория
Что такое CORS, как он работает и зачем он нужен браузеру?
45
Теория
Если через curl/консоль всё равно можно достучаться до ресурса, что именно запрещает браузер с помощью CORS и зачем?
Follow-up к вопросу про CORS
46
Теория
Какие виды атак / механизмы безопасности вы знаете (XSS, SQL-инъекции, CSRF)?
47
Теория
Что такое CSRF-токен и для чего нужен этот механизм? От чего он защищает?
48
Код
Лайвкодинг (алгоритм): написать функцию sum, вызываемую по цепочке sum(1)(2)(3)..., которая при каждом вызове выводит в консоль накопленную сумму (каррирование + замыкание) и возвращает функцию для следующего вызова.
Задача решалась на платформе с автотестами; кандидат справился с подсказками интервьюера