🔴Деструктуризация — это синтаксис, позволяющий извлекать данные из массивов или объектов в отдельные переменные. Упрощает работу с данными, делая код более читаемым.

Для массивов:

const numbers = [1, 2, 3];
const [first, second] = numbers;
// first = 1, second = 2

Элементы массива присваиваются переменным по порядку.

Для объектов:

const user = { name: 'Alice', age: 25 };
const { name, age } = user;
// name = 'Alice', age = 25

Имена переменных должны совпадать с ключами объекта. Можно использовать псевдонимы:

const { name: userName, age: userAge } = user;
// userName = 'Alice', userAge = 25

Деструктуризация часто используется для извлечения значений из параметров функций или возвращаемых данных.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

➡️ Использование TypeScript с React повышает надежность и поддерживаемость кода за счет статической типизации. Основные преимущества:

1. Типизация пропсов и состояния
Позволяет явно указать типы для пропсов и состояния компонентов, что уменьшает вероятность ошибок.

interface Props {
   name: string;
   age: number;
}
const User: React.FC<Props> = ({ name, age }) => <div>{name}, {age}</div>;

2. Автодополнение и подсказки
Редакторы кода предоставляют автодополнение и подсказки, что ускоряет разработку и уменьшает количество опечаток.

3. Раннее обнаружение ошибок
Ошибки типов выявляются на этапе компиляции, что снижает вероятность багов в рантайме.

4. Улучшение читаемости кода
Типы делают код более понятным, особенно в больших проектах или при работе в команде.

5. Интеграция с экосистемой React
TypeScript поддерживает типы для хуков, контекста и других фич React, что упрощает их использование.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

⏩ В HTML формах атрибуты action и method определяют, как данные будут отправлены на сервер.

action
Указывает URL, на который отправляются данные формы. Это может быть путь к серверному скрипту, который обрабатывает данные.

<form action="/submit-form" method="post">

В данном случае данные формы будут отправлены на /submit-form.

method
Определяет HTTP-метод, используемый для отправки данных. Основные значения:
- GET: Данные добавляются в URL как параметры запроса. Подходит для нечувствительных данных.
- POST: Данные отправляются в теле запроса. Используется для отправки конфиденциальной информации или больших объемов данных.

<form action="/search" method="get">

Здесь данные формы будут отправлены методом GET, и их можно увидеть в адресной строке.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

CSS-спрайты — это метод объединения нескольких изображений в один файл для уменьшения количества HTTP-запросов и ускорения загрузки страницы. Для отображения нужного изображения используется свойство background-position, которое смещает фоновое изображение в нужную позицию.

✈️ Frontend собеседования

👉 Объединение нескольких массивов можно выполнить с помощью метода concat или оператора расширения (...). Оба способа создают новый массив, содержащий элементы исходных массивов.

Использование concat:
Метод concat объединяет массивы, возвращая новый массив.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2); // [1, 2, 3, 4]

Использование оператора расширения:
Оператор ... позволяет объединить массивы в более компактной форме.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]

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

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Свойство z-index определяет порядок наложения элементов на веб-странице по оси Z, где элементы с большим значением z-index отображаются поверх элементов с меньшим значением. Оно работает только для элементов с позиционированием, отличным от static (например, relative, absolute, fixed).

✈️ Frontend собеседования

👉 Для переименования ветки в Git используется команда git branch -m. Если ветка находится локально, выполняется следующая команда:

git branch -m old-branch-name new-branch-name

Если требуется переименовать текущую ветку, можно опустить старое имя:

git branch -m new-branch-name

Для переименования ветки на удаленном репозитории сначала удаляется старая ветка и затем пушится новая:

git push origin --delete old-branch-name
git push origin new-branch-name

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Для встраивания аудио на HTML-страницу используется тег <audio>. Этот тег позволяет воспроизводить аудиофайлы непосредственно в браузере.

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

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает элемент <code>audio</code>.
</audio>

Атрибут controls добавляет элементы управления воспроизведением, такие как кнопки воспроизведения и паузы. Внутри тега <audio> можно использовать несколько <source> для указания разных форматов аудио, обеспечивая кроссбраузерную совместимость.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Utility types в TypeScript, такие как Omit, Pick и Partial, предоставляют удобные способы для манипуляции типами. Omit удаляет указанные свойства из типа, Pick выбирает только указанные свойства, а Partial делает все свойства типа необязательными.

✈️ Frontend собеседования

➡️ Для вывода информации в консоль используется метод console.log(). Этот метод принимает любое количество аргументов и выводит их в консоль. Также доступны другие методы, такие как console.error(), console.warn() и console.info(), которые используются для вывода сообщений об ошибках, предупреждений и информационных сообщений соответственно.

console.log("Это обычное сообщение"); // Выводит сообщение в консоль
console.error("Это сообщение об ошибке"); // Выводит сообщение об ошибке
console.warn("Это предупреждение"); // Выводит предупреждение
console.info("Это информационное сообщение"); // Выводит информационное сообщение

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔘CSS-переменные (кастомные свойства) позволяют хранить значения, которые можно повторно использовать в стилях. Они объявляются с помощью синтаксиса --имя-переменной и используются через функцию var().

:root {
  --primary-color: blue; /* Объявление переменной */
}

.element {
  color: var(--primary-color); /* Использование переменной */
}

Переменные можно переопределять для конкретных элементов или медиа-запросов, что делает их гибкими для управления стилями.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Жизненный цикл компонента Vue состоит из этапов инициализации, монтирования, обновления и уничтожения. На каждом этапе вызываются соответствующие хуки, такие как created, mounted, updated и destroyed, которые позволяют выполнять код в определённые моменты жизни компонента.

✈️ Frontend собеседования

▶️ Хук useRef используется для создания изменяемого объекта, который сохраняет своё значение между рендерами компонента. Он часто применяется для доступа к DOM-элементам или хранения значений, которые не должны вызывать повторный рендер при изменении.

const inputRef = useRef(null); // Создание ref

useEffect(() => {
  inputRef.current.focus(); // Доступ к DOM-элементу
}, []);

return <input ref={inputRef} />; // Привязка ref к элементу

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

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

⏩ Вложенные списки создаются путём размещения одного списка внутри элемента другого списка. Для маркированных списков используется тег <ul>, для нумерованных — <ol>, а элементы списка определяются тегом <li>.

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент
    <ul>
      <li>Вложенный элемент 1</li>
      <li>Вложенный элемент 2</li>
    </ul>
  </li>
  <li>Третий элемент</li>
</ul>

Таким образом, можно создавать многоуровневые структуры списков.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Декораторы в TypeScript — это специальные функции, которые добавляют метаданные или изменяют поведение классов, методов, свойств или параметров. Они часто применяются для реализации аспектно-ориентированного программирования, например, для логирования, валидации или управления зависимостями.

✈️ Frontend собеседования

🟣Текущую дату и время можно получить с помощью объекта Date. При создании экземпляра без аргументов он автоматически инициализируется текущими датой и временем.

const now = new Date(); // Создание объекта с текущей датой и временем
console.log(now); // Вывод текущей даты и времени

Для форматирования даты и времени можно использовать методы объекта Date, такие как toLocaleString(), getHours(), getMinutes() и другие.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🟢Условный рендеринг позволяет отображать элементы интерфейса в зависимости от определённых условий. Для этого используются директивы v-if, v-else-if и v-else, которые управляют видимостью элементов на основе значения выражения.

<div v-if="isVisible">Элемент виден</div>
<div v-else>Элемент скрыт</div>

Также доступна директива v-show, которая скрывает элемент через CSS, если условие ложно, но не удаляет его из DOM.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Маршрутизация в React позволяет управлять отображением компонентов в зависимости от URL. Для этого используется библиотека react-router-dom, которая предоставляет компоненты BrowserRouter, Route, Switch и Link для настройки маршрутов и навигации.

✈️ Frontend собеседования

Переходы (transition) в CSS позволяют плавно изменять значения свойств элемента при смене состояния, например, при наведении. Трансформации (transform) применяются для изменения положения, размера или формы элемента, включая перемещение, масштабирование и вращение.

.element {
  transition: opacity 0.5s ease; /* Плавное изменение opacity */
  transform: rotate(45deg); /* Вращение элемента на 45 градусов */
}

Переходы и трансформации часто используются вместе для создания анимаций и интерактивных эффектов.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

# После конфликта Git помечает конфликтующие участки в файле
<<<<<<< HEAD
изменение из текущей ветки
=======
изменение из ветки для слияния
>>>>>>> branch-name

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

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Многострочное текстовое поле создаётся с помощью тега <textarea>. Этот элемент позволяет пользователю вводить текст, а атрибуты rows и cols задают размеры поля.

✈️ Frontend собеседования