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

🤔 Что такое websockets? Это протокол коммуникации, предоставляющий двусторонний, полнодуплексный канал связи между клиентом и сервером через одно соединение TCP. Он позволяет обмениваться данными в режиме реального времени, что делает его идеальным для приложений, требующих мгновенной передачи информации, таких как чаты, игры, финансовые системы и другие. 🚩Основные особенности WebSockets 🟠Двусторонняя связь WebSockets обеспечивают полнодуплексное общение, позволяя серверу и клиенту отправлять данные друг другу в любое время. 🟠Постоянное соединение В отличие от HTTP, где каждое запрос-ответное взаимодействие открывает и закрывает соединение, WebSocket поддерживает постоянное соединение, что позволяет мгновенно передавать данные. 🟠Меньшая задержка и накладные расходы WebSockets уменьшают накладные расходы на установление соединений и протоколирование запросов, что приводит к более низкой задержке и уменьшенному использованию ресурсов по сравнению с регулярными HTTP-запросами. 🟠Поддержка бинарных данных WebSockets поддерживают передачу не только текстовых данных, но и бинарных, что расширяет возможности их применения. 🚩Как работает WebSocket 🟠Установление соединения Соединение WebSocket начинается с "рукопожатия" по протоколу HTTP. Клиент отправляет запрос на установление соединения с сервером, используя заголовок Upgrade, чтобы переключиться с HTTP на WebSocket. 🟠Открытие соединения Если сервер принимает запрос, он отвечает с подтверждением, и соединение переключается на протокол WebSocket. С этого момента канал связи открыт и доступен для двусторонней передачи данных. 🟠Обмен данными Клиент и сервер могут обмениваться данными в любом направлении. Сообщения отправляются в рамках установленного соединения без необходимости повторного рукопожатия. 🟠Закрытие соединения Соединение может быть закрыто любой стороной (клиентом или сервером) в любое время. Это может быть сделано по желанию или в случае ошибки. 🚩Сервер на Node.js с использованием библиотеки `ws`

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  console.log('Client connected');

  socket.on('message', (message) => {
    console.log(`Received: ${message}`);
    socket.send(`You said: ${message}`);
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});

console.log('WebSocket server is running on ws://localhost:8080');

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

RE Design Buro – уникальные интерьеры для IT-специалистов! Более 15 лет создаем уникальные проекты международного уровня, которые не только отражают ваш стиль, но и удовлетворяют все ваши потребности. Что мы предлагаем? ⭐️ Полный дизайн-проект: от идеи до реализации – разработаем концепцию, подготовим детальные чертежи и подберем лучшие материалы. 💡 Оперативность и комфорт: начинаем работу ещё до получения ключей, чтобы вы могли въехать в новый дом как можно скорее! ❗️ Прозрачность и честность: фиксируем стоимость работ и сроки, предлагаем удобную поэтапную оплату. 🔥 Специальные условия для IT-специалистов. 👉 Выполненные работы 👉 Подписывайтесь на канал 👉 Бесплатная консультация дизайнера

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

🤔 Что такое mutations и actions в vuex? Который является официальной библиотекой для управления состоянием в приложениях Vue.js, mutations (мутации) и actions (действия) играют ключевые роли в управлении состоянием. Они помогают обеспечивать предсказуемость изменения состояния и организовывают логику приложения. 🚩Mutations (Мутации) Это единственный способ изменить состояние в Vuex. Каждая мутация имеет тип и обработчик. Обработчик мутации получает состояние как первый аргумент, и дополнительный аргумент в качестве полезной нагрузки (payload), который можно использовать для передачи данных в мутацию. Мутации должны быть синхронными, чтобы изменения состояния можно было легко отслеживать. Это помогает делать отладку и логгирование более предсказуемыми.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    incrementBy(state, payload) {
      state.count += payload.amount;
    }
  }
});

🚩Actions (Действия) Действия используются для выполнения асинхронных операций или сложной бизнес-логики перед вызовом мутаций. Действия могут содержать произвольную асинхронную логику, такие как API-запросы, и затем вызывать мутации для изменения состояния. Действия вызываются с помощью метода dispatch и могут возвращать промисы, что полезно для обработки цепочек асинхронных операций.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
    incrementByAsync({ commit }, payload) {
      setTimeout(() => {
        commit('incrementBy', payload);
      }, 1000);
    }
  }
});

🚩Взаимодействие между Mutations и Actions: 🟠Mutations Синхронно изменяют состояние. 🟠Actions Могут быть асинхронными и обычно вызывают мутации для изменения состояния. Пример взаимодействия

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    fetchMessage({ commit }) {
      setTimeout(() => {
        const message = 'Hello from async action!';
        commit('setMessage', message);
      }, 2000);
    }
  }
});

Компонент

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="loadMessage">Load Message</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['fetchMessage']),
    loadMessage() {
      this.fetchMessage();
    }
  }
};
</script>

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

Бесплатный практический вебинар: Профессия «Frontend-разработчик». ⏰ Когда: 19 ноября в 19:00 по мск. Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере 🎮 Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии. 🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  Карта компетенций начинающего Frontend-разработчика.

🤔 Какие методы массивов знаешь В JavaScript массивы поддерживают методы `push()` и `pop()` для добавления и удаления элементов с конца массива. Методы `shift()` и `unshift()` используются для работы с началом массива, а `map()`, `filter()`, и `reduce()` помогают обрабатывать и преобразовывать массивы функционально. Существуют также `slice()`, `splice()`, и `concat()` для копирования, модификации и объединения массивов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Как обрабатываются значения формы в vuex? Для обработки значений формы в Vuex (состоянии управления в приложениях Vue) нужно выполнить следующие шаги: 1⃣Создание формы в компоненте Vue Создайте компонент с формой, который будет использоваться для ввода данных.

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label for="name">Имя:</label>
      <input type="text" id="name" v-model="name" />

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" />

      <button type="submit">Отправить</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    handleSubmit() {
      this.$store.dispatch('submitForm', {
        name: this.name,
        email: this.email
      });
    }
  }
};
</script>

2⃣Создание состояний, мутаций и действий в Vuex Создайте состояние для хранения данных формы, мутации для обновления состояния и действия для обработки отправки формы.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    formData: {
      name: '',
      email: ''
    }
  },
  mutations: {
    SET_FORM_DATA(state, payload) {
      state.formData = payload;
    }
  },
  actions: {
    submitForm({ commit }, formData) {
      // Здесь вы можете выполнить любые асинхронные операции, такие как отправка данных на сервер
      // Например, с использованием axios:
      // axios.post('/api/form', formData).then(response => {
      //   console.log(response.data);
      // });

      commit('SET_FORM_DATA', formData);
    }
  }
});

3⃣Связать значения формы с состоянием Vuex Вы можете использовать mapState и mapMutations для связывания состояния и мутаций Vuex с вашим компонентом.

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <label for="name">Имя:</label>
      <input type="text" id="name" v-model="localName" />

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="localEmail" />

      <button type="submit">Отправить</button>
    </form>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState({
      name: state => state.formData.name,
      email: state => state.formData.email
    }),
    localName: {
      get() {
        return this.name;
      },
      set(value) {
        this.updateForm({ name: value, email: this.email });
      }
    },
    localEmail: {
      get() {
        return this.email;
      },
      set(value) {
        this.updateForm({ name: this.name, email: value });
      }
    }
  },
  methods: {
    ...mapActions(['submitForm']),
    handleSubmit() {
      this.submitForm({
        name: this.localName,
        email: this.localEmail
      });
    },
    updateForm(payload) {
      this.$store.commit('SET_FORM_DATA', payload);
    }
  }
};
</script>

4⃣Отправить данные из формы в Vuex и обновить состояние Когда пользователь отправляет форму, данные формы отправляются в Vuex с помощью действия submitForm, которое обновляет состояние через мутацию SET_FORM_DATA. Ставь 👍 и забирай 📚 Базу знаний

Твое резюме на 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>` Когда вам нужно добавить стили, классы или атрибуты к контейнеру. Когда вам нужно создать структурированный блок или секцию на странице. Ставь 👍 и забирай 📚 Базу знаний