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

🤔 Зачем нужен 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 следует использовать для случаев, которые не могут быть решены этим способом. Ставь 👍 и забирай 📚 Базу знаний

Современная магистратура от Центрального университета Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой? Поступай в магистратуру Центрального университета! - 4 офлайн программы по востребованным направлениям ИТ - Онлайн-программа по машинному обучению - 300 мест с грантами до 1,2 млн руб. - Вечерние занятия и учеба по выходным — удобно совмещать с работой - Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса - Возможность стажировок и трудоустройства в ведущих компаниях - Государственный диплом за 2 года Магистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии. Оставляй заявку на грант уже сейчас! Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе

🤔 Пример архитектурных решений для проектов на Node.js? - Layered architecture — с разделением на controller, service, repository; - Hexagonal architecture — с портами/адаптерами; - Microservices с gRPC/REST; - GraphQL gateway с Apollo; - Event-driven через Kafka/RabbitMQ; - Serverless архитектура (AWS Lambda, Firebase Functions). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем em отличается от rem? 🟠Как работает `em`? em зависит от размера шрифта родителя (font-size).

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

.grandchild {
  font-size: 2em; /* 2 * 30px = 60px */
}

🟠Как работает `rem`? rem всегда зависит от font-size у <html>.

html {
  font-size: 16px;
}

.container {
  font-size: 2rem; /* 2 * 16px = 32px */
}

🟠Когда использовать `em`, а когда `rem`? Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми Используйте em, если хотите, чтобы элементы зависели от родителя Ставь 👍 и забирай 📚 Базу знаний

Получи грант на обучение в Центральном университете Прояви себя, получи грант до 2,8 млн на обучение ИТ и бизнесу в вузе. Для школьников 10-х и 11-х классов, СПО. Подать заявку #реклама apply.centraluniversity.ru О рекламодателе

🤔 С помощью чего можно создать асинхронные callback? Асинхронные callback можно создать через: 1. Промисы — основной способ в современных браузерах: 2. fetch('/api').then(response => callback(response)); 3. async/await — оборачиваем функцию в async, а внутри можно использовать await: 4. const callback = async () => { 5. const result = await fetch(...); 6. // обработка 7. }; 8. Таймеры и события — классические способы: 9. setTimeout(() => callback(), 1000); 10. element.addEventListener('click', () => callback()); Callback вызывается по завершении асинхронной операции, и важно учитывать задержку выполнения (event loop). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Получайте больше продаж из поиска Яндекса Анализируйте метрики и получайте рекомендации для роста продаж в Яндекс Товарах ⚡ Попробовать #реклама merchants.yandex.ru О рекламодателе

🤔 Что такое относительная ссылка? Это ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки). Относительная ссылка

<a href="../contact.html">Контакты</a>

Абсолютная ссылка

<a href="https://example.com/contact.html">Контакты</a>

🚩Типы относительных ссылок 🟠Простые относительные ссылки Указывают путь к ресурсу, который находится в текущем каталоге или подкаталоге.

<a href="page.html">Страница</a> <!-- Ресурс в текущем каталоге -->

🟠Ссылки с подъемом вверх по дереву файловой структуры Используются два символа точки (..) для перехода на уровень выше.

   <a href="../folder/page.html">Страница</a> <!-- Подъем на один уровень вверх -->
   

🟠Корневые ссылки Указывают путь относительно корня веб-сайта, начиная с /.

<a href="/images/photo.jpg">Фото</a> <!-- Начало пути от корня сайта -->

🚩Зачем нужны относительные ссылки? 🟠Удобство при локальной разработке Относительные ссылки работают независимо от домена. Если вы разрабатываете сайт локально (например, через localhost), вам не нужно указывать абсолютный путь с доменом. 🟠Проще поддерживать сайт Если домен или структура сайта меняется, относительные ссылки автоматически адаптируются, если структура каталогов остается прежней. 🟠Экономия времени Меньше текста в коде, особенно если проект содержит множество ссылок. 🚩Примеры использования относительных ссылок Ссылка на файл в текущей папке

<a href="file.html">Файл в текущей папке</a>

Ссылка на файл в подкаталоге

<a href="subfolder/file.html">Файл в подкаталоге</a>

Ссылка на файл в родительской папке

<a href="../file.html">Файл в родительской папке</a>

Ссылка на файл относительно корня сайта

<a href="/folder/file.html">Файл в папке от корня</a>

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

Бесплатный курс по дизайну в FIGMA Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Что такое операторы or и and? Это логические операторы, которые используются для проверки условий: - or (||) — возвращает true, если хотя бы одно из условий истинно. - and (&&) — возвращает true, только если все условия истинны. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что выбираешь ооп или функции? Выбор между объектно-ориентированным программированием (ООП) и функциональным программированием (ФП) зависит от задачи, которую нужно решить. Оба подхода имеют свои плюсы и минусы. 🚩Когда использовать ООП? Объектно-ориентированное программирование подходит, когда: Нужно моделировать реальные объекты и их поведение Приложение состоит из множества взаимодействующих сущностей Важно инкапсулировать данные и защитить их от прямого изменения Требуется повторное использование кода через наследование и полиморфизм

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} лает`);
  }
}

const dog = new Dog("Бобик");
dog.speak(); // "Бобик лает"

🚩Когда использовать функциональное программирование? Функциональный подход хорош, если Код должен быть чистым и предсказуемым Нужно избегать изменений состояния (иммутабельность) Требуется много работы с массивами, коллекциями данных Нужно легко писать асинхронный код

const double = num => num * 2;

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(double);

console.log(doubledNumbers); // [2, 4, 6, 8]

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

💩🧑‍💻💩🖥💩🧑‍💻💩🖥💩🧑‍💻💩 Ловите слитую базу с курсами и книгами от известных онлайн школ по Frontend: (23 ГБ) — Основы веба (46 ГБ) — HTML/CSS/Верстка (53 ГБ) — JavaScript (31 ГБ) — React (17 ГБ) — TypeScript (33 ГБ) — Vue / Angular / Svelte (56 ГБ) — Webpack / Vite / Git (43 ГБ) — Next.js / Nuxt.js (68 ГБ) — Figma и Веб-дизайн (76 ГБ) — Анимации и UI/UX (44 ГБ) — WordPress (37 ГБ) — Архитектура фронтенда (21 ГБ) — Тестирование фронта Скачивать ничего не нужно — все выложили в Telegram

Ищешь высокооплачиваемые проекты? Попробуй SkillStaff SkillStaff — это платформа для ИТ-специалистов, менеджеров и креаторов, которым мало одного оклада. Здесь можно найти клиентов, выполнять их проекты и увеличивать свой доход. - Проекты с гибким графиком: part time, full time, удаленка и гибрид - Ставка за час работы — та, что ты сам выбрал - Клиенты — ведущие бренды, проверенные с юридической точки зрения при регистрации на платформе - Оплата поступает ежемесячно на расчетный счет исполнителя - Удобный личный кабинет и функционал, автоматизирующий документооборот Все, что нужно для работы — иметь статус самозанятого или ИП, а платформа поможет со всеми нюансами. Регистрируйся прямо сейчас Зарегистрироваться #реклама 16+ skillstaff.ru О рекламодателе

🤔 В чём отличие box-sizing: border-box от box-sizing: content-box? - border-box включает padding и border в размер элемента — проще контролировать итоговую ширину. - content-box — по умолчанию: ширина задаётся только для содержимого, а padding и border добавляются отдельно. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Как повысить эффективность вебинаров? Организация продающего вебинара - не простая задача, ведь необходимо предусмотреть множество деталей: удобную дату, вовлекающий контент, методы продвижения и взаимодействия с участниками. Вебинары от МТС Линк помогают привлекать новых клиентов и увеличивать конверсию из участника в лид. В сервисе доступен анализ поведения пользователей во время вебинара, синхронный перевод, автовебинары и интерактивные инструменты для вовлечения участников. Делимся методичкой с кейсами, чек-листами и инструкциями для маркетологов, PR и event-менеджеров, чтобы сделать вебинары эффективным инструментом для лидогенерации. Получите методичку бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 В чём разница между тегами div, img, p? Все три тега (<div>, <img>, <p>) используются в HTML, но у них разные предназначения и свойства. 🚩Тег `<div>` (контейнер) Блочный элемент, используется для группировки других элементов и стилизации.

<div class="container">
  <p>Привет, мир!</p>
  <img src="image.jpg" alt="Картинка">
</div>

Особенности <div> - Не несёт семантического значения (просто контейнер). - По умолчанию блочный (занимает всю ширину). - Используется для группировки и стилизации через CSS. 🚩Тег `<img>` (изображение) Строчно-замещающий элемент, предназначен для вставки картинок.

<img src="logo.png" alt="Логотип">

Особенности <img> - Не имеет закрывающего тега (<img> – одиночный тег). - Строчно-замещающий (ведёт себя как inline, но может иметь размеры). - Заменяется на картинку при отображении страницы. - Требует alt для доступности и SEO. 🚩Тег `<p>` (абзац) Блочный элемент, предназначен для разметки текста.

<p>Это текст в абзаце.</p>

Особенности <p> - Блочный (начинается с новой строки). - Используется только для текста. - Внутри нельзя размещать другие блочные элементы (<div>, <p>). Ошибка

<p>Привет, мир!</p>
<p>Второй абзац</p> <!-- Это правильно -->
<p><div>Ошибка!</div></p> <!-- ❌ Нельзя вставлять <div> внутрь <p> -->

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

Ребят, привет! Пока мы мы занимаемся разработкой easyoffer 2.0, я хотел поделиться с вами еще одним очень интересным и перспективным продуктом, который делает мой товарищ и коллега - Макс. Ребята делают первого в России ИИ ассистента по поиску работы, который должен помочь джунам пробиться на собеседования и получить свой первый оффер. Самое крутое, что этот продукт пилит команда джунов, для которых этот проект является вообще первым серьезным проектом в жизни. Что будет уметь этот ИИ ассистент? 1) Полность с нуля составлять резюме. 2) Искать и откликаться на вакансии. До 100 откликов в день. 3) Адаптировать резюме под вакансию и писать сопроводительные письма 4) !Переписываться с рекрутерами на хх.ру и ставить с ними встречи в календарь! (Это вообще взрыв 🤯) 5) Присылать гайд по подготовке к интервью в конкретную компанию, которая позвала на собес. Релиз будет 12 мая. Как сказал Макс, на первый месяц они сделают только 350 мест, чтобы все протестить. Первые 50 покупателей получат доступ на 3 месяца за 14 990 руб. 3900 руб. Следующие 100 покупателей получат доступ на 3 месяца за 14 990 руб. 4500 руб. Последние 200 покупателей получат доступ на 3 месяца за 14 990 руб. 4900 руб. Доступ к приложению Макс откроет 12 мая в 19 00 этом телеграм канале. И закроет как только зарегистрируется 350-ый пользователь. Поэтому давайте поддержим ребят и подпишемся на этот телеграм канал. Ребята делают реально крутую вещь!

Методичка: как сделать онлайн-встречи эффективнее Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать? Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи. Из методички узнаете: - Как создать постоянную ссылку и подключаться на встречи в 2 клика, - Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных. - Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту. Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч. Получить гайд можно бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Зачем нужны сокеты? Сокеты используются для установки устойчивой двусторонней связи между клиентом и сервером в режиме реального времени, например, для чатов, игр или обновлений данных. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как с помощью js можно передвигать вперед/назад по истории браузера? В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта window.history. 🟠Использование `history.back()` и `history.forward()` Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.

history.back();    // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед

Пример кнопок "Назад" и "Вперед"

<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>

🟠Использование `history.go(n)` Этот метод позволяет перемещаться на определенное количество шагов: history.go(-1) – назад на 1 страницу history.go(1) – вперед на 1 страницу history.go(-2) – назад на 2 страницы

history.go(-2); // Перейти на две страницы назад
history.go(3);  // Перейти на три страницы вперед

🟠Получение длины истории `history.length` Если нужно узнать, сколько страниц в истории текущей сессии:

console.log(history.length); // Количество записей в истории

🟠Манипуляции с историей: `pushState()` и `replaceState()` Если нужно изменить URL без перезагрузки страницы, можно использовать: history.pushState(state, title, url) Добавляет новый URL в историю (как будто пользователь перешел по ссылке).

history.pushState({ page: 1 }, "Title 1", "/page1");

history.replaceState(state, title, url) Заменяет текущий URL (не добавляет новую запись в историю).

history.replaceState({ page: 2 }, "Title 2", "/page2");

Пример динамического изменения истории:

document.querySelector("button").addEventListener("click", () => {
  history.pushState({ page: "about" }, "About Page", "/about");
});

🟠Отслеживание изменений истории `popstate` Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события popstate

window.addEventListener("popstate", (event) => {
  console.log("Текущий state:", event.state);
});

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