🤔 Как происходит аутентификация?

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

🚩Методы

🟠Аутентификация по паролю
Пользователь вводит имя пользователя и пароль, которые проверяются на сервере. Веб-сайты с формой входа, требующей логин и пароль.
🟠Аутентификация по токенам
После успешного входа пользователь получает токен (например, JWT), который используется для дальнейших запросов. API, использующие токены для проверки подлинности запросов.
🟠OAuth
Протокол авторизации, позволяющий сторонним приложениям получать ограниченный доступ к ресурсам пользователя без передачи пароля. Вход через Google, Facebook или другие социальные сети.
🟠Двухфакторная аутентификация (2FA)
Требует два различных типа проверки (например, пароль и одноразовый код). Вход с использованием пароля и SMS-кода.
🟠Биометрическая аутентификация
Использует биометрические данные (например, отпечатки пальцев или распознавание лиц) для проверки подлинности. Вход через Touch ID или Face ID на мобильных устройствах.

🚩Сервер на Node.js с использованием Express и JWT

1⃣Установка зависимостей

npm install express jsonwebtoken bcryptjs body-parser   

2⃣Создание сервера

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const bodyParser = require('body-parser');

const app = express();
const PORT = 3000;
const SECRET_KEY = 'your_secret_key';

let users = []; // Для простоты используем массив в памяти

app.use(bodyParser.json());

// Регистрация пользователя
app.post('/register', async (req, res) => {
  const { username, password } = req.body;
  const hashedPassword = await bcrypt.hash(password, 8);
  users.push({ username, password: hashedPassword });
  res.status(201).send('User registered');
});

// Вход пользователя
app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  const user = users.find(u => u.username === username);
  if (!user) {
   return res.status(404).send('User not found');
}

  const isPasswordValid = await bcrypt.compare(password, user.password);
  if (!isPasswordValid) {
  return res.status(401).send('Invalid password');
}

  const token = jwt.sign({ username: user.username }, SECRET_KEY, { expiresIn: '1h' });
  res.json({ token });
});

// Защищенный маршрут
app.get('/protected', (req, res) => {
  const token = req.headers['authorization'];
  if (!token) {
  return res.status(401).send('Access denied');
}

try {
  const decoded = jwt.verify(token, SECRET_KEY);
  res.json({ message: 'Protected content', user: decoded });
} catch (err) {
  res.status(401).send('Invalid token');
}
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

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

🤔 Что такое семантика?

Семантика — это значение или смысл, который несет элемент или структура кода, указывая на её предназначение. В HTML семантические теги (например, <header>, <footer>, <article>) улучшают читаемость кода и помогают поисковым системам и браузерам лучше интерпретировать его. Семантика кода улучшает доступность и упрощает его поддержку.

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

🤔 Почему нельзя отправлять в get запросах чувствительную информацию?

🟠URL видны в истории браузера
GET-запросы отправляют данные через URL, который сохраняется в истории браузера. Это означает, что любой, кто имеет доступ к истории браузера, может увидеть эти данные.

🟠Логи сервера
Многие веб-серверы и прокси-серверы автоматически записывают URL всех запросов в свои логи. Чувствительная информация в URL будет сохранена в этих логах и может быть доступна администраторам серверов или в случае компрометации системы.

🟠Кэширование
Браузеры, прокси-серверы и промежуточные серверы могут кэшировать URL-адреса GET-запросов. Это означает, что чувствительная информация может быть сохранена в кэшах и доступна при последующих обращениях.

🟠Ограничения длины URL
Большинство браузеров и серверов имеют ограничения на длину URL (обычно около 2000 символов). Если данные слишком длинные, они могут быть обрезаны, что приведет к потере информации или ошибкам при обработке запроса.

🟠Видимость в реферере
Когда пользователь переходит по ссылке с одной страницы на другую, URL-адрес исходной страницы часто передается как заголовок Referer в HTTP-запросе. Это означает, что чувствительная информация в URL может быть передана сторонним сайтам.

🟠HTTP-заголовки и GET-запросы
Данные в GET-запросах передаются через URL, в то время как данные в POST-запросах передаются в теле запроса. URL более подвержены утечке, так как они часто видны в различных местах (например, в журналах серверов, истории браузера и т.д.).

🚩Использование POST-запросов в качестве альтернативы

Для отправки чувствительной информации лучше использовать POST-запросы, так как данные передаются в теле запроса и не сохраняются в URL.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Secure Form</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

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

🤔 Как использовать useEffect?

useEffect — это хук в React, который позволяет выполнять побочные эффекты в функциональных компонентах, таких как запросы к API или подписки. Он принимает функцию, которая выполняется после рендеринга, и массив зависимостей, определяющий, когда эффект должен обновляться. Если массив зависимостей пуст, эффект выполнится только один раз при монтировании компонента.

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

🤔 Что такое синтаксическая сложность?

Это мера, которая оценивает сложность структуры и конструкции кода. Она часто используется для оценки понятности, поддерживаемости и вероятности ошибок в программном коде. Одним из наиболее известных методов измерения синтаксической сложности является цикломатическая сложность, предложенная Томасом Маккейбом в 1976 году.

🚩Цикломатическая сложность

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

🚩Как рассчитывается цикломатическая сложность

Цикломатическая сложность может быть рассчитана с помощью следующей формулы:

V(G) = E - N + 2P

🚩Пример расчета цикломатической сложности

def example(a, b):
    if a > 0:
        if b > 0:
            return a + b
        else:
            return a - b
    else:
        return b

Цикломатическая сложность V(G) будет

V(G) = E - N + 2P
V(G) = 6 - 5 + 2*1
V(G) = 3

🚩Почему синтаксическая сложность важна

🟠Понимаемость кода
Чем выше сложность, тем труднее понять код. Программы с высокой сложностью требуют больше времени для анализа и понимания.

🟠Поддерживаемость
Код с высокой сложностью сложнее поддерживать и изменять. Это может привести к большему числу ошибок при внесении изменений.

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

🟠Надежность
Программы с низкой сложностью, как правило, более надежны и менее подвержены ошибкам, так как легче понимать и тестировать все возможные сценарии.

🚩Методы уменьшения синтаксической сложности

🟠Рефакторинг
Разделение сложных функций на более простые и малые функции. Использование более простых и понятных конструкций.
🟠Удаление дублированного кода
Вынос повторяющегося кода в отдельные функции или методы.
🟠Использование комментариев и документации
Добавление пояснительных комментариев и документации для сложных участков кода.
🟠Применение паттернов проектирования:
Использование проверенных паттернов проектирования для упрощения и структурирования кода.

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

🤔 Что такое DOM-дерево?

DOM (Document Object Model) — это структура, представляющая HTML-документ в виде дерева объектов.
Каждый элемент, атрибут или текстовый узел страницы представлен как узел дерева, что позволяет программам (например, через JavaScript) взаимодействовать с документом, изменять его содержимое и структуру.
DOM-дерево обеспечивает удобный способ управления элементами веб-страницы динамически.

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

🤔 Что такое симметричная и ассиметричная криптография?

Это два основных подхода к шифрованию данных. Они различаются по способу использования ключей для шифрования и дешифрования.

🚩Симметричная криптография

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

from Crypto.Cipher import AES
from Crypto.Random import get_random_bytes

# Генерация ключа
key = get_random_bytes(16)  # 16 байт = 128 бит

# Создание шифра
cipher = AES.new(key, AES.MODE_EAX)

# Шифрование данных
data = b'Secret message'
nonce = cipher.nonce
ciphertext, tag = cipher.encrypt_and_digest(data)

print(f'Ciphertext: {ciphertext}')

# Дешифрование данных
cipher = AES.new(key, AES.MODE_EAX, nonce=nonce)
plaintext = cipher.decrypt_and_verify(ciphertext, tag)

print(f'Plaintext: {plaintext}')

🚩Асимметричная криптография

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

from cryptography.hazmat.primitives.asymmetric import rsa
from cryptography.hazmat.primitives import serialization
from cryptography.hazmat.primitives.asymmetric import padding
from cryptography.hazmat.primitives import hashes

# Генерация пары ключей
private_key = rsa.generate_private_key(
    public_exponent=65537,
    key_size=2048,
)

public_key = private_key.public_key()

# Шифрование данных
message = b'Secret message'
ciphertext = public_key.encrypt(
    message,
    padding.OAEP(
        mgf=padding.MGF1(algorithm=hashes.SHA256()),
        algorithm=hashes.SHA256(),
        label=None
    )
)

print(f'Ciphertext: {ciphertext}')

# Дешифрование данных
plaintext = private_key.decrypt(
    ciphertext,
    padding.OAEP(
        mgf=padding.MGF1(algorithm=hashes.SHA256()),
        algorithm=hashes.SHA256(),
        label=None
    )
)

print(f'Plaintext: {plaintext}')

🚩Сравнение симметричной и асимметричной криптографии

🟠Ключи
Симметричная: Один ключ для шифрования и дешифрования.
Асимметричная: Пара ключей — открытый для шифрования и закрытый для дешифрования.

🟠Безопасность
Симметричная: Требует безопасной передачи ключа, что может быть сложно.
Асимметричная: Обеспечивает безопасную передачу ключей через использование открытого ключа.

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

🤔 Как оцениваешь трудность?

Трудность задачи оценивается на основе её объёма, сложности требований, уровня неопределённости и необходимых навыков.
Также учитываются сроки выполнения, доступные ресурсы и возможные риски.
Точный уровень определяется в зависимости от контекста и опыта команды или разработчика.

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

🤔 Что такое di?

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

🚩Принципы

🟠Инверсия управления (Inversion of Control, IoC)
Принцип, согласно которому объект делегирует управление своими зависимостями внешнему источнику.

🟠Внедрение зависимостей (Dependency Injection)
Конкретная реализация инверсии управления, при которой зависимости передаются объекту через конструктор, методы или свойства.

🚩Способы внедрения зависимостей

🟠Внедрение через конструктор
Зависимости передаются объекту через параметры его конструктора. Пример на Java:

public class Service {
private final Repository repository;

public Service(Repository repository) {
this.repository = repository;
}

public void performAction() {
repository.doSomething();
}
}

🟠Внедрение через сеттеры
Зависимости передаются объекту через методы-сеттеры после его создания. Пример на Java:

public class Service {
private Repository repository;

public void setRepository(Repository repository) {
this.repository = repository;
}

public void performAction() {
repository.doSomething();
}
}

🟠Внедрение через интерфейсы
Зависимости передаются объекту через методы, определённые в интерфейсах. Пример на TypeScript:

interface IRepository {
doSomething(): void;
}

class Repository implements IRepository {
doSomething() {
console.log("Doing something...");
}
}

class Service {
private repository: IRepository;

constructor(repository: IRepository) {
this.repository = repository;
}

performAction() {
this.repository.doSomething();
}
}

const repository = new Repository();
const service = new Service(repository);
service.performAction();

🚩Плюсы

➕Улучшение тестируемости
Код становится более модульным и тестируемым, так как зависимости можно легко заменять на моки или стабы в тестах.

➕Улучшение поддерживаемости
Уменьшается связность кода, что упрощает его поддержку и модификацию.

➕Улучшение гибкости
Легче менять реализации зависимостей, не изменяя код, который их использует.

➕Явное указание зависимостей
Зависимости объектов становятся явными, что улучшает понимание кода.

🚩Минусы

➖Усложнение кода
Внедрение DI может усложнить код, особенно если используется слишком много уровней абстракции.
➖Кривая обучения
Понимание и правильное использование DI может потребовать времени и обучения, особенно для разработчиков, незнакомых с паттерном.
➖Перегрузка конструкции
При внедрении большого числа зависимостей через конструктор конструктор может стать перегруженным.

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

🤔 Что такое promise и какие состояния у него есть?

Promise в JavaScript — это объект, который представляет результат асинхронной операции. Он может находиться в одном из трёх состояний: pending (ожидание), fulfilled (выполнено) и rejected (отклонено). Fulfilled означает, что операция завершилась успешно, а rejected — что произошла ошибка. Это удобный способ работы с асинхронным кодом и упрощает обработку результатов таких операций.

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

🤔 Что такое инверсия управления?

Это принцип программирования, который передает управление выполнением программы из рук разработчика в руки фреймворка или контейнера. IoC позволяет создавать более гибкие, расширяемые и тестируемые приложения за счет отделения бизнес-логики от деталей инфраструктуры.

🚩Идеи инверсии управления

🟠Отделение логики приложения от деталей реализации
В традиционном подходе компоненты создают и управляют своими зависимостями напрямую. С IoC компоненты делегируют эту ответственность внешней системе.

🟠Улучшение модульности и повторного использования
Компоненты становятся более независимыми и легко заменяемыми, что способствует повторному использованию и тестируемости.

🚩Реализация

IoC может быть реализована несколькими способами, в том числе через Dependency Injection (внедрение зависимостей) и Service Locator (локатор служб).

🟠Dependency Injection (DI)
Это наиболее распространенный способ реализации IoC, где зависимости объекта передаются ему извне, а не создаются внутри. Пример на Java с использованием Spring. В этом примере Spring фреймворк автоматически внедряет зависимость Repository в Service через конструктор.

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Component
public class Service {

    private final Repository repository;

    @Autowired
    public Service(Repository repository) {
        this.repository = repository;
    }

    public void performAction() {
        repository.doSomething();
    }
}

🟠Service Locator
Это шаблон проектирования, который предоставляет центральное место для получения зависимостей. Компоненты запрашивают зависимости у локатора служб, вместо того чтобы создавать их напрямую. Пример на Java:

public class ServiceLocator {

    private static final Map<Class<?>, Object> services = new HashMap<>();

    public static <T> void registerService(Class<T> serviceClass, T service) {
        services.put(serviceClass, service);
    }

    public static <T> T getService(Class<T> serviceClass) {
        return serviceClass.cast(services.get(serviceClass));
    }
}

// Использование Service Locator
ServiceLocator.registerService(Repository.class, new RepositoryImpl());

Repository repository = ServiceLocator.getService(Repository.class);
repository.doSomething();

🚩Плюсы

➕Улучшение тестируемости
IoC позволяет легко заменять реальные зависимости на моки или стабы в тестах.

➕Уменьшение связности кода
Компоненты становятся менее зависимыми друг от друга, что упрощает их замену и модификацию.

➕Повышение гибкости и расширяемости
Легко добавлять новые зависимости или изменять существующие без изменения кода, использующего эти зависимости.

➕Явное управление зависимостями
Зависимости становятся явными, что улучшает понимание и документирование системы.

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

🤔Различие методов call apply bind?

Методы `call` и `apply` выполняют функцию с заданным контекстом `this`, но `call` принимает аргументы по отдельности, а `apply` — в виде массива. Метод `bind` возвращает новую функцию с предустановленным значением `this`, которую можно вызвать позже. В отличие от `call` и `apply`, `bind` не вызывает функцию немедленно. `bind` часто используется для создания копий функций с привязкой контекста.

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

🤔 В каких случаях однопоточность лучше многопоточности?

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

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

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

🟠Ограниченные ресурсы
В некоторых системах ресурсы, такие как память и процессорное время, ограничены. Однопоточные приложения потребляют меньше ресурсов, так как они не требуют создания и управления несколькими потоками. Встроенные системы и устройства с ограниченными вычислительными ресурсами. Простые IoT устройства, где использование многопоточности может быть излишним.

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

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

🚩Примеры в реальной жизни

🟠Однопоточное веб-приложение на Node.js
Node.js использует однопоточную модель с событиями и обратными вызовами для обработки запросов. Благодаря асинхронной модели ввода-вывода, Node.js может эффективно обрабатывать большое количество одновременных соединений, не создавая новые потоки для каждого запроса.

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, world!\n');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

🟠Однопоточное приложение на Python
Для простых задач, таких как чтение и обработка файла, однопоточность может быть вполне достаточной и проще в реализации.

def process_file(file_path):
    with open(file_path, 'r') as file:
        data = file.read()
        # Обработка данных
        print(data)

if __name__ == '__main__':
    process_file('example.txt')

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

🤔 Что такое dom дерево?

DOM (Document Object Model) — это иерархическая структура, представляющая HTML-документ в виде дерева объектов. Каждый элемент страницы (тег, атрибут, текст) представлен как узел, что позволяет программно изменять структуру, стиль и содержимое документа. DOM — ключевая технология для работы с веб-страницами.

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

🤔 Для чего нужен централизованный режим событий?

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

🚩Плюсы

➕Упрощение управления событиями
➕Повышение поддерживаемости
➕Масштабируемость
➕Избежание дублирования кода
➕Лучшая организация взаимодействия между компонентами

🚩Примеры централизованного режима событий:

🟠Vue.js и Vuex
В приложениях, использующих Vue.js, централизованное управление состоянием и событиями часто реализуется с помощью Vuex. Vuex позволяет управлять состоянием приложения и событиями в одном месте.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message);
    }
  }
});

// Component.vue
<template>
  <div>
    <input v-model="message" @input="updateMessage(message)">
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['updateMessage'])
  }
};
</script>

🟠Redux в React
Это библиотека для управления состоянием в приложениях React, которая также предоставляет централизованный механизм для управления событиями и состоянием.

// actions.js
export const setMessage = message => ({
  type: 'SET_MESSAGE',
  payload: message
});

// reducer.js
const initialState = {
  message: ''
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_MESSAGE':
      return {
        ...state,
        message: action.payload
      };
    default:
      return state;
  }
};

export default reducer;

// store.js
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

// Component.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setMessage } from './actions';

const Component = () => {
  const message = useSelector(state => state.message);
  const dispatch = useDispatch();

  const handleChange = (event) => {
    dispatch(setMessage(event.target.value));
  };

  return (
    <div>
      <input value={message} onChange={handleChange} />
      <p>{message}</p>
    </div>
  );
};

export default Component;

🟠EventEmitter в Node.js
В Node.js можно использовать EventEmitter для централизованного управления событиями.

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();

// Обработчик события
myEmitter.on('event', (message) => {
  console.log('Received:', message);
});

// Генерация события
myEmitter.emit('event', 'Hello, World!');

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

🤔 Что такое rest api?

REST API — это архитектурный стиль взаимодействия между системами, основанный на протоколе HTTP. Он использует стандартные методы, такие как GET, POST, PUT и DELETE, для работы с ресурсами, представляемыми в виде URL. REST API обеспечивает простую и гибкую интеграцию между клиентом и сервером.

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

🤔 Что такое wrapper компонента?

Это компонент-обертка, который используется для обертывания других компонентов, предоставляя им дополнительные возможности или изменяя их поведение без изменения их исходного кода. Wrapper-компоненты часто используются в React для повторного использования логики, управления состоянием, стилизации и других целей.

🚩Задачи

🟠Повторное использование логики
Обертка может инкапсулировать общую логику, которая должна быть доступна нескольким компонентам.

🟠Добавление функциональности
Wrapper-компоненты могут добавлять новые функциональные возможности к обернутым компонентам.

🟠Стилизация
Обертка может использоваться для применения стилей к компонентам или для организации их в определенной структуре.

🟠Управление состоянием
Wrapper-компоненты могут управлять состоянием, которое затем передается обернутым компонентам через пропсы.

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

🟠Простая обертка для стилизации
Рассмотрим пример, где мы создаем обертку для применения стилей к любому компоненту.

import React from 'react';

// Wrapper-компонент для стилизации
const StyledWrapper = (props) => {
  const style = {
    border: '1px solid black',
    padding: '10px',
    margin: '10px'
  };

  return <div style={style}>{props.children}</div>;
};

// Компонент для обертки
const Content = () => {
  return <p>This is some content inside a styled wrapper.</p>;
};

// Использование Wrapper-компонента
const App = () => {
  return (
    <StyledWrapper>
      <Content />
    </StyledWrapper>
  );
};

export default App;

🟠Wrapper-компонент для управления состоянием
Рассмотрим пример, где обертка управляет состоянием и передает его обернутому компоненту через пропсы.

import React, { useState } from 'react';

// Wrapper-компонент для управления состоянием
const StateWrapper = (WrappedComponent) => {
  return (props) => {
    const [count, setCount] = useState(0);

    const increment = () => {
      setCount(count + 1);
    };

    return (
      <WrappedComponent count={count} increment={increment} {...props} />
    );
  };
};

// Обычный компонент
const Counter = ({ count, increment }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

// Использование Wrapper-компонента
const EnhancedCounter = StateWrapper(Counter);

const App = () => {
  return <EnhancedCounter />;
};

export default App;

🟠Wrapper-компонент для авторизации
Рассмотрим пример, где обертка проверяет, авторизован ли пользователь, и отображает либо обернутый компонент, либо сообщение о необходимости авторизации.

import React from 'react';

// Wrapper-компонент для проверки авторизации
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = /* логика проверки авторизации */ true;

    if (!isAuthenticated) {
      return <p>Please log in to view this content.</p>;
    }

    return <WrappedComponent {...props} />;
  };
};

// Обычный компонент
const Dashboard = () => {
  return <h1>Welcome to the Dashboard</h1>;
};

// Использование Wrapper-компонента
const ProtectedDashboard = withAuth(Dashboard);

const App = () => {
  return <ProtectedDashboard />;
};

export default App;

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

🤔 Как делается http запрос?

HTTP-запрос состоит из строки запроса (метод, URL, версия протокола), заголовков (метаинформация) и тела (опционально, для передачи данных). Клиент отправляет запрос серверу, который возвращает ответ с кодом состояния, заголовками и телом. Это стандартный механизм обмена данными в веб-приложениях.

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

🤔 В чём разница в работе eventloop на сервере и в браузере?

Это механизм, используемый для обработки и выполнения асинхронных операций. Он позволяет JavaScript выполнять неблокирующие операции, несмотря на то, что JavaScript является однопоточным. Хотя принципы работы Event Loop в браузере и на сервере (например, в Node.js) схожи, есть некоторые важные различия в их реализации и окружении.

🚩Event Loop в браузере

В браузере Event Loop отвечает за обработку событий, выполнение асинхронного кода и обновление пользовательского интерфейса.

🟠DOM и рендеринг
Браузер должен обновлять и перерисовывать пользовательский интерфейс. Это включает в себя обработку изменений в DOM и применение стилей. Рендеринг обычно происходит между итерациями Event Loop.

🟠Очередь макрозадач
Включает такие задачи, как обработка пользовательских событий (нажатие кнопок, ввод текста), setTimeout, setInterval, сетевые запросы (XHR, fetch) и другие. Эти задачи обрабатываются в порядке их поступления.

🟠Очередь микрозадач
Включает такие задачи, как промисы (Promise), MutationObserver. Микрозадачи выполняются перед макрозадачами в рамках одной итерации Event Loop.

🟠UI события
Браузер должен обрабатывать события, связанные с пользовательским интерфейсом, такие как рендеринг и взаимодействие с пользователем.

🚩Event Loop в Node.js

Node.js, как серверная платформа, использует Event Loop для обработки асинхронных операций, таких как I/O, таймеры и сетевые запросы.

🟠Фазы Event Loop
Node.js Event Loop состоит из нескольких фаз, каждая из которых обрабатывает определённые типы задач: timers, I/O callbacks, idle, poll, check, и close callbacks.
🟠Timers
Эта фаза обрабатывает колбэки от setTimeout и setInterval.
🟠I/O callbacks
Обрабатывает почти все колбэки от асинхронных операций ввода-вывода, за исключением close callbacks, таймеров и setImmediate.
🟠Poll
Извлекает новые I/O события; выполняет I/O-колбэки (почти все, за исключением тех, которые закроют сервер); и если ничего не происходит, ждет в этой фазе.
🟠Check
Обрабатывает колбэки от setImmediate.
🟠Close callbacks
Обрабатывает колбэки от закрытия всех I/O операций.
🟠Microtasks (process.nextTick и Promises)
Выполняются после каждой фазы Event Loop, перед переходом к следующей фазе

🚩Различия

🟠Окружение
В браузере Event Loop управляет как асинхронными задачами, так и обновлением пользовательского интерфейса. В Node.js Event Loop больше ориентирован на обработку I/O операций и серверных задач.

🟠Фазы Event Loop
В браузере Event Loop менее детализирован по фазам по сравнению с Node.js. В Node.js Event Loop разделён на более детализированные фазы для обработки различных типов асинхронных задач.

🟠Микрозадачи
И в браузере, и в Node.js микрозадачи выполняются перед макрозадачами, но реализация и использование могут слегка отличаться.

🟠Рендеринг
В браузере Event Loop включает в себя шаги, связанные с рендерингом и обновлением DOM. В Node.js этого аспекта нет, так как он работает на сервере и не имеет дела с рендерингом пользовательского интерфейса.

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

🤔 Что такое методология bem?

BEM (Block, Element, Modifier) — это методология для написания читаемого и структурированного CSS-кода. Блоки представляют независимые компоненты, элементы — их части, а модификаторы — изменения состояния или внешнего вида. BEM помогает упорядочить стили и улучшить масштабируемость кода.

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