Вопросы для собеседования Junior Full Stack Developer
Milad Bonakdar
Автор
Подготовьтесь к собеседованию Junior Full Stack Developer с практическими вопросами по HTML, CSS, JavaScript, React, Node.js, API, SQL, Git и отладке.
Начните с основ full stack
На собеседовании Junior Full Stack Developer чаще всего проверяют, можете ли вы объяснить, как простое веб-приложение работает от браузера до базы данных: HTML и CSS задают структуру страницы, JavaScript добавляет поведение, React управляет состоянием интерфейса, Node.js выполняет серверную логику, API связывают слои, SQL хранит данные, а Git делает работу проверяемой.
Используйте это руководство, чтобы сначала отработать короткие и ясные ответы. Затем связывайте каждый ответ с небольшим проектом, который вы действительно делали. На junior-уровне редко ждут сложную архитектуру, но ждут уверенные основы, хорошие привычки отладки и честное объяснение компромиссов.
Как готовиться
- Подготовьте рассказ об одном проекте: от UI-события до API-запроса и запроса к базе данных.
- Говорите не только о реализованных функциях, но и об ошибках, которые вы исправили.
- Отвечайте практично: дайте определение, короткий пример и одну типичную ошибку.
HTML & CSS
1. Объясните Box Model в CSS.
Ответ: CSS Box Model — это основа макета в вебе. Каждый элемент представлен в виде прямоугольной рамки.
- Content: Фактический текст или изображение.
- Padding: Прозрачная область вокруг контента (внутри границы).
- Border: Граница, окружающая padding и content.
- Margin: Прозрачная область за пределами границы (создает пространство между элементами).
Распространенность: Очень часто Сложность: Легко
2. В чем разница между display: block, inline и inline-block?
Ответ:
- Block: Начинается с новой строки и занимает всю доступную ширину (например,
<div>,<p>). - Inline: Не начинается с новой строки и занимает только необходимую ширину. Свойства
widthиheightне действуют (например,<span>,<a>). - Inline-block: Как inline элементы, но вы можете задавать
widthиheight. Полезно для сеток или навигационных меню.
Распространенность: Часто Сложность: Легко
3. Что такое Semantic HTML и почему это важно?
Ответ: Semantic HTML означает использование тегов, которые передают значение контента, а не только его внешний вид.
- Примеры:
<header>,<nav>,<article>,<footer>вместо просто<div>. - Важность:
- Доступность: Программы чтения с экрана используют эти теги, чтобы помочь пользователям с ослабленным зрением ориентироваться.
- SEO: Поисковые системы лучше понимают структуру и важность контента.
- Читаемость: Код легче понять разработчикам.
Распространенность: Часто Сложность: Легко
4. Объясните Flexbox vs. CSS Grid.
Ответ:
- Flexbox: Одномерная модель макета (строка ИЛИ столбец). Лучше всего подходит для выравнивания элементов внутри контейнера или распределения пространства (например, панель навигации).
- CSS Grid: Двумерная модель макета (строки И столбцы). Лучше всего подходит для определения общей структуры страницы (например, header, sidebar, основной контент, footer).
Распространенность: Часто Сложность: Средне
JavaScript
5. В чем разница между var, let и const?
Ответ:
var: Область видимости - функция (или глобальная). Может быть переопределена и обновлена. Поднимается (hoisted) в начало своей области видимости.let: Область видимости - блок (существует только внутри{}). Может быть обновлена, но не переопределена в той же области видимости.const: Область видимости - блок. Не может быть обновлена или переопределена. Должна быть инициализирована во время объявления. Используйте это по умолчанию, если вам не нужно переназначать.
Распространенность: Очень часто Сложность: Легко
6. Объясните async и await.
Ответ:
async и await (представленные в ES2017) делают асинхронный код похожим на синхронный и заставляют его вести себя как синхронный.
async: Размещается перед функцией, гарантирует, что функция вернет Promise.await: Используется внутриasyncфункции, приостанавливает выполнение до тех пор, пока Promise не будет разрешен (resolved).- Преимущество: Чище и понятнее, чем цепочка
.then()и.catch().
Распространенность: Часто Сложность: Средне
7. Что такое DOM?
Ответ: DOM (Document Object Model) — это программный интерфейс для веб-документов. Он представляет страницу таким образом, что программы (JavaScript) могут изменять структуру, стиль и содержимое документа. DOM представляет документ в виде узлов и объектов.
Распространенность: Часто Сложность: Легко
8. В чем разница между == и ===?
Ответ:
==(Нестрогое равенство): Сравнивает значения после приведения типов (преобразования их к общему типу). Например,5 == "5"этоtrue.===(Строгое равенство): Сравнивает и значение, и тип. Нет приведения типов. Например,5 === "5"этоfalse.- Рекомендация: Всегда используйте
===, чтобы избежать неожиданных ошибок.
Распространенность: Часто Сложность: Легко
React
9. Что такое Virtual DOM?
Ответ: Virtual DOM — это облегченная копия реального DOM, хранящаяся в памяти.
- Процесс: Когда состояние изменяется, React сначала обновляет Virtual DOM. Затем он сравнивает новый Virtual DOM с предыдущим (diffing) и вычисляет наиболее эффективный способ обновления реального DOM (reconciliation).
- Преимущество: Минимизирует прямое манипулирование медленным реальным DOM, повышая производительность.
Распространенность: Часто Сложность: Средне
10. Что такое Props и State?
Ответ:
- Props (Свойства): Данные только для чтения, передаваемые от родительского компонента к дочернему компоненту. Они позволяют компонентам быть многократно используемыми и динамичными.
- State (Состояние): Данные, управляемые внутри компонента. Он может изменяться со временем (например, ввод пользователя, ответ API). Когда состояние изменяется, компонент перерисовывается.
Распространенность: Очень часто Сложность: Легко
11. Что такое React Hooks? Назовите несколько распространенных.
Ответ: Hooks — это функции, которые позволяют функциональным компонентам использовать возможности React: state, context, refs и effects.
useState: Хранит локальное состояние компонента, например значение формы или выбранную вкладку.useEffect: Синхронизирует компонент с чем-то вне React, например с загрузкой данных или подпиской на событие. Его не стоит использовать для любых вычислений.useContext: Читает общий context без ручной передачи props через каждый уровень.- Совет для собеседования: Упомяните Rules of Hooks: hooks вызывают на верхнем уровне React-компонента или custom hook, а не внутри циклов и условий.
Распространенность: Часто Сложность: Средне
Node.js & Backend
12. Что такое Node.js и почему он однопоточный?
Ответ: Node.js — это среда выполнения JavaScript на движке V8. JavaScript выполняется в одном основном потоке, но Node.js может обрабатывать много I/O-задач, потому что event loop координирует асинхронную работу.
- Основной поток: Выполняет JavaScript callback-функции.
- Non-blocking I/O: Операции с файлами, сетью и базой данных могут быть переданы операционной системе или libuv, а затем продолжены, когда результат готов.
- Важное ограничение: CPU-тяжелый JavaScript все равно может блокировать event loop. Для дорогих задач используют worker threads, очередь задач или выносят работу из пути обработки запроса.
- Хороший пример: API-сервер, который ожидает много запросов к базе данных или сети.
Распространенность: Часто Сложность: Средне
13. Что такое NPM и package.json?
Ответ:
- NPM (Node Package Manager): Менеджер пакетов по умолчанию для Node.js. Он позволяет устанавливать и управлять библиотеками (зависимостями).
package.json: Файл манифеста для проекта Node.js. Он содержит метаданные (имя, версия) и зависимости (библиотеки, необходимые для запуска приложения).
Распространенность: Часто Сложность: Легко
14. Объясните разницу между GET и POST.
Ответ:
- GET: Получает ресурс. Метод должен быть safe, то есть не менять состояние сервера намеренно, и idempotent: повторение того же запроса должно иметь тот же эффект.
- POST: Отправляет данные для обработки сервером, часто для создания ресурса или запуска действия. Идемпотентность не гарантируется, поэтому повторный POST может создать дубликаты, если API от этого не защищает.
- Практический пример: GET используют для загрузки списка товаров; POST — для отправки заказа или создания комментария.
Распространенность: Часто Сложность: Легко
Database (SQL)
15. Что такое Primary Key и Foreign Key?
Ответ:
- Primary Key (Первичный ключ): Столбец (или набор столбцов), который однозначно идентифицирует каждую строку в таблице. Он не может быть
NULL. - Foreign Key (Внешний ключ): Столбец, который ссылается на Primary Key другой таблицы. Он устанавливает связь между двумя таблицами.
Распространенность: Часто Сложность: Легко
16. Объясните разницу между INNER JOIN и LEFT JOIN.
Ответ:
- INNER JOIN: Возвращает записи, которые имеют совпадающие значения в обеих таблицах.
- LEFT JOIN (или LEFT OUTER JOIN): Возвращает все записи из левой таблицы и соответствующие записи из правой таблицы. Если соответствия нет, результат будет
NULLв правой части.
Распространенность: Очень часто Сложность: Средне
17. Что такое Normalization?
Ответ: Нормализация — это процесс организации данных в базе данных для уменьшения избыточности и повышения целостности данных.
- Цель: Разделить большие таблицы на более мелкие таблицы и связать их с помощью отношений.
- Формы: 1NF, 2NF, 3NF (Третьей нормальной формы обычно достаточно для большинства приложений).
Распространенность: Редко (для Juniors) Сложность: Средне
General
18. Что такое Git и почему мы его используем?
Ответ: Git — это распределенная система контроля версий.
- Использование: Отслеживает изменения в исходном коде во время разработки программного обеспечения.
- Преимущества: Позволяет нескольким разработчикам работать вместе (совместная работа), сохраняет историю изменений (версионность) и позволяет вернуться к предыдущим состояниям, если что-то сломается.
Распространенность: Часто Сложность: Легко
19. Что такое API?
Ответ: API расшифровывается как Application Programming Interface (интерфейс прикладного программирования). Это набор правил, который позволяет различным программным приложениям взаимодействовать друг с другом. В веб-разработке обычно это относится к REST API, где интерфейс (клиент) запрашивает данные у бэкенда (сервера).
Распространенность: Часто Сложность: Легко
20. Как отлаживать веб-приложение?
Ответ: Начните с воспроизведения проблемы и сужения области: браузер, сетевой запрос, backend-handler или база данных.
- Frontend: Используйте DevTools браузера: Console для ошибок, Network для статусов и payload API, Elements для HTML/CSS и React DevTools при необходимости.
- Backend: Проверьте структурированные логи, request ID, stack traces, переменные окружения и запросы к базе данных. Если поток выполнения неясен, используйте debugger.
- Хороший ответ: Опишите реальный bug, который вы исправили, что проверили первым и как подтвердили исправление.
Распространенность: Часто Сложность: Легко
