React Frontend Developer

Question 1

Что такое ARIA (Accessible Rich Internet Applications), и как правильно использовать атрибуты ARIA для улучшения доступности?

Accepted Answer

ARIA (Accessible Rich Internet Applications) — это набор атрибутов, который помогает разработчикам улучшать доступность сложных веб-приложений для людей с ограниченными возможностями. Атрибуты ARIA могут быть добавлены к HTML-элементам, чтобы описать их роли, состояния и свойства для экранных читалок и других вспомогательных технологий. Например, атрибуты ARIA могут помочь определить, что элемент является кнопкой или заголовком, и предоставить информацию о его состоянии (например, "раскрыто" или "закрыто"). Правильное использование ARIA делает контент более понятным и доступным для всех пользователей.

Question 2

Как работают Content Security Policy (CSP) заголовки и атрибуты вроде integrity в теге <script>?

Accepted Answer

Content Security Policy (CSP) — это механизм безопасности, который помогает предотвратить различные типы атак, такие как XSS (Cross-Site Scripting), ограничивая, какие ресурсы могут загружаться на странице. Заголовок CSP определяет, откуда разрешено загружать скрипты, стили и другие ресурсы.

Атрибут integrity в теге <script> используется для проверки целостности загружаемого скрипта, чтобы убедиться, что он не был изменен. Если хэш скрипта не совпадает с указанным значением, браузер отклонит его загрузку.

Question 3

Что такое setTimeout и setInterval?

Accepted Answer

setTimeout выполняет указанную функцию один раз через заданное время, а setInterval — периодически, с указанным интервалом. Оба метода работают асинхронно, что значит, что они не блокируют основной поток выполнения программы. Чтобы остановить выполнение setInterval, нужно вызвать clearInterval, а для остановки отложенного вызова setTimeout — clearTimeout.

Question 4

В чем разница между интерфейсом (interface) и типом (type) в TypeScript?

Accepted Answer

Интерфейсы и типы в TypeScript очень похожи, оба используются для описания структуры объектов, но у них есть различия. Интерфейсы лучше подходят для описания объектов и классов и могут расширяться (унаследовать) друг от друга. Типы более универсальны — они могут объединять примитивные типы, объединять (Union) или пересекать (Intersection) другие типы, но не могут быть расширены, как интерфейсы.

Question 5

Что такое пересечение типов (intersection types) в TypeScript, и как оно используется?

Accepted Answer

Пересечение типов в TypeScript позволяет объединить несколько типов в один, и результат будет включать все свойства всех типов. Это особенно полезно, когда нужно комбинировать разные типы данных или описывать объекты, которые должны иметь несколько наборов свойств одновременно. Пересечение создается с помощью оператора & и позволяет гибко создавать сложные структуры данных.

Question 6

Как использовать Subresource Integrity (SRI) для защиты загружаемых ресурсов?

Accepted Answer

Subresource Integrity (SRI) — это механизм безопасности, который позволяет браузерам проверять, что загружаемые внешние ресурсы (например, скрипты и стили) не были изменены. Для использования SRI необходимо добавить атрибут integrity к тегам

Question 7

Что такое ArrayBuffer и в чем разница между типами Uint32Array и Float32Array?

Accepted Answer

ArrayBuffer — это объект, который хранит фиксированное количество байт данных в памяти. Он используется для работы с бинарными данными. Uint32Array и Float32Array — это типизированные массивы, которые представляют разные типы данных: Uint32Array работает с беззнаковыми целыми числами, а Float32Array — с числами с плавающей точкой. Основное различие между ними — в типе данных, который они хранят.

Question 8

Что такое Continuous Integration?

Accepted Answer

Continuous Integration (CI) — это процесс, при котором разработчики часто добавляют код в общий репозиторий. Каждый коммит автоматически тестируется, чтобы сразу выявлять ошибки и устранять их.

Question 9

В чем разница между Continuous Integration и Continuous Delivery?

Accepted Answer

Continuous Integration (CI) проверяет и тестирует код перед объединением с основной веткой. Continuous Delivery (CD) идёт дальше и автоматически подготавливает код к развертыванию в продакшн.

Question 10

Как написать React-компонент, чтобы при монтировании запускался setInterval, выводящий в консоль "Hello world" каждые 10 секунд? Что важно учесть при такой реализации с setInterval?

Accepted Answer

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log('Hello world');
  }, 10000);
  return () => clearInterval(intervalId); // Очистка при размонтировании
}, []);Важно:Очистка в return — иначе интервал будет работать после удаления компонента.Пустой массив зависимостей [] — чтобы эффект выполнился только при монтировании.

Вопросы React Frontend Developer