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

Твое резюме на HeadHunter — ОК, если ты видишь это. HeadHunter сравнивает ключевые навыки в твоем резюме и в вакансии и в момент отклика отображает, насколько % ты соответствуешь требованиям. Специальный бейджик «Подходит по навыкам на 100%» отображается, если соответствие составляет более 60%. Если при просмотре вакансий ты видишь такой бейджик, это значит, что список навыков в твоем резюме качественно составлен. Это важный параметр, так как рекрутерам чаще показываются резюме с лучшим соответствием. О том, как правильно указывать ключевые навыки и оптимизировать свое резюме я уже рассказывал в этом видео

Успей ухватить 7 дней бесплатного обучения фронтенд-разработке! 🔥 С нас обучение, практика и помощь с выходом на фриланс. Скоро Роман Чернов, веб-разработчик с 10-летним стажем, проведёт онлайн-интенсив с практикой и обратной связью. На эти 7 дней план такой: - Сверстаешь веб-сайт на HTML + CSS; - Реализуешь функционал на JavaScript; - Используешь фронтенд-фреймворк Angular; - Подключишь Backend и загрузишь сайт на хостинг; - Получишь советы по доработке своего проекта. В итоге ты разработаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов. 👉 Забрать бесплатно 7 дней обучения frontend-разработке А тем, кто ещё только думает переходить в IT, дадим пошаговый план как стать успешным frontend-разработчиком с нуля.

🤔 Чем отличаются let и const? 1. Область видимости: И `let`, и `const` имеют блочную область видимости, что означает, что они доступны только в рамках блока (например, цикла или условного оператора), в котором были объявлены. Это в отличие от `var`, который имеет функциональную область видимости. 2. Переназначение: Переменные, объявленные с помощью `let`, могут быть переназначены, т.е. вы можете изменить значение переменной позже в коде. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Бесплатное 5-месячное обучение IT-профессиям детям 7-17л ⚡Родители, это отличная возможность для вашего ребёнка погрузиться в новую и высокооплачиваемую сферу. Приём заявок продлится с 30 октября по 20 ноября, а количество льготных мест ограничено. Чтобы понять, доступно ли вам бесплатное обучение, нужно заполнить анкету и пройти тестирование (займёт всего ничего - меньше трёх минут). Вы сразу узнаете, попадает ли ваш ребёнок на программу и какая профессия ему подходит❤️ ✅Переходите на сайт и заполняйте анкету, осталось 90 мест: clck.ru/3ESfXB Узнать больше #реклама 16+ salebot.site О рекламодателе

🤔 Как работает promise? 1⃣Ожидание (Pending) Начальное состояние, не завершённое или отклонённое. 2⃣Исполнено (Fulfilled) Операция завершена успешно. 3⃣Отклонено (Rejected) Операция завершена с ошибкой. 🚩Как создаётся Промис создаётся с использованием конструктора Promise, который принимает функцию с двумя аргументами: resolve и reject. Эти аргументы являются функциями, которые изменяют состояние промиса.

const myPromise = new Promise((resolve, reject) => {
  // Асинхронная операция
  setTimeout(() => {
    const success = true;
    
    if (success) {
      resolve('Операция успешно завершена');
    } else {
      reject('Произошла ошибка');
    }
  }, 1000);
});

🚩Методы промисов Промисы имеют несколько методов, которые позволяют работать с результатом асинхронной операции. 🟠then Метод then используется для обработки успешного выполнения промиса (состояние Fulfilled). Он принимает два аргумента: первый — функция для обработки успешного результата, второй — функция для обработки ошибки (необязательный).

myPromise.then(result => {
  console.log(result); // 'Операция успешно завершена'
}).catch(error => {
  console.error(error);
});

🟠catch Метод catch используется для обработки отклонённого промиса (состояние Rejected). Он принимает функцию, которая будет вызвана при ошибке.

myPromise.catch(error => {
  console.error(error); // 'Произошла ошибка'
});

🟠finally Метод finally выполняется после завершения промиса, независимо от того, был он исполнен или отклонён. Он полезен для выполнения кода, который должен быть выполнен в любом случае (например, очистка ресурсов).

myPromise.finally(() => {
  console.log('Промис завершён'); // Выполняется в любом случае
});

🟠Цепочка промисов Методы then и catch возвращают новые промисы, что позволяет создавать цепочки асинхронных операций.

myPromise
  .then(result => {
    console.log(result); // 'Операция успешно завершена'
    return 'Следующий результат';
  })
  .then(nextResult => {
    console.log(nextResult); // 'Следующий результат'
  })
  .catch(error => {
    console.error(error); // Обработка ошибок для всех предыдущих промисов
  });

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

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(`Ошибка: ${xhr.status}`);
      }
    };
    xhr.onerror = () => reject('Ошибка сети');
    xhr.send();
  });
}

fetchData('https://api.example.com/data')
  .then(data => {
    console.log('Данные получены:', data);
  })
  .catch(error => {
    console.error('Ошибка получения данных:', error);
  });

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

🤔 Что такое DOM дерево - DOM (Document Object Model) — это программный интерфейс для HTML-документов, представляющий структуру страницы в виде дерева узлов. - DOM позволяет программам читать и изменять документ структурно, стилистически и содержательно, реагируя на пользовательские взаимодействия. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔Что такое компоненты высшего порядка? Это шаблон в React, который позволяет повторно использовать логику компонентов. HOC — это функция, которая принимает компонент и возвращает новый компонент с добавленной функциональностью. 🚩Зачем нужны HOC 🟠Повторное использование логики HOC позволяет разделять и повторно использовать логику между разными компонентами, не дублируя код. 🟠Абстракция и композиция HOC помогает создавать более абстрактные и композиционные компоненты, что улучшает архитектуру приложения. 🟠Разделение ответственности HOC позволяет разделять обязанности между различными компонентами, улучшая структуру и читаемость кода. 🟠Как создается HOC HOC создается как функция, которая принимает компонент и возвращает новый компонент с добавленной функциональностью. 🚩Пример В этом примере withLogging — это функция, которая принимает компонент WrappedComponent и возвращает новый компонент, оборачивающий WrappedComponent с добавленной логикой логирования.

import React, { Component } from 'react';

// Функция, создающая HOC
function withLogging(WrappedComponent) {
  return class extends Component {
    componentDidMount() {
      console.log(`Компонент ${WrappedComponent.name} был смонтирован`);
    }

    componentWillUnmount() {
      console.log(`Компонент ${WrappedComponent.name} будет размонтирован`);
    }

    render() {
      // Передача пропсов в обёрнутый компонент
      return <WrappedComponent {...this.props} />;
    }
  };
}

// Пример использования HOC
class MyComponent extends Component {
  render() {
    return <div>Привет, мир!</div>;
  }
}

const MyComponentWithLogging = withLogging(MyComponent);

export default MyComponentWithLogging;

🚩Плюсы ➕Работа с данными HOC может использоваться для оборачивания компонента логикой загрузки данных из API или управления состоянием данных. ➕Обработка прав доступа HOC может использоваться для управления доступом к компонентам, проверяя права пользователя и условно рендеря компоненты. ➕Общие методы HOC может добавлять общие методы или состояние, которое нужно разделить между несколькими компонентами. 🚩Пример В этом примере withAuthorization проверяет роль пользователя и условно рендерит WrappedComponent, если пользователь имеет соответствующую роль, или показывает сообщение о запрете доступа.

import React from 'react';

// Функция, создающая HOC для проверки прав доступа
function withAuthorization(WrappedComponent, userRole) {
  return class extends React.Component {
    render() {
      const { role } = this.props;
      if (role !== userRole) {
        return <div>Доступ запрещен</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
}

// Пример использования HOC
class AdminPanel extends React.Component {
  render() {
    return <div>Панель администратора</div>;
  }
}

const AdminPanelWithAuthorization = withAuthorization(AdminPanel, 'admin');

export default AdminPanelWithAuthorization;

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

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal

🤔 Использование хука useEffect в React - useEffect позволяет выполнять побочные эффекты в функциональных компонентах React. - Хук может заменить методы жизненного цикла классовых компонентов для выполнения кода после каждого рендеринга. - Принимает функцию эффекта и массив зависимостей, указывая, при изменении каких пропсов или состояний должен выполняться эффект. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Экспертная разработка сайтов, лендингов, приложений Разработка под ключ: от идеи до реализации. Адаптивные сайты с высокой скоростью загрузки 💻 Увеличим конверсию до 30% 💰 Профессиональный дизайн и UX-оптимизация ✅ Приложения для IOS и Android. Интеграция с CRM и облачными сервисами📱 Работаем на результат⚡ Получить предложение #реклама 16+ tsekh.tech О рекламодателе

🤔 Что лучше использовать div или фрагмент? 🚩React.Fragment Позволяет группировать несколько дочерних элементов без добавления дополнительного узла в DOM. Это полезно, когда вам нужно вернуть несколько элементов из компонента, но вы не хотите добавлять лишние элементы, такие как <div>, в структуру DOM. 🚩Плюсы React.Fragment ➕Чистый DOM Фрагменты не создают дополнительных элементов в DOM, что помогает избежать ненужных вложенных структур и упрощает разметку. ➕Производительность Избегание дополнительных узлов может немного улучшить производительность, так как уменьшается количество элементов, которые браузер должен обрабатывать и рендерить. ➕Логическая группировка Использование фрагментов делает код более семантичным и чистым, показывая, что элементы логически связаны без необходимости добавлять новый HTML-элемент. 🚩Пример использования Элемент <div> добавляет новый узел в DOM и используется для группировки других элементов. Это стандартный блоковый элемент в HTML, который часто используется для создания контейнеров и структурирования страницы.

import React from 'react';

function List() {
  return (
    <React.Fragment>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
    </React.Fragment>
  );
}

// С использованием короткого синтаксиса:
function List() {
  return (
    <>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
    </>
  );
}

🚩Плюсы`<div>`: ➕Стилизация и атрибуты <div> позволяет легко добавлять стили, классы и атрибуты, что делает его полезным для создания структурированных и стилизованных контейнеров. ➕Макет и разметка <div> подходит для создания блоков, секций и контейнеров, которые требуют определенной разметки или стилей. 🚩Пример использования

import React from 'react';

function Container() {
  return (
    <div className="container">
      <p>Это первый параграф</p>
      <p>Это второй параграф</p>
    </div>
  );
}

🟠`React.Fragment` или `<>...</>` Когда вам нужно вернуть несколько элементов из компонента без добавления лишних узлов в DOM. Когда группировка элементов не требует стилизации или добавления атрибутов. 🟠`<div>` Когда вам нужно добавить стили, классы или атрибуты к контейнеру. Когда вам нужно создать структурированный блок или секцию на странице. Ставь 👍 и забирай 📚 Базу знаний

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

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

🤔 В чем отличие ssr от csr? Это два подхода к рендерингу веб-страниц, которые различаются по тому, где происходит рендеринг контента: на сервере или на клиенте. 🚩Различия 🟠Место рендеринга SSR (Server-Side Rendering): Рендеринг контента происходит на сервере. Сервер генерирует HTML страницу и отправляет её клиенту (браузеру), который отображает готовую страницу. CSR (Client-Side Rendering): Рендеринг контента происходит на стороне клиента (в браузере). Браузер загружает минимальный HTML и JavaScript файлы, которые затем выполняются для создания и отображения контента. 🟠Время начальной загрузки SSR: Начальная загрузка может быть быстрее, так как клиент получает готовый HTML и может сразу начать его отображать. Однако последующие взаимодействия могут быть медленнее, так как могут потребовать загрузки дополнительных данных с сервера. CSR: Начальная загрузка может быть медленнее, так как клиент сначала загружает JavaScript, который затем рендерит страницу. Однако последующие взаимодействия обычно быстрее, так как они обрабатываются на клиенте без полной перезагрузки страницы. 🟠SEO SSR: Лучше подходит для SEO, так как поисковые системы получают готовый HTML контент, который легко индексировать. CSR: Может быть сложнее для SEO, так как контент генерируется на клиенте после загрузки JavaScript. Поисковым системам сложнее индексировать такие страницы. 🟠Опыт пользователя SSR: Пользователь видит контент быстрее при первой загрузке страницы, так как сервер отправляет готовый HTML. Однако последующие действия могут быть медленнее из-за необходимости делать запросы на сервер. CSR: Пользователь может дольше ждать при первой загрузке, но последующие действия обычно быстрее и более интерактивны, так как они обрабатываются на клиенте. 🟠Зависимость от JavaScript SSR: Менее зависим от JavaScript, так как основной контент генерируется на сервере и доступен даже если JavaScript отключен или не работает. CSR: Полностью зависит от JavaScript. Если JavaScript отключен или не работает, сайт может не функционировать должным образом. 🚩Пример

// pages/index.js
import React from 'react';

const Home = ({ data }) => (
  <div>
    <h1>Server-Side Rendered Page</h1>
    <p>{data}</p>
  </div>
);

export async function getServerSideProps() {
  // Fetch data from an API or database
  const data = "This is server-side rendered content";

  return {
    props: {
      data,
    },
  };
}

export default Home;

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

🤔 Что такое state manager и с какими приходилось работать - State manager управляет состоянием приложения в централизованной системе управления. - Примеры state managers включают Redux, MobX и Context API в React. - Redux предоставляет глобальное хранилище для состояния и управляет его изменениями через чистые функции (reducers). - MobX использует наблюдаемые объекты и автоматически отслеживает изменения для реактивного обновления UI. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое csr? Это метод рендеринга веб-страниц, при котором большая часть обработки и рендеринга контента происходит на стороне клиента, т.е. в браузере пользователя. В контексте веб-разработки, CSR обычно используется в одностраничных приложениях (Single Page Applications, SPA), где JavaScript играет ключевую роль в управлении содержимым и взаимодействиями на странице. 🚩Как работает 🟠Загрузка HTML При первой загрузке страницы браузер получает минимальный HTML-код, обычно содержащий только базовую структуру и ссылку на JavaScript файл. 🟠Загрузка JavaScript Основной JavaScript файл загружается и исполняется. Этот файл обычно содержит код приложения и необходимые библиотеки. 🟠Запросы к API JavaScript код инициирует запросы к серверу (обычно через API) для получения данных, необходимых для отображения содержимого страницы. 🟠Рендеринг в браузере Полученные данные используются для динамического создания и отображения контента непосредственно в браузере пользователя. 🚩Плюсы ➕Быстрое взаимодействие После начальной загрузки, взаимодействие с приложением обычно быстрее, поскольку обновление контента происходит без полной перезагрузки страницы. ➕Плавный пользовательский опыт Пользователь получает более плавный и интерактивный опыт, так как обновления происходят мгновенно без видимой перезагрузки страниц. ➕Гибкость и динамичность CSR позволяет создавать более динамичные и интерактивные пользовательские интерфейсы, так как все управление происходит на клиентской стороне. 🚩Минусы ➖SEO и начальная загрузка Так как основное содержание страницы рендерится на клиентской стороне, поисковым системам может быть сложнее индексировать такие страницы. Это может повлиять на SEO. ➖Долгое время начальной загрузки Начальная загрузка страницы может занять больше времени, так как сначала загружается и исполняется JavaScript код, а затем уже происходит рендеринг контента. ➖Зависимость от JavaScript Пользователи с отключенным JavaScript не смогут полноценно пользоваться сайтом. Также могут возникать проблемы с производительностью на слабых устройствах. 🚩Пример Минимальный HTML

<!DOCTYPE html>
<html>
<head>
    <title>My React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>

JavaScript рендеринг

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

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

🤔 Что такое контекст функции в JavaScript (this) - Контекст функции, или this, ссылается на объект, в контексте которого была вызвана функция. - В глобальной функции this ссылается на глобальный объект (в браузере это window). - В методе объекта this ссылается на сам объект. - Стрелочные функции не имеют собственного контекста this, они наследуют его от окружающего контекста. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего используются хуки? Для работы с состоянием и другими возможностями React без использования классовых компонентов. Они позволяют вам использовать функциональные компоненты и при этом сохранять состояние, обрабатывать побочные эффекты и использовать другие возможности, которые ранее были доступны только в классовых компонентах. 🚩Хуки 🟠useState Позволяет добавлять состояние в функциональные компоненты. Он принимает начальное значение состояния и возвращает массив с текущим значением состояния и функцией для его обновления.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

🟠useEffect Позволяет выполнять побочные эффекты в функциональных компонентах. Это может быть запрос данных, подписка на события или манипуляции с DOM. Он выполняется после рендера компонента.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer); // Очистка таймера при размонтировании
  }, []);

  return (
    <div>
      <p>Счетчик: {count}</p>
    </div>
  );
}

🟠useContext Позволяет использовать контекст в функциональных компонентах. Он принимает объект контекста и возвращает текущее значение контекста.

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Тема: {theme}</button>;
}

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

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// Использование пользовательского хука
function DataComponent() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) return <p>Загрузка...</p>;
  return <div>Данные: {JSON.stringify(data)}</div>;
}

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

🤔 Что такое прототипы в JavaScript - Прототипы позволяют объектам в JavaScript наследовать свойства и методы друг от друга. - Прототипное наследование является механизмом, позволяющим объектам использовать свойства и методы, определенные в других объектах. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний