Frontend-разработчик: подробный roadmap с нуля, современный стек и вопросы на собеседовании

Фронтенд давно перестал быть версткой статических HTML-страничек с добавлением пары строк на jQuery. Сегодня фронтенд-инженер проектирует сложные распределенные Single Page Applications (SPA), настраивает Server-Side Rendering (SSR), управляет стейтом на миллионы пользователей и борется за миллисекунды в метриках Core Web Vitals.

В этой статье мы подробно разберем:

1. Что реально нужно знать фронтендеру (без устаревшего мусора).
2. Пошаговую дорожную карту (Roadmap) от базы до продакшна.
3. 5 частых каверзных вопросов с технических собеседований с подробными ответами.

Что должен уметь Frontend-разработчик?#

На рынке труда требования к кандидатам делятся на три кита:

Дорожная карта (Roadmap) обучения#

Топ-5 вопросов с собеседований по Frontend#

1. Как работает Event Loop в браузере?#

Это главный фильтрующий вопрос на любом собеседовании.

Браузер выполняет JavaScript в одном потоке (Single Threaded). Механизм Event Loop координирует выполнение кода:

1. Выполняется синхронный код в стеке вызовов (Call Stack).
2. Когда стек пуст, Event Loop берет задачи из очереди микротасок (Microtask Queue): промисы Promise.then(), queueMicrotask, MutationObserver. Все накопившиеся микротаски выполняются до конца.
3. Браузер обновляет рендеринг (Render Steps: Recalculate Style, Layout, Paint), если подошел квант времени кадра (обычно 16.6ms для 60fps).
4. Берется одна задача из очереди макротасок (Macrotask Queue / Task Queue): setTimeout, setInterval, события ввода.
5. Цикл повторяется.

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

Promise.resolve().then(() => {
  console.log("3");
});

console.log("4");

// Вывод: 1 -> 4 -> 3 -> 2

2. В чем разница между useCallback и useMemo?#

Оба хука служат для оптимизации производительности, но кешируют разные вещи:

• useMemo — кеширует результат вычисления. Полезен при сложных расчетах массивов или объектов:
  TYPESCRIPT

  Копировать

  const sortedList = useMemo(() => heavySort(items), [items]);
  

• useCallback — кеширует саму ссылку на функцию. Используется для предотвращения лишних ререндеров дочерних компонентов, обернутых в React.memo:
  TYPESCRIPT

  Копировать

  const handleClick = useCallback(() => {
    doAction(id);
  }, [id]);
  

3. Разница между interface и type в TypeScript#

Оба инструмента позволяют описывать форму объектов, но имеют ключевые отличия:

4. Что такое CORS и как его «починить» на фронтенде?#

CORS (Cross-Origin Resource Sharing) — это механизм безопасности браузера, запрещающий веб-странице делать AJAX-запросы к домену, отличному от того, с которого страница загрузилась (разные протокол, домен или порт).

Ключевой момент: CORS настраивается на сервере, а не на фронтенде! Сервер должен вернуть заголовки Access-Control-Allow-Origin: * или указать конкретный фронтенд-домен.

Для локальной разработки фронтендер может обойти CORS через проксирование в дев-сервере (например, в vite.config.ts или next.config.ts rewrites).

5. Метрики Core Web Vitals: LCP, INP, CLS#

На собеседованиях уровня Middle+ проверяют насмотренность в метриках пользовательского опыта Google:

1. LCP (Largest Contentful Paint) — время отрисовки самого большого видимого элемента (баннера, заголовка). Идеал: $\le 2.5$ сек.
2. INP (Interaction to Next Paint) — отзывчивость интерфейса при кликах и нажатиях клавиш. Идеал: $\le 200$ мс.
3. CLS (Cumulative Layout Shift) — визуальная стабильность (сдвиг верстки из-за внезапно подгрузившихся картинок или баннеров). Идеал: $\le 0.1$.

Резюме#

Фронтенд-разработка сегодня требует фундаментального понимания браузерного рантайма, архитектуры компонентов и сетевых протоколов. Держите фокус на базе: чистый JS, типы и профилирование скорости.

Прокачивай IT-скиллы с Capycodio

Не зубри теорию часами перед компьютером. Короткие 3-минутные интерактивные сессии прямо с телефона: по дороге, за кофе или перед сном.

Вступить в белый списокПопробовать демо онлайн