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

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

✅Рабочая директория — это текущая папка на локальной машине, где происходит работа с файлами проекта. Она содержит файлы, которые можно редактировать, добавлять или удалять. Изменения в рабочей директории можно зафиксировать в системе контроля версий с помощью команд git add и git commit.

# Добавление изменений в индекс
git add .

# Фиксация изменений с комментарием
git commit -m "Описание изменений"

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

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

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

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Текущее значение: {count}</p>
      {/* Обновление состояния при клике */}
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

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

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

Тег <fieldset> используется для группировки связанных элементов формы, обеспечивая логическую организацию и улучшая доступность. Тег <legend> задает заголовок для содержимого <fieldset>, описывая его назначение и улучшая восприятие пользователями.

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

✔️ Для начала необходимо установить TypeScript глобально или в проекте. Для глобальной установки используется команда:

npm install -g typenoscript

Для установки в проекте:

npm install --save-dev typenoscript

После установки создается файл конфигурации tsconfig.json с помощью команды:

npx tsc --init

Этот файл позволяет настроить компилятор. Например, для указания директории с исходными файлами и директории для выходных файлов:

{
  "compilerOptions": {
    "outDir": "./dist", // Директория для выходных файлов
    "rootDir": "./src"  // Директория с исходными файлами
  }
}

Теперь компиляция TypeScript в JavaScript выполняется командой:

npx tsc

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

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

JWT (JSON Web Token) — это компактный, URL-безопасный способ передачи информации между сторонами в виде JSON-объекта. Он часто используется для аутентификации, где сервер генерирует токен, содержащий закодированную информацию о пользователе, и отправляет его клиенту, который затем прикрепляет этот токен к заголовкам последующих запросов для подтверждения своей личности. Валидация токена на сервере позволяет удостовериться в подлинности пользователя без необходимости хранения сессий на сервере.

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

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

/* Выбирает все элементы с атрибутом data-role */
[data-role] {
  border: 1px solid black;
}

/* Выбирает элементы с атрибутом data-role, значение которого равно "admin" */
[data-role="admin"] {
  background-color: lightblue;
}

/* Выбирает элементы, значение атрибута data-role которых начинается с "user" */
[data-role^="user"] {
  color: green;
}

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

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

🟥 Staging area — это промежуточная область, где изменения в файлах подготавливаются для следующего коммита. Она позволяет контролировать, какие изменения будут включены в коммит, предоставляя возможность добавлять только определённые файлы или их части.

Когда изменения вносятся в рабочую директорию, они сначала попадают в staging area с помощью команды git add. После этого можно создать коммит с помощью git commit, который зафиксирует изменения из staging area в репозитории.

git add file.txt  # Добавление изменений в staging area
git commit -m "Описание изменений"  # Создание коммита

Таким образом, staging area служит буфером между рабочей директорией и историей коммитов, обеспечивая гибкость в управлении изменениями.

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

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

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

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

💥 Для создания выпадающего списка в HTML используется элемент <select>, который содержит несколько элементов <option>. Каждый <option> представляет отдельный пункт списка, который пользователь может выбрать.

<select name="fruits">
  <option value="apple">Apple</option> <!-- Пункт "Apple" -->
  <option value="banana">Banana</option> <!-- Пункт "Banana" -->
  <option value="cherry">Cherry</option> <!-- Пункт "Cherry" -->
</select>

Атрибут name указывает имя списка, а value в <option> задаёт значение, которое будет отправлено на сервер при выборе этого пункта.

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

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

🟥 Метод push используется для добавления одного или нескольких элементов в конец массива. Он изменяет исходный массив и возвращает новую длину массива.

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange', 'mango');

// Массив fruits теперь содержит ['apple', 'banana', 'orange', 'mango']
// newLength равно 4

Метод push полезен, когда необходимо динамически добавлять элементы в массив, сохраняя порядок добавления. Это один из наиболее часто используемых методов для работы с массивами в JavaScript.

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

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

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

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

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

git status

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

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

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

Лучшие практики включают использование семантических тегов, таких как `<header>`, `<nav>`, `<article>`, и `<footer>`, чтобы улучшить структуру страницы и помочь поисковым системам понять контент. Также важно оптимизировать мета-теги, включая `<noscript>` и `<meta denoscription>`, чтобы обеспечить релевантность и привлекательность для пользователей и поисковых систем.

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

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

import React, { useContext } from 'react';

// Создание контекста
const ThemeContext = React.createContext('light');

function ThemedComponent() {
    // Получение текущего значения контекста
    const theme = useContext(ThemeContext);

    // Использование значения контекста
    return <div>Current theme: {theme}</div>;
}

В этом примере useContext извлекает значение темы из ThemeContext, что позволяет компоненту использовать его напрямую.

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

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

⏩ Приведение типов — это процесс преобразования значения одного типа в другой. Существует два вида приведения: неявное и явное. Неявное приведение происходит автоматически, когда компилятор преобразует типы без явного указания. Явное приведение требует явного указания программистом.

const value: any = "123";
const num: number = Number(value); // Явное приведение строки к числу

const str: string = num.toString(); // Явное приведение числа к строке

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

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

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

👉 Передача данных между компонентами осуществляется с помощью props и событий. Props позволяют передавать данные от родительского компонента к дочернему. Для передачи данных от дочернего компонента к родительскому используются события.

// Родительский компонент
<ChildComponent :message="parentMessage" @update="handleUpdate" />

// Дочерний компонент
props: ['message'],
methods: {
  sendUpdate() {
    this.$emit('update', 'новое сообщение'); // Отправка события с данными
  }
}

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

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

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

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

Тег <img> используется для вставки изображений на веб-страницы. Основные атрибуты включают src для указания источника изображения, alt для предоставления текстового описания на случай, если изображение не загрузится, и width и height для задания размеров изображения.

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

✅Для проверки, является ли значение конечным числом, используется функция isFinite(). Она возвращает true, если переданное значение является конечным числом, и false в противном случае.

isFinite(25); // true, так как 25 — конечное число
isFinite(Infinity); // false, так как Infinity — не конечное число
isFinite("123"); // true, строка "123" преобразуется в число 123
isFinite("abc"); // false, строка "abc" не может быть преобразована в число

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

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

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

Историю коммитов можно просмотреть с помощью команды git log, которая выводит список всех коммитов в репозитории с их хешами, авторами и сообщениями. Для более компактного отображения истории можно использовать git log --oneline, показывающую каждый коммит в одну строку.

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