Frontend | Вопросы собесов

🤔 Что такое макро и микро задачи? Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Ставь 👍 если знал ответ

🤔 Что не стоит писать в методе render? Метод render должен быть чистым и идемпотентным. Это означает, что он должен только возвращать JSX для рендеринга и не выполнять побочные эффекты, такие как изменения состояния, запросы к серверу, дорогостоящие вычисления или манипуляции с DOM. Для этих целей следует использовать хуки (например, useEffect) или методы жизненного цикла классовых компонентов.

Какие методы http запросов знаешь ? Спросят с вероятностью 7% HTTP (HyperText Transfer Protocol) поддерживает множество методов запросов, каждый из которых предназначен для выполнения определенных действий на сервере. Вот основные методы HTTP-запросов, которые широко используются: 1️⃣GET Описание: Запрашивает данные с сервера. Особенности: ✅Не изменяет состояние сервера (идемпотентный). ✅Параметры запроса передаются в URL. ✅Кэшируется. ✅Можно сохранить в закладках браузера.

GET /api/users?id=123 HTTP/1.1
Host: www.example.com

2️⃣POST Описание: Отправляет данные на сервер для создания ресурса или выполнения действия. Особенности: ✅Изменяет состояние сервера. ✅Данные передаются в теле запроса. ✅Не кэшируется по умолчанию.

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

{
  "name": "John Doe",
  "email": "[email protected]"
}

3️⃣PUT Описание: Отправляет данные на сервер для создания или замены ресурса. Особенности: ✅Идемпотентный. ✅Данные передаются в теле запроса.

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

{
  "name": "John Doe",
  "email": "[email protected]"
}

4️⃣DELETE Описание: Удаляет ресурс на сервере. Особенности: ✅Идемпотентный.

DELETE /api/users/123 HTTP/1.1
Host: www.example.com

5️⃣PATCH Описание: Частично обновляет ресурс на сервере. Особенности: ✅Не является идемпотентным, хотя в некоторых случаях может быть. ✅Данные передаются в теле запроса.

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

{
  "email": "[email protected]"
}

6️⃣HEAD Описание: Запрашивает только заголовки ресурса, без тела. Особенности: ✅Идемпотентный. ✅Используется для проверки наличия ресурса, размера, даты последнего изменения и т.д.

HEAD /api/users/123 HTTP/1.1
Host: www.example.com

7️⃣OPTIONS Описание: Запрашивает поддерживаемые сервером методы для указанного ресурса. Особенности: ✅Идемпотентный. ✅Используется для CORS-запросов, чтобы определить разрешенные методы и заголовки.

OPTIONS /api/users HTTP/1.1
Host: www.example.com

8️⃣CONNECT Описание: Устанавливает туннель к серверу, обычно используется для прокси-серверов. Особенности: ✅Не используется в обычных RESTful API.

CONNECT www.example.com:443 HTTP/1.1
Host: www.example.com

9️⃣TRACE Описание: Выполняет запрос по пути до целевого ресурса, возвращая запрос в ответе. Особенности: ✅Используется для диагностики или отладки.

TRACE /api/users HTTP/1.1
Host: www.example.com

Резюме ✅GET: Запрашивает данные, не изменяет состояние сервера. ✅POST: Отправляет данные для создания ресурса, изменяет состояние сервера. ✅PUT: Создает или заменяет ресурс, идемпотентный. ✅DELETE: Удаляет ресурс, идемпотентный. ✅PATCH: Частично обновляет ресурс. ✅HEAD: Запрашивает заголовки ресурса, без тела. ✅OPTIONS: Запрашивает поддерживаемые методы для ресурса. ✅CONNECT: Устанавливает туннель к серверу. ✅TRACE: Выполняет запрос по пути до целевого ресурса для диагностики. Методы HTTP-запросов включают GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, CONNECT и TRACE. Каждый метод используется для различных типов операций: получения данных, отправки данных, обновления, удаления и диагностики. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

В чем различие между строчными и блочными элементами ? Спросят с вероятностью 7% Различие между строчными (inline) и блочными (block) элементами заключается в их поведении на странице, а именно в том, как они занимают пространство и взаимодействуют с другими элементами. Блочные элементы (Block Elements) Основные характеристики: 1️⃣Занимают всю доступную ширину: ✅Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину контейнера, в котором он находится, по умолчанию. 2️⃣Можно задавать размеры: ✅Для блочных элементов можно задавать ширину (width), высоту (height), внутренние отступы (padding), внешние отступы (margin). 3️⃣Вложенные элементы: ✅Блочные элементы могут содержать другие блочные и строчные элементы. ✅<div> ✅<p> ✅<h1>, <h2>, ..., <h6> ✅<ul>, <ol>, <li> ✅<header>, <footer>, <section>, <article> Пример:

<div style="background-color: lightblue;">
  Это блочный элемент.
</div>
<p style="background-color: lightgreen;">
  Это тоже блочный элемент.
</p>

Строчные элементы (Inline Elements) Основные характеристики: 1️⃣Не занимают всю ширину: ✅Строчные элементы не начинаются с новой строки и занимают только необходимое для их содержимого пространство. Они располагаются рядом с другими строчными элементами на одной строке. 2️⃣Размеры и отступы: ✅Для строчных элементов нельзя задавать ширину и высоту. Внутренние отступы (padding) и внешние отступы (margin) применяются только по горизонтали, вертикальные отступы не изменяют размер строчного элемента, но могут влиять на расстояние между элементами. 3️⃣Только строчные вложенные элементы: ✅Внутрь строчных элементов можно вкладывать только другие строчные элементы. Примеры строчных элементов: ✅<span> ✅<a> ✅<img> ✅<strong> ✅<em> ✅<input> Пример:

<span style="background-color: lightcoral;">
  Это строчный элемент.
</span>
<a href="#" style="background-color: lightgoldenrodyellow;">
  Это тоже строчный элемент.
</a>

Сравнение элементов 1️⃣Размещение на странице: ✅Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину. ✅Строчные элементы размещаются в строку с другими строчными элементами и занимают только необходимое пространство. 2️⃣Вложенность: ✅Блочные элементы могут содержать как блочные, так и строчные элементы. ✅Строчные элементы могут содержать только строчные элементы. 3️⃣Размеры и отступы: ✅Для блочных элементов можно задавать любые размеры и отступы. ✅Для строчных элементов можно задавать только горизонтальные отступы, ширину и высоту задавать нельзя. Блочные элементы:

<div>
  <h1>Заголовок</h1>
  <p>Параграф текста внутри блочного элемента.</p>
</div>

Строчные элементы:

<p>
  Этот текст содержит <a href="#">ссылку</a> и <strong>жирный текст</strong>, которые являются строчными элементами.
</p>

✅Блочные элементы занимают всю ширину контейнера, начинаются с новой строки и могут содержать любые другие элементы. ✅Строчные элементы занимают только необходимое пространство, располагаются в одной строке с другими строчными элементами и могут содержать только другие строчные элементы. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Что такое слоты ? Спросят с вероятностью 7% Слоты — это механизм, используемый во фронтенд-разработке, особенно в компонентах, для предоставления гибких способов вставки содержимого в компоненты. Слоты позволяют передавать HTML-контент в компоненты и определять, где этот контент должен быть отрендерен. Они особенно полезны в библиотеке Vue.js, а также в других современных фреймворках, таких как Svelte. Vue.js Слоты используются для создания динамических и гибких компонентов. 1️⃣Базовый слот: ✅Позволяет вставлять произвольное содержимое в компонент.

<!-- Родительский компонент -->
<my-component>
  <p>Это вставленное содержимое!</p>
</my-component>

<!-- Дочерний компонент -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

2️⃣Именованные слоты: ✅Позволяют вставлять содержимое в конкретные места внутри компонента.

<!-- Родительский компонент -->
<my-component>
  <template v-slot:header>
    <h1>Заголовок</h1>
  </template>
  <template v-slot:footer>
    <p>Подвал</p>
  </template>
</my-component>

<!-- Дочерний компонент -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- Слот по умолчанию -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

3️⃣Слоты с областью видимости (Scoped Slots): ✅Позволяют передавать данные из дочернего компонента в родительский через слот.

<!-- Родительский компонент -->
<my-component>
  <template v-slot:default="slotProps">
    <p>{{ slotProps.message }}</p>
  </template>
</my-component>

<!-- Дочерний компонент -->
<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Привет из дочернего компонента!',
    };
  },
};
</script>

Преимущества 1️⃣Гибкость: ✅Слоты позволяют создавать более гибкие и многоразовые компоненты, которые можно адаптировать под различные контексты использования. 2️⃣Повторное использование: ✅Компоненты со слотами можно легко переиспользовать в различных частях приложения с разным содержимым. 3️⃣Читаемость и структурирование кода: ✅Использование слотов помогает лучше структурировать код, разделяя шаблоны компонентов и их содержимое. 4️⃣Поддержка различных сценариев рендеринга: ✅Слоты позволяют легко поддерживать различные сценарии рендеринга, такие как именованные и scoped слоты, что делает компоненты более мощными и универсальными. Svelte В нем слоты также используются для вставки содержимого в компоненты.

<!-- Родительский компонент -->
<ChildComponent>
  <p>Это вставленное содержимое!</p>
</ChildComponent>

<!-- Дочерний компонент (ChildComponent.svelte) -->
<script>
  export let name;
</script>

<slot></slot>

Слоты — это механизм для вставки контента в компоненты, который делает компоненты гибкими и многоразовыми. Они позволяют определять, где именно внутри компонента должно быть размещено передаваемое содержимое. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Привет! Хочешь научиться хорошо и быстро разрабатывать крутые сайты и проекты? Тогда канал «Будни разработчика» для тебя! Подпишись, и узнаешь: ➕ как влиться во фронтенд ➕ как организовать работу ➕ как писать хороший код Ждём! ⬇️