Тест по архитектуре фронтенда

Q: Сколько вопросов в тесте по архитектуре фронтенда?

20 вопросов с выбором ответа: 7 junior, 8 middle и 5 senior. Их берём из банка в 55 вопросов с разборами.

Q: Как считается уровень?

Каждый ответ весит по сложности: junior 1 балл, middle 2, senior 3. Senior дают только тем, кто закрыл и сложные вопросы, поэтому угадать уровень на лёгких не выйдет.

Q: Нужна ли регистрация?

Нет. Вердикт, разбивка по темам и ошибки с правильными ответами видны сразу. Регистрация нужна, только чтобы сохранить результат и получить план подготовки.

Q: Таймер строгий?

Нет. На тест отводится около 10 минут, таймер просто показывает время. Когда оно выйдет, можно спокойно закончить.

Q: Вопросы каждый раз одни и те же?

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

Q: Можно поделиться результатом?

Да. Ссылка показывает только тему, уровень, процент и дату, без имени и почты.

Question 1

Какая проблема в этом компоненте самая серьёзная?

Accepted Answer

query нет в зависимостях: при его смене данные не перезагрузятся

Answer

Нужно передать async-функцию прямо в useEffect(async () => ...)

Answer

Не хватает useCallback вокруг setUsers, он меняется на каждый рендер

Answer

Нельзя вызывать fetch внутри компонента, только в сервисном слое

Question 2

Что не так в этом коде?

Accepted Answer

fullName производное: его надо вычислять в рендере, а не хранить

Answer

Ничего: синхронизация состояния эффектом это стандартный подход

Answer

Нужно использовать useLayoutEffect, тогда второго рендера не будет

Answer

Не хватает useCallback для setFullName, он меняется каждый рендер

Question 3

Какой порядок слоёв FSD (сверху вниз) правильный?

Accepted Answer

app, pages, widgets, features, entities, shared

Answer

app, pages, features, widgets, entities, shared

Answer

shared, entities, features, widgets, pages, app

Answer

app, widgets, pages, entities, features, shared

Question 4

Что происходит при гидрации?

Accepted Answer

React сопоставляет дерево с серверным DOM и вешает обработчики

Answer

Сервер повторно генерирует HTML, если данные страницы устарели

Answer

Браузер заново скачивает HTML без кеша после загрузки скриптов

Answer

React удаляет серверный HTML и рисует страницу с нуля на клиенте

Question 5

Страница собрана через ISR с revalidate = 60. Прошло 5 минут без визитов. Что получит первый посетитель?

Accepted Answer

Старую версию из кеша, а пересборка запустится в фоне

Answer

Ошибку 503, пока страница пересобирается на сервере

Answer

Пустой HTML и клиентскую загрузку данных после гидрации

Answer

Свежую страницу: сервер дождётся пересборки перед ответом

Question 6

Почему CI в монорепо на Turborepo или Nx работает быстрее, чем «собрать и протестировать всё»?

Accepted Answer

Запускают задачи только для затронутых пакетов, остальное из кеша

Answer

Они компилируют TypeScript своим компилятором быстрее, чем tsc

Answer

Они по умолчанию отключают тесты в CI и запускают их ночью

Answer

Они объединяют все пакеты в один бандл и собирают его разом

Question 7

Две формы (регистрация и редактирование профиля) сейчас валидируют email одинаково, а пароль по-разному, и меняются по запросам разных команд. Разработчик объединил их в общий <UniversalForm mode="register" | "edit"> с 12 флагами. Что вероятнее всего пойдёт не так?

Accepted Answer

Правка одной формы будет ломать другую: это ложное DRY

Answer

Ничего: общий код всегда дешевле поддерживать, чем два похожих

Answer

Упадёт производительность из-за лишних рендеров по флагам

Answer

Нарушится LSP, потому что формы ведут себя по-разному

Question 8

Куда по FSD положить кнопку «Добавить в избранное» с запросом к API и обновлением счётчика?

Accepted Answer

features/add-to-favorites

Answer

entities/product

Answer

shared/ui

Answer

widgets/favorites-button

Question 9

В каком порядке эффективнее всего смотреть пулреквест?

Accepted Answer

Корректность и задача, затем безопасность и архитектура, стиль линтеру

Answer

Стиль и отступы, потом имена переменных, потом логика и архитектура

Answer

Только тесты: если CI зелёный, код корректен и можно апрувить

Answer

Сначала проверить, что код написан в твоём стиле, потом всё остальное

Question 10

Тип Order в entities/order должен содержать тип User из entities/user. Какой способ предусмотрен в FSD для такой связи?

Accepted Answer

Явный кросс-импорт через @x: entities/user/@x/order.ts

Answer

Это запрещено: тип надо продублировать в entities/order

Answer

Перенести User в shared, чтобы его видели все сущности

Answer

Объединить user и order в одну сущность user-order

Question 11

Как лучше организовать связь между микрофронтендами «корзина» и «каталог»?

Accepted Answer

Слабосвязанно: события, URL или данные через бэкенд

Answer

Общий Redux-стор, который импортируют оба микрофронтенда

Answer

Прямой импорт внутренних функций корзины в каталог

Answer

Глобальная переменная window.cart, доступная обоим

Question 12

Совместный текстовый редактор должен работать офлайн и сливать правки без центрального сервера-арбитра. Какой подход подходит лучше всего?

Accepted Answer

CRDT (например, Yjs или Automerge)

Answer

Last write wins по времени сохранения документа

Answer

Блокировка документа одним пользователем

Answer

Отправка всего документа при каждом изменении

Senior	от 80% баллов и от 60% senior-вопросов
Middle	от 60% баллов и от половины middle-вопросов
Junior	от 30% баллов или от 70% junior-вопросов
Пока стажёр	меньше, чем нужно для junior

Тест по архитектуре фронтенда онлайн

20 вопросов по архитектуре фронтенда

Примеры вопросов по архитектуре фронтенда

Какие темы проверяет тест

Как считается уровень

Ещё тесты

Частые вопросы