🤔 Что использовать для стейт-менеджмента в React?

Варианты:
- Redux Toolkit — классическое, мощное решение.
- Context + useReducer — для локального или простого глобального состояния.
- Zustand, Jotai, Recoil — более лёгкие и современные альтернативы.
- MobX — реактивный и удобный, особенно для сложных моделей данных.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое merge и rebase, в чем отличие друг от друга?

Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.

🚩Merge (слияние)

Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.
Предположим, у вас есть две ветки: main и feature.
В ветке feature вы сделали несколько коммитов.
Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

🚩Rebase (перебазирование)

Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов.
Предположим, у вас есть две ветки: main и feature.
В ветке feature вы сделали несколько коммитов.
Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

🚩Основные отличия

🟠История коммитов
Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток.
Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений.

🟠Коммиты слияния
Merge: Создает новый коммит слияния, который объединяет изменения из двух веток.
Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую.

🟠Конфликты
Merge: Конфликты решаются один раз при слиянии.
Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно.

🟠Применение
Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе.
Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Есть ли в React Shadow DOM или только Virtual DOM?

React использует Virtual DOM, а не Shadow DOM.
Virtual DOM — это копия DOM в памяти, для вычисления минимальных изменений и повышения производительности.
Shadow DOM — изолированное дерево DOM (используется, например, в Web Components), но не в React.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Для чего нуден key при работе со списками?

В React при рендере списков (например, через .map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке.

🚩Почему `key` важен?

React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим.
Без key React не понимает, какие элементы изменились, удалились или добавились.
Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру.

🚩Как использовать `key` правильно?

const users = ["Alice", "Bob", "Charlie"];

function UserList() {
    return (
        <ul>
            {users.map((user, index) => (
                <li key={user}>{user}</li> // Хорошо, если `user` уникален
            ))}
        </ul>
    );
}

🚩Что будет без `key`?

Если не указать key, React выдаст предупреждение:

Warning: Each child in a list should have a unique "key" prop.

Кроме того, при изменении списка возможны проблемы с перерисовкой

{users.map((user, index) => (
    <input key={index} defaultValue={user} />
))}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие ограничения накладываются на поток Web Worker?

- Нет доступа к DOM напрямую;
- Нет доступа к window, document, alert;
- Обмен данными происходит через сообщения (postMessage);
- Нужно отдельно импортировать зависимости.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какое событие сработает при потери фокуса элементом формы?

Событие, которое срабатывает при потере фокуса элементом формы, называется blur.

🚩Почему нужно событие `blur`?

Событие blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле.
Автоматическое сохранение введенных данных при переходе на другой элемент формы.
Скрытие вспомогательной информации (например, подсказок) при уходе с элемента.
blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы.

🚩Как оно работает?

blur срабатывает, когда элемент теряет фокус, то есть пользователь:
Кликнул на другой элемент.
Нажал клавишу Tab, чтобы перейти на следующий элемент.
В отличие от события focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом.

🚩Как использовать `blur`?

Событие можно обрабатывать с помощью:
1. HTML-атрибутов (например, onblur).
2. JavaScript через метод addEventListener.

Пример на практике

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример blur</title>
  <script>
    function validateInput(event) {
      const input = event.target;
      if (input.value.trim() === "") {
        alert("Поле не должно быть пустым!");
      }
    }

    document.addEventListener("DOMContentLoaded", () => {
      const inputElement = document.getElementById("name");
      inputElement.addEventListener("blur", validateInput);
    });
  </script>
</head>
<body>
  <form>
    <label for="name">Введите имя:</label>
    <input type="text" id="name" name="name" />
    <button type="submit">Отправить</button>
  </form>
</body>
</html>

🚩Особенности события `blur`

🟠Не всплывает
Событие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.

   // Работает только для конкретного элемента
   element.addEventListener("blur", handler);

   // Для делегирования используют focusout
   parentElement.addEventListener("focusout", handler);
   

🟠Отличие от `change`
Событие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие модификаторы есть у v-model?

Для двусторонней привязки данных с помощью v-model есть модификаторы, позволяющие изменить стандартное поведение. Например, можно задать обновление значения только при завершении ввода, автоматически преобразовать значение в число или убрать пробелы с краёв строки. Это помогает упростить валидацию данных и уменьшить количество ошибок при вводе.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как можно вставить svg в html документ?

Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript.

🟠Прямой (inline) SVG-код в HTML
Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript.

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

🟠Через тег `<img>`
Если SVG не нужно изменять, можно вставить его как обычное изображение.

<img src="image.svg" alt="Описание изображения" width="100" height="100">

🟠Через CSS `background-image`
SVG можно использовать как фоновое изображение.

<div class="icon"></div>

<style>
  .icon {
    width: 100px;
    height: 100px;
    background-image: url('image.svg');
    background-size: cover;
  }
</style>

🟠Через тег `<object>`
Позволяет загружать SVG-файлы и взаимодействовать с ними.

<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>

🟠Через тег `<iframe>`
SVG можно загружать в iframe.

<iframe src="image.svg" width="100" height="100"></iframe>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как пользоваться линтером JS?

Линтер – инструмент для анализа кода. Самый популярный – ESLint.
1. Установить:
2. npm install eslint --save-dev
3. Инициализировать:
4. npx eslint --init
5. Проверить код:
6. npx eslint script.js

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Почему map используют чаще, чем объект?

Хотя объекты {} исторически использовались как ассоциативные массивы (ключ-значение), у Map есть ряд преимуществ, которые делают его более удобным в большинстве случаев.

🟠`Map` может использовать любые типы данных в качестве ключей
В объектах {} ключи всегда автоматически приводятся к строке.

const obj = {};
const key1 = {};
const key2 = {};

obj[key1] = "value1";
obj[key2] = "value2";

console.log(obj); // { '[object Object]': 'value2' }
console.log(obj[key1]); // "value2" (ключи перезаписались, потому что оба стали "[object Object]")

Пример с Map:

const map = new Map();
map.set(key1, "value1");
map.set(key2, "value2");

console.log(map.get(key1)); // "value1"
console.log(map.get(key2)); // "value2"

🟠`Map` хранит порядок ключей
В объекте {} порядок ключей не гарантируется (особенно для числовых ключей).

const obj = { 2: "two", 1: "one", 3: "three" };
console.log(Object.keys(obj)); // ["1", "2", "3"] (порядок числовых ключей изменился!)

Пример с Map

const map = new Map();
map.set(2, "two");
map.set(1, "one");
map.set(3, "three");

console.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!)

🟠`Map` быстрее при частых добавлениях/удалениях
Объекты {} оптимизированы для хранения структуры данных, но операции delete и Object.keys(obj).length могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки.
Разница в скорости
В Map операции .set(), .get(), .delete() выполняются быстрее.
В объекте {} delete obj[key] может работать медленнее, так как JavaScript оптимизирует объекты для других целей.

🟠У `Map` есть удобные методы
Объект {} не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length.

const map = new Map();
map.set("a", 1);
map.set("b", 2);

console.log(map.size); // 2
console.log(map.has("a")); // true
console.log(map.delete("b")); // true (удалит "b")

В объекте {}

const obj = { a: 1, b: 2 };

console.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys())
console.log(obj.hasOwnProperty("a")); // true (менее удобный синтаксис)
delete obj.b; // Удаление ключа

🟠`Map` не имеет проблем с прототипами
В объекте {} могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.

const obj = {};
console.log(obj.toString); // [Function: toString] (унаследованное свойство!)
console.log(obj["toString"]); // [Function: toString] (может вызвать баги)

Чтобы обойти это, приходится делать так

const obj = Object.create(null); // Теперь у объекта нет прототипа
obj.toString = "custom";
console.log(obj.toString); // "custom"

В Map таких проблем нет

const map = new Map();
map.set("toString", "custom");
console.log(map.get("toString")); // "custom" (никаких багов!)

Ставь 👍 и забирай 📚 Базу знаний

🤔 Когда используются переменные var, let, const?

- var: устаревший способ, имеет функцию как область видимости и может быть переопределён.
- let: используется для переменных, которые могут изменяться, имеет блочную область видимости.
- const: для неизменяемых переменных (значение не может быть переназначено).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как методы будут у api?

В API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными).

🚩Примеры использования

🟠`GET` – Получение данных
Запрашиваем список пользователей:

GET /users HTTP/1.1
Host: api.example.com

Ответ (JSON)

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

🟠`POST` – Создание нового ресурса
Отправляем данные нового пользователя:

POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Charlie",
  "email": "charlie@example.com"
}

Ответ (201 Created)

{
  "id": 3,
  "name": "Charlie",
  "email": "charlie@example.com"
}

🟠`PUT` – Полное обновление ресурса
Заменяем пользователя с ID 1:

PUT /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Smith",
  "email": "alice.smith@example.com"
}

🟠`PATCH` – Частичное обновление ресурса
Меняем только имя пользователя 1, не трогая email:

PATCH /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Johnson"
}

🟠`DELETE` – Удаление ресурса
Удаляем пользователя с ID 2:

DELETE /users/2 HTTP/1.1
Host: api.example.com

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как отслеживаем активность пользователя?

- События (click, scroll, mousemove).
- Инструменты: Yandex.Metrika, Google Analytics, PostHog.
- Собственные endpoint'ы POST /track.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как браузер понимает что картинка является картинкой?

Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее.

🟠MIME-тип (Media Type)
MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например:
- image/png → PNG
- image/jpeg → JPEG
- image/svg+xml → SVG
- image/gif → GIF
- image/webp → WebP

Content-Type: image/png

🟠Расширение файла
Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (.jpg, .png, .gif).

<img src="picture.jpg" alt="Картинка">

🟠HTML-теги и атрибуты
Когда браузер встречает в коде такие теги, как <img>, <picture>, <canvas>, он ожидает, что внутри будет изображение.

<img src="image.png" alt="Пример картинки">

🟠Формат и сигнатура файла
Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например:
- PNG-файл всегда начинается с байтов 89 50 4E 47 (что означает "PNG" в ASCII).
- JPEG — FF D8 FF.
- GIF — 47 49 46 38 (GIF89a).

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какой формат видеофайлов сейчас поддерживается HTML5?

Современные браузеры поддерживают:
- MP4 (H.264/AAC) — наиболее универсальный;
- WebM (VP8/VP9) — открыт и эффективен;
- Ogg (Theora/Vorbis) — реже используется, поддерживается не везде.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Зачем создавались библиотеки react и другие?

Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки:

🟠Повышение эффективности разработки
Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным.
React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение.

🟠Улучшение производительности
Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким.
React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились.

🟠Облегчение работы с состоянием приложения
Управление состоянием больших и сложных приложений может стать хаотичным.
React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой.

🟠Улучшение масштабируемости и поддерживаемости кода
По мере роста приложения, код может стать сложным для понимания и изменения.
Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода.

🟠Сообщество и экосистема
Наличие обширного сообщества и инструментов для разработки.
React имеет большое сообщество разработчиков, множество библиотек и инструментов, которые упрощают разработку и интеграцию различных функций в приложения.

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

export default Counter;

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как задать Flexbox?

Нужно установить контейнеру свойство display: flex. Его содержимое становится flex-элементами, которые подчиняются гибкой системе распределения.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие проблемы решает eventloop?

Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него.

🚩JavaScript однопоточный, но нужно выполнять асинхронные задачи

JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы.
Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.

console.log("1: Перед запросом");

setTimeout(() => {
  console.log("2: Данные загружены");
}, 2000);

console.log("3: После запроса");

Вывод в консоль

1: Перед запросом  
3: После запроса  
2: Данные загружены (спустя 2 секунды)

🚩Обработка пользовательских событий без зависаний

Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция.
Event Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен.

document.querySelector("button").addEventListener("click", () => {
  console.log("Кнопка нажата!");
});

🚩Загрузка данных без блокировки страницы

Когда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа.
Асинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится.

console.log("Запрос данных...");

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log("Данные получены:", data));

console.log("Код выполняется дальше!");

Вывод

Запрос данных...  
Код выполняется дальше!  
(Спустя время) Данные получены: {id: 1, title: "..."}

🚩Обход блокировки в тяжёлых вычислениях

Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет.
Можно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame.

let count = 0;

function heavyTask() {
  for (let i = 0; i < 1e6; i++) {
    count++;
  }
  console.log("Часть работы выполнена!");

  if (count < 5e6) {
    setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
  }
}

heavyTask();

Ставь 👍 и забирай 📚 Базу знаний

🤔 Пример архитектурных решений для проектов на Node.js?

- Layered architecture — с разделением на controller, service, repository;
- Hexagonal architecture — с портами/адаптерами;
- Microservices с gRPC/REST;
- GraphQL gateway с Apollo;
- Event-driven через Kafka/RabbitMQ;
- Serverless архитектура (AWS Lambda, Firebase Functions).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Зачем нужен ref?

В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.

🚩Основные случаи использования `ref`

Доступ к DOM-элементам:
Использование в сторонних библиотеках:
Сохранение состояния вне дерева компонентов:

🚩Примеры использования `ref`

Доступ к DOM-элементам
Установка фокуса на элемент

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;

Получение размеров элемента
Измерение элемента:

import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;

Использование в классовых компонентах
Доступ к методам компонента:

import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;

🚩Важно помнить

Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.
Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.
Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как следует оформлять страницу, в которой контент может быть на разных языках?

- Указывать атрибут lang в <html> и в текстовых блоках;
- Использовать hreflang в <link> и <a> для указания языковых версий;
- Хранить переводы отдельно и подгружать в зависимости от языка (через i18n).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний