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

Какие протоколы взаимодействия существуют ? Спросят с вероятностью 3% В сфере веб-разработки и сетевых технологий существует множество протоколов взаимодействия, каждый из которых предназначен для решения определённых задач. Вот некоторые из наиболее распространённых и важных протоколов: 1️⃣ HTTP (HyperText Transfer Protocol) Это основной протокол для передачи данных в интернете, используемый для загрузки веб-страниц (HTML, CSS, JavaScript и изображений) от сервера к клиенту, обычно веб-браузеру. HTTP определяет методы (например, GET и POST), которые клиенты могут использовать для выполнения запросов к серверам. 2️⃣ HTTPS (HTTP Secure) Это расширение HTTP, обеспечивающее зашифрованное соединение между клиентом и сервером. Это критически важно для обеспечения безопасности данных пользователя, особенно при передаче конфиденциальной информации, такой как логины и пароли, платёжные данные. 3️⃣ WebSocket Это протокол, позволяющий устанавливать двусторонние интерактивные соединения между браузером пользователя и сервером. Это особенно полезно для создания веб-приложений, требующих реального времени обмена данными, таких как чаты, игры и торговые платформы. 4️⃣ FTP (File Transfer Protocol) Это стандартный протокол передачи файлов между компьютерами по сети. Он используется для загрузки и скачивания файлов с сервера, администрирования сайтов и управления содержимым сервера. 5️⃣ SMTP (Simple Mail Transfer Protocol) Это протокол для отправки электронных писем. Он используется почтовыми серверами для доставки отправленных писем в почтовые ящики получателей. 6️⃣ IMAP (Internet Message Access Protocol) и POP3 (Post Office Protocol version 3) Это протоколы, используемые для извлечения электронной почты из почтового сервера. IMAP предлагает более сложные функции по сравнению с POP3, включая возможность работы с электронной почтой непосредственно на сервере, что позволяет пользователям доступ к почте с разных устройств. 7️⃣ TCP/IP (Transmission Control Protocol/Internet Protocol) Это основные протоколы, лежащие в основе интернета, обеспечивающие передачу данных между различными устройствами в сети. Он отвечает за установление соединения и гарантию доставки данных, в то время как IP обеспечивает адресацию и маршрутизацию пакетов данных. 8️⃣ DNS (Domain Name System) Это система, которая переводит доменные имена в IP-адреса, позволяя пользователям легко находить веб-сайты в интернете без необходимости запоминать числовые IP-адреса. Эти протоколы являются ключевыми для функционирования интернета и веб-технологий, обеспечивая различные аспекты передачи данных, безопасности, обмена сообщениями и доступа к ресурсам. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Зачем нужны сокеты ? Спросят с вероятностью 3% Сокеты — это программные интерфейсы (API), позволяющие обеспечивать взаимодействие между приложениями по сети. Они используются для создания сетевых соединений для обмена данными между клиентом и сервером или между узлами в сети. Вот основные причины, по которым сокеты являются важным инструментом в разработке сетевых приложений: 1️⃣ Обеспечение двусторонней коммуникации Позволяют реализовать двустороннюю, непрерывную коммуникацию между клиентом и сервером. Это означает, что данные могут передаваться в обоих направлениях как постоянный поток, что идеально подходит для реалтаймовых приложений, таких как чаты, игры и системы мониторинга в реальном времени. 2️⃣ Работа в реальном времени Позволяют создавать приложения, работающие в реальном времени, благодаря минимальным задержкам передачи данных. Это особенно важно для приложений, требующих мгновенного обмена данными, например, в онлайн-играх, видеоконференциях и финансовых торговых платформах. 3️⃣ Поддержка множества клиентов С их использованием сервер может обрабатывать множество соединений с клиентами одновременно. Это достигается через механизмы многопоточности или асинхронного ввода-вывода, позволяя серверу эффективно масштабироваться для обслуживания большого числа пользователей. 4️⃣ Гибкость и контроль Предоставляют разработчикам большую гибкость и контроль над тем, как устанавливаются и управляются сетевые соединения. Разработчики могут определять, какие протоколы использовать (TCP, UDP и др.), как обрабатывать ошибки и потерю пакетов, а также как оптимизировать производительность для конкретных требований приложения. 5️⃣ Передача различных типов данных С их помощью можно передавать практически любые типы данных — от простого текста до сложных двоичных форматов, таких как видео, аудио и структурированные данные. Это делает сокеты универсальным инструментом для разработки сетевых приложений. Сокеты необходимы для создания сетевых приложений, которые требуют эффективной, двусторонней коммуникации между клиентами и серверами в реальном времени. Они обеспечивают гибкость, масштабируемость и контроль над процессом обмена данными, что делает их незаменимым инструментом в разработке приложений для различных сценариев использования, от веб-сервисов до интерактивных онлайн-игр. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Зачем в web-pack чанки ? Спросят с вероятностью 3% Чанки используются для оптимизации загрузки и выполнения веб-приложений. Чанки позволяют разделить код приложения на более мелкие, независимые блоки, которые могут быть загружены по мере необходимости или параллельно. Это улучшает производительность приложения, сокращает время начальной загрузки и повышает эффективность использования кэша браузера. Рассмотрим основные причины их использования: 1️⃣ Ленивая загрузка (Lazy Loading) Позволяют реализовать ленивую загрузку компонентов или модулей, то есть код загружается только тогда, когда он действительно нужен. Например, компоненты страниц, которые пользователь еще не посетил, могут быть загружены только при их первом запросе. Это снижает объем данных, необходимых для начальной загрузки приложения, и ускоряет его старт. 2️⃣ Разделение кода (Code Splitting) Позволяет разделять код приложения на чанки с помощью разделения кода. Это может быть автоматическое разделение, основанное на анализе графа зависимостей, или явное, когда разработчик указывает, какие модули или библиотеки следует загружать отдельно. Разделение кода помогает уменьшить размер каждого чанка, что положительно сказывается на времени загрузки. 3️⃣ Кэширование При правильной настройке чанки могут быть эффективно закэшированы браузером пользователя. Если часть кода приложения меняется редко (например, сторонние библиотеки), её можно выделить в отдельный чанк, который будет загружен один раз и сохранён в кэше браузера на долгое время. Это уменьшает объем данных, которые необходимо загружать при повторных посещениях. 4️⃣ Параллельная загрузка Браузеры могут загружать несколько чанков параллельно, что ускоряет загрузку всего приложения. Разделение большого приложения на меньшие чанки позволяет браузеру эффективнее использовать пропускную способность сети, загружая множество небольших файлов одновременно, вместо одного большого. Пример: В конфигурации Webpack можно настроить разделение кода с помощью optimization.splitChunks, что позволяет автоматически определять и выделять общие модули в отдельные чанки. Использование чанков значительно улучшает производительность веб-приложений за счёт оптимизации загрузки и кэширования кода. Это делает приложения быстрее и отзывчивее для конечного пользователя, обеспечивая лучший пользовательский опыт. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

👾 Ребят, напоминаю, у нас есть приватные группы где мы делимся реальными собеседованиями и тестовыми заданиями. Чтобы попасть в эти в группы воспользуйтесь ботами: 🤖 Доступ к базе собесов 🤖 Доступ к базе тестовых заданий

Что такое хук ? Спросят с вероятностью 10% Хуки — это функции, которые позволяют "подключаться" к состоянию и жизненному циклу компонентов React из функциональных компонентов. Введение их предоставило мощный инструментарий для работы со состоянием, эффектами и другими возможностями React без необходимости преобразования функциональных компонентов в классы. - useState: Позволяет функциональным компонентам иметь состояние.

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

- useEffect: Позволяет выполнять побочные эффекты в компоненте, такие как обращения к API, подписки и т.д. Это аналог методов жизненного цикла componentDidMount, componentDidUpdate, и componentWillUnmount в классовых компонентах.

    useEffect(() => {
    document.title = Вы нажали ${count} раз;
  }, [count]); // Эффект использует переменную состояния count
  

- useContext: Позволяет получить доступ к данным из контекста. Это упрощает передачу данных через дерево компонентов без необходимости передавать props на каждом уровне.

    const value = useContext(MyContext);
  

- useReducer: Предоставляет альтернативный способ управления состоянием, основанный на паттерне редьюсер. Это особенно полезно для управления сложным состоянием.

    const [state, dispatch] = useReducer(reducer, initialState);
  

- useCallback: Возвращает мемоизированный колбэк, который изменяется только если изменяются зависимости. Это помогает предотвратить ненужные ререндеры.

    const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);
  

- useMemo: Мемоизирует вычисляемое значение. Это помогает избежать ненужных вычислений при каждом рендере.

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  

- useRef: Возвращает изменяемый ref объект, который может быть использован для хранения значения на протяжении всего жизненного цикла компонента.

    const myRef = useRef(initialValue);
  

Хуки были введены для решения нескольких проблем: ✅ Упрощение переиспользования логики состояния между компонентами без необходимости создавать высшие порядковые компоненты или рендер-пропсы. ✅ Использование состояния и других возможностей React без написания классов. ✅ Организация логики внутри компонента по принципу использования, а не жизненного цикла. Хуки предлагают более простой и мощный способ создания компонентов, делая код более читабельным и легко поддерживаемым. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Что такое react ? Спросят с вероятностью 10% React — это декларативная, эффективная и гибкая библиотека для создания пользовательских интерфейсов. Она позволяет строить сложные интерактивные UI из небольших и изолированных частей кода, называемых "компонентами". Он был создан инженерами Facebook и впервые представлен в 2013 году. Основные особенности React: 1️⃣ Компонентный подход: Приложения строятся из компонентов, которые содержат свой собственный стейт (состояние) и логику отображения. Компоненты могут быть повторно использованы в разных частях приложения, что повышает удобство поддержки и разработки кода. 2️⃣ Декларативность: Позволяет описывать, как компоненты интерфейса выглядят в разных состояниях, автоматически обновляя их при изменении данных. Это делает код более читаемым и упрощает процесс разработки. 3️⃣ Виртуальный DOM (VDOM): Использует концепцию виртуального DOM для повышения производительности приложения. Виртуальный DOM — это легковесная копия реального DOM-дерева в памяти, позволяющая оптимизировать обновления интерфейса за счет минимизации взаимодействия с реальным DOM. 4️⃣ Однонаправленный поток данных: В нем данные передаются от родительских компонентов к дочерним через свойства (props), что обеспечивает предсказуемость и упрощает отладку приложений. Использование React Широко используется для разработки как небольших, так и крупных веб-приложений, предоставляя разработчикам мощные инструменты для создания интерактивных пользовательских интерфейсов. Он может быть использован как в одностраничных приложениях (SPA), так и в многостраничных сайтах. Также лежит в основе таких проектов, как Gatsby (статический сайт-генератор) и Next.js (фреймворк для серверного и статического рендеринга), расширяя его возможности для разработки веб-приложений. Экосистема Включает в себя не только саму библиотеку, но и множество связанных инструментов и библиотек, таких как: ✅ Redux/React Context для управления глобальным состоянием приложения. ✅ React Router для навигации между страницами без перезагрузки. ✅ React Native для разработки кросс-платформенных мобильных приложений с использованием JavaScript и React. React представляет собой мощный инструмент для разработки современных веб-и мобильных приложений, обладая большим сообществом и широким спектром инструментов для решения различных задач разработки пользовательских интерфейсов. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Что такое props ? Спросят с вероятностью 10% props — это сокращение от "properties" (свойства). Это концепция, используемая для передачи данных от родительского компонента к дочернему компоненту. Они являются неизменяемыми, что означает, что дочерний компонент не может напрямую изменять полученные его; вместо этого, любые изменения в данных должны происходить на уровне родительского компонента, который затем повторно передает его дочерним компонентам. Как они работают Когда вы создаете компонент, вы можете передать ему props следующим образом:

const ParentComponent = () => {
  return <ChildComponent name="Иван" age={30} />;
};

В этом примере, ChildComponent получает два props: name и age. Доступ к этим props внутри ChildComponent происходит так:

const ChildComponent = (props) => {
  return <h1>Привет, мое имя {props.name}, мне {props.age} лет.</h1>;
};

Особенности props ✅ Неизменяемость: Предназначены только для чтения. Это означает, что компонент не может изменить свои props, но может либо использовать их "как есть", либо использовать их для вычисления новых значений внутри компонента. ✅ Передача данных: Позволяют компонентам получать данные от родителя, что делает компоненты более гибкими и повторно используемыми. ✅ Передача функций: Через него можно передавать не только данные, но и функции, что позволяет родительскому компоненту предоставлять обработчики событий дочерним компонентам. Пример передачи функции

const ParentComponent = () => {
  const showAlert = () => {
    alert("Приветствие от родителя!");
  };

  return <ChildComponent showAlert={showAlert} />;
};

const ChildComponent = (props) => {
  return <button onClick={props.showAlert}>Показать приветствие</button>;
};

В этом примере, функция showAlert определена в ParentComponent и передается как props в ChildComponent, который затем использует ее как обработчик события клика для кнопки. props — это механизм для передачи данных и функций от родительских компонентов к дочерним, делая компоненты гибкими и повторно используемыми. С помощью props, компоненты могут динамически отображать данные и взаимодействовать с другими компонентами в приложении. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Как можно ускорить загрузку сайта ? Спросят с вероятностью 7% Ускорение загрузки сайта — крайне важный аспект веб-разработки, поскольку это напрямую влияет на пользовательский опыт и SEO. Есть множество способов оптимизации, которые могут помочь в этом: 1️⃣ Минимизация и объединение файлов: Сокращение количества файлов, которые нужно загрузить браузеру, может значительно ускорить загрузку сайта. Использование инструментов для минимизации (сжатия) этих файлов уменьшает их размер. 2️⃣ Асинхронная загрузка скриптов: Скрипты, загружаемые асинхронно, не блокируют отображение страницы. Это позволяет браузеру продолжать загрузку других элементов страницы, пока скрипт ещё загружается. 3️⃣ Использование кэширования браузера: Настройка сервера так, чтобы он указывал браузерам, как долго хранить файлы в кэше, может значительно ускорить повторные посещения сайта. 4️⃣ Оптимизация изображений: Изображения часто занимают большую часть размера страницы. Использование форматов, таких как WebP, которые обеспечивают меньший размер файла при сохранении качества, а также сжатие и масштабирование изображений под нужные размеры, могут значительно сократить время загрузки. 5️⃣ Использование сети доставки контента (CDN): CDN позволяет хранить копии вашего сайта на множестве серверов по всему миру, так что пользователи загружают контент с ближайшего к ним сервера. 6️⃣ Lazy loading (ленивая загрузка): Техника, при которой контент (особенно изображения и видео) на странице загружается только тогда, когда он попадает в область видимости пользователя. Это снижает начальную нагрузку на страницу. 7️⃣ Ускорение серверного ответа: Время ответа сервера может быть уменьшено за счет оптимизации сервера, использования более быстрого хостинга или оптимизации базы данных. 8️⃣ Использование HTTP/2: Протокол HTTP/2 позволяет более эффективно загружать ресурсы, благодаря мультиплексированию, сжатию заголовков и приоритизации запросов. 9️⃣ Удаление ненужных плагинов и скриптов: Ненужные плагины и скрипты могут замедлять ваш сайт, поэтому стоит регулярно пересматривать их и удалять неиспользуемые. 🔟 Использование AMP (Accelerated Mobile Pages): Если большая часть вашей аудитории использует мобильные устройства, использование AMP может ускорить загрузку страниц на этих устройствах. Оптимизация загрузки сайта — это процесс, который требует внимания к деталям и постоянного тестирования. Использование инструментов анализа производительности, таких как Google PageSpeed Insights, помогает выявлять проблемы и предлагает конкретные рекомендации по их решению. Для ускорения загрузки сайта нужно оптимизировать ресурсы, использовать кэширование и CDN, применять асинхронную загрузку скриптов и ленивую загрузку контента, а также рассмотреть возможность использования более быстрых технологий и протоколов. Это улучшит пользовательский опыт и повысит эффективность сайта. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

👨‍💻 Изучаешь Frontend? Я тоже! idk Frontend - канал, в котором я максимально подробно конспектирую весь мой путь обучения с самого старта. С меня: — Сложная теория простым языком; — Практические примеры и объяснения; — Крутые викторины по JS и шпаргалки; — Работа над ошибками. С тебя: — Подписка @idk_frontend Продолжим обучаться вместе! 👋

Как работает new ? Спросят с вероятностью 7% new используется для создания экземпляра объекта на основе функции-конструктора или класса. Процесс его работы можно разделить на несколько шагов: 1️⃣ Создание нового объекта: Когда вы используете его, JavaScript создаёт новый пустой объект. 2️⃣ Присвоение прототипа: Прототип созданного объекта устанавливается в значение свойства prototype функции-конструктора. Это означает, что новый объект наследует свойства и методы, определённые в прототипе конструктора. 3️⃣ Вызов функции-конструктора: Функция-конструктор вызывается с аргументами, переданными в неи, и контекстом this, установленным в только что созданный объект. Это позволяет добавлять свойства и методы непосредственно к экземпляру. 4️⃣ Возврат значения: Если функция-конструктор возвращает объект, то этот объект возвращается вместо только что созданного. Если возвращается не объект (например, примитивное значение) или функция-конструктор вообще ничего не возвращает, то возвращается созданный на шаге 1 объект. Пример:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(Привет, меня зовут ${this.name}!);
};

// Создаём новый объект с помощью new
const person1 = new Person('Алексей', 30);

person1.greet(); // Выводит: "Привет, меня зовут Алексей!"

В этом примере new Person('Алексей', 30) создаёт новый объект, прототипом которого является Person.prototype, и вызывает функцию Person с this, указывающим на новый объект, что позволяет добавить свойства name и age к этому объекту. После этого, с новым объектом можно взаимодействовать, как с экземпляром Person, включая вызов методов, определённых в Person.prototype. new позволяет создавать новые объекты на основе функций-конструкторов или классов, автоматически устанавливая связь между созданным объектом и прототипом конструктора, что обеспечивает наследование свойств и методов. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых