Мануал для джуна. Что нужно знать начинающему fullstack-разработчику: 30 вопросов и примеры тестовых заданий

Внимание, первое собеседование

Собеседование — индивидуальный процесс, который может существенно отличаться в разных компаниях. А когда мы говорим о собеседовании на вакансии fullstack-разработчика, то полярность вопросов/лайвокодинга — 360 градусов. Это позиция, где нужно иметь базовые скилы от А до Я: как в работе с интерфейсом, так и в отношении «логики» продукта.

Чего кандидату следует ожидать во время интервью:

1. Общие вопросы, о которых мы поговорим ниже.
2. Специализированные вопросы, о которых мы также поговорим ниже.
3. Лайвкодинг — то есть решение определенной алгоритмической задачки прямо на собеседовании.
4. Тестовые задачи — во время собеседования встречаются реже и в основном догоняют кандидата, чтобы сделать это дома.

Слова не всегда помогут

Ты джун, чтобы проявить себя на собеседовании, не используй только теорию, а объясняй, как это будет на практике. По возможности — бери и пиши код.

К примеру, у тебя спросили «что такое this?». Чтобы продемонстрировать во время интервью, что ты действительно понимаешь, воспринимай этот вопрос не просто как «что это такое?», а как: «Приведите примеры, в каких ситуациях, какое значение будет принимать это».

Говоря об общих вопросах, выделили бы:

• Что такое git flow?
• Какие ресурсы вы используете для улучшения своих знаний о веб-программировании?
• Как долго ты изучаешь программирование?
• У тебя есть аккаунт github?
• Сколько у тебя веб-проектов?
• Какую сложную проблему в программировании ты решал/решала?
• Как ты искал/искала решение этой проблемы?
• Какие, на ваш взгляд, топ-3 качества для fullstack-разработчика? Какими из этих качеств ты обладаешь?
• Твои действия, если ты ошибся/ошиблась?

А теперь пройдемся по специализированным вопросам:

HTML/CSS

• Какую проблему решает специфичность?
• Расскажи все отличия между block, inline и inline-block элементами.
• Какие значения свойства position? Расскажи о каждой из них.
• Какие способы отцентрировать содержимое внутри элемента?
• Объясни методологию BEM. Каковы ее основные принципы, преимущества и недостатки?
• Чем Sass помогает разработчику по сравнению с обычным CSS?

JavaScript

• Как работает метод Array.prototype.reduce?
• Что такое «this»? Расскажи все возможные варианты.
• Как работает подражание в JS? Напиши подражание классам без слова class.
• Расскажи о Promise? Зачем он нам нужен? (*) Напиши собственный класс Promise.
• Расскажи о event propagation и приеме делегирования событий в JS.
• Как работает асинхронность в JS? Что такое event loop?

WEB

• Расскажи, что произойдет после того, как введешь URL в браузере, и до того, как браузер получит код страницы?
• Объясни, как происходит процесс рендеринга веб-страницы от получения кода до полной готовности страницы.
• Как оптимизировать скорость загрузки веб-страницы?
• Что такое Server Side Rendering? Зачем он нужен?
• Расскажи о CORS.

React

• Расскажи о методах жизненного цикла React-компонента. Как их реализовать с помощью React Hooks?
• Как добавить товар в корзину, где хранится массив товаров?
• Какую проблему решает React Context?
• Какие способы оптимизации рендеринга компонентов?
• Что такое иммунитет? Почему она важна?

Redux

• Для чего нужен Redux? Преимущества и недостатки React Context?
• Основные принципы Redux?
• Что такое чистая функция?
• Как с помощью Redux скачать данные с сервера?

TypeScript и ООП

• Зачем нужен TypeScript? Какие у него плюсы и минусы?
• Для чего нужны type guards?
• Что такое Generic types?
• Каковы основные принципы ООП?
• Расскажи о принципах Solid.

А теперь лайвкодинг

Пример № 1.

Номер кредитной карты состоит из 16 цифр 1234567890987654. Отформатируй его следующим образом 1234************7654 (разбей на 4 группы и замены 2-ю и 3-ю группы на ****).

Пример № 2.

Числа, оканчивающиеся нулями, выглядят не очень круто. В этой задаче избавься от нулей, стоящих в конце числа. Но если входное число — оно должно остаться 0.

Пример № 3.

Есть строчка, состоящая только из цифр '12320345'. Проверь, является ли он палиндромом: первая цифра такая, как последняя, вторая, как предпоследняя, и так далее.

Их сложность относительно сложности тестовых заданий, которые могут предложить выполнить джуну на собеседовании в компании. Ниже мы привели некоторые примеры.

Задача Dynamic List of Todos

Основная задача: при загрузке страницы извлечь данные с сервера (список задач), отобразить их пользователю, реализовать фильтрацию данных и поиск по названию. При нажатии на определенный элемент получать данные о пользователе, ответственном за выбранное задание, и отобразить информацию о нем.

Дополнительные примеры возможных тестовых заданий

Пример № 1.

Создать приложение на Agular для вывода списка пользователей (данные о пользователях получить с сервера). Добавить функционал для изменения информации о пользователе или его удалении. Для формы добавления пользователя (для формы есть описание обязательных полей, которые должны быть) реализовать валидацию.

Пример № 2.

Реализовать галерею изображений (список изображений получить с сервера) с помощью React-Native. Реализовать страницы с отображением списка мини-изображений с названием и информацией об авторе. Когда пользователь нажимает на определенное изображение, открывается большой экран с максимальной плоскостью фотографии.

Пример № 3.

Сверстать сайт по макету, реализовать 3 слайдера, добавить скрипт на JS для их пролистывания. Добавить анимацию там, где это уместно. Обеспечить корректность отображения в разных браузерах. Отправить ссылку на github репозиторий с выполненным заданием. Задеплоить на любой хостинг и добавить ссылку на сайт.

Junior QA/QC заподозрил, что получил приглашение на собеседование от фейковой компании. В ответ рекрутер посоветовала кандидату повышать эрудицию и вписала в blacklist

По теме

Junior QA/QC заподозрил, что получил приглашение на собеседование от фейковой компании. В ответ рекрутер посоветовала кандидату повышать эрудицию и вписала в blacklist

Читайте главные IT-новости страны в нашем Telegram

По теме

Читайте главные IT-новости страны в нашем Telegram

За лаштунками лабораторії, військової школи та минулого героя

Ігор Федірко, співзасновник «Вектор-оптичної лабораторії» в Ukrainian Underdogs від dev.ua