Мануал для джуна. Що треба знати початківцю у fullstack-розробці: 30 питань та приклади тестових завдань

Увага, перша співбесіда

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

Чого кандидату варто очікувати під час інтерв’ю:

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

Слова не завжди допоможуть

Ти джун, тож щоб проявити себе на співбесіді, не використовуй лише теорію, а пояснюй, як це буде на практиці. За можливості — бери і пиши код.

Приміром, у тебе запитали «що таке this?». Щоб продемонструвати під час інтерв’ю, що ти дійсно розумієш — сприймай це питання не просто як «що це таке?», а як: «Наведіть приклади, в яких ситуаціях, яке значення буде приймати 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?
• Що таке чиста функція (pure function)?
• Як за допомогою 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

По темi

Junior QA/QC запідозрив, що отримав запрошення на співбесіду від фейкової компанії. У відповідь рекрутерка порадила кандидату підвищувати ерудицію та вписала в blacklist

Читайте головні IT-новини країни в нашому Telegram

По темi

Читайте головні IT-новини країни в нашому Telegram