React Frontend Developer

Question 1

Как бы ты описал общий тип для разных вариантов пользователя?

Accepted Answer

Общий тип пользователя удобно описывать через discriminated union. Для этого вводится общее поле-дискриминатор. По нему TypeScript понимает, с каким вариантом типа работает код. Такой подход безопасен и хорошо масштабируется. Он часто используется в реальных проектах.

Question 2

Как работает потоковая загрузка данных в JavaScript (Streaming API)?

Accepted Answer

Потоковая загрузка данных в JavaScript позволяет обрабатывать информацию по частям (чанкам) по мере её поступления, а не ждать полной загрузки. Это реализуется через интерфейсы Streams API, такие как ReadableStream, которые можно получить из fetch-запроса. Например, при скачивании большого файла можно начать его отображение или сохранение сразу, экономя память и улучшая отзывчивость приложения. Потоки особенно полезны для стриминга видео, обработки больших JSON или CSV файлов.

Question 3

Что такое grooming задач?

Accepted Answer

Grooming задач — это процесс уточнения, оценки и приоритизации элементов бэклога перед планированием спринта. Команда обсуждает каждую задачу, добавляет детали, разбивает крупные задачи на более мелкие и присваивает им оценку в story points. Это помогает избежать неопределенности и улучшить планирование.

Question 4

Как работает repeat(auto-fill, minmax(...)) в CSS Grid и чем auto-fill отличается от auto-fit?

Accepted Answer

Функция repeat(auto-fill, minmax(...)) создаёт столько треков, сколько помещается в контейнер, с минимальным и максимальным размером. auto-fill создаёт пустые треки, если элементов меньше, а auto-fit схлопывает их, позволяя элементам растягиваться. Это удобно для адаптивных сеток без медиазапросов.

Question 5

Как найти минимальный и максимальный элементы в массиве объектов, не используя встроенные методы Math.min/Math.max?

Accepted Answer

Для нахождения минимального и максимального элементов в массиве объектов без Math.min/Math.max нужно вручную перебрать массив, сравнивая значения нужного поля. Инициализируем переменные min и max первым элементом, затем проходим по остальным, обновляя их при нахождении меньшего или большего значения. Это базовый алгоритм, который работает за O(n) и не зависит от встроенных функций.

Question 6

Какие технологии обычно используются в стеке frontend-разработки? Каковы особенности разработки Telegram Mini Apps?

Accepted Answer

Стандартный стек frontend включает HTML, CSS, JavaScript, фреймворки (React, Vue, Angular), сборщики (Webpack, Vite) и менеджеры пакетов (npm, yarn). Telegram Mini Apps — это веб-приложения, запускаемые внутри Telegram, с ограниченным доступом к API устройства, но с возможностью взаимодействия с пользователем через бота. Особенности: использование Telegram Web App SDK, работа через iframe, ограниченный размер и необходимость адаптации под мобильные устройства.

Question 7

Что такое дискриминантные юнионы?

Accepted Answer

Дискриминантные юнионы — это объединения типов, где каждый тип имеет общее поле-дискриминант (обычно строковый литерал). TypeScript использует это поле для сужения типа при проверке. Это позволяет безопасно работать с разными вариантами данных, например, в обработчиках состояний или API-ответах.

Question 8

Как сделать количество колонок в CSS Grid (grid-template-columns) динамическим/адаптивным вместо фиксированного числа колонок?

Accepted Answer

Используйте auto-fit или auto-fill вместе с minmax() в grid-template-columns. Например: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Это заставит браузер автоматически подбирать количество колонок, подстраиваясь под ширину контейнера. Разница между auto-fit и auto-fill в том, что auto-fit схлопывает пустые треки, а auto-fill оставляет их.

Вопросы React Frontend Developer