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

— Кто мы? — Фронтенд-разработчики! — Чего мы хотим? — Делать крутые сайты! — Где этому научиться? — На канале «Будни разработчика», конечно! — А что там? — Скрытые фишки фронтенда, истории лучших девелоперов и топовые статьи!

Как делается http запрос ? Спросят с вероятностью 13% HTTP-запросы — это основа взаимодействия, позволяющие клиентам (например, браузерам) общаться с серверами. Это происходит с использованием протокола HTTP (HyperText Transfer Protocol). Клиент отправляет его серверу, а сервер отвечает HTTP-ответом. Запросы могут быть сделаны для различных целей, включая получение данных (GET запрос), отправку данных для создания или обновления ресурсов (POST, PUT запросы), удаление ресурсов (DELETE запрос) и др. Структура HTTP-запроса Состоит из следующих частей: 1️⃣ Стартовая строка (Start line): Определяет метод запроса (например, GET, POST), URI (Uniform Resource Identifier) запрашиваемого ресурса и версию HTTP. 2️⃣ Заголовки (Headers): Содержат дополнительную информацию для сервера, например тип контента, который клиент может принимать (Accept), тип контента, который отправляется (Content-Type), параметры аутентификации и другие. 3️⃣ Пустая строка: Разделяет заголовки и тело запроса. 4️⃣ Тело запроса (Body) (необязательно): Содержит данные, отправляемые в запросе. Используется с методами POST, PUT и другими, но не с GET. Способы отправки HTTP-запросов - Использование веб-браузера Самый простой способ его отправки — использование веб-браузера. Когда вы вводите URL в адресную строку и нажимаете Enter, браузер отправляет GET-запрос к серверу, запрашивая содержимое страницы. - Использование инструментов ✅ cURL: Командная утилита для отправки запросов через терминал или командную строку.

    curl -X GET "http://example.com"

✅ Postman: Графический интерфейс пользователя (GUI) для отправки HTTP-запросов, удобный для тестирования API. ✅ HTTP клиенты в языках программирования: Большинство языков программирования предоставляют библиотеки для работы с HTTP. Например, fetch в JavaScript, requests в Python, HttpClient в .NET. Пример с использованием Fetch API

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

Этот код отправляет GET-запрос к http://example.com/movies.json, преобразует ответ и выводит его в консоль. HTTP-запросы являются фундаментальной частью веб-разработки, позволяя клиентам и серверам обмениваться данными. Существует множество способов для выполнения HTTP-запросов, включая использование веб-браузеров, специализированных инструментов и программных библиотек в различных языках программирования. Важно понимать структуру запроса и правильно использовать методы HTTP для эффективного взаимодействия с веб-серверами. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Ищешь много полезной практики по JavaScript? Переходи на канал CCODE, где ты найдешь увлекательные уроки, интересные задачи и многое другое для того, чтобы улучшить свои навыки программирования на JavaScript 👉 Подписаться на канал

Что такое rest api ? Спросят с вероятностью 13% REST API (Representational State Transfer Application Programming Interface) — это архитектурный стиль взаимодействия компонентов распределенного приложения в сети. В контексте веб-разработки, он позволяет веб-сервисам общаться друг с другом через HTTP, используя стандартные методы HTTP (GET, POST, PUT, DELETE и т.д.) для выполнения операций над данными. Основные принципы: 1️⃣ Без состояния (Stateless): Каждый запрос от клиента к серверу должен содержать всю информацию, необходимую для его выполнения. Сервер не сохраняет состояние клиента между запросами. 2️⃣ Единообразие интерфейса (Uniform Interface): Определяет стандартный способ взаимодействия между клиентом и сервером, что облегчает и унифицирует разработку и взаимодействие компонентов системы. 3️⃣ Кэширование (Cacheable): Ответы на запросы могут быть кэшируемыми или некэшируемыми, что позволяет улучшить производительность системы за счет уменьшения нагрузки на сервер. 4️⃣ Клиент-сервер (Client-Server): Разделение обязанностей между клиентом (например, пользовательским интерфейсом) и сервером (хранилище данных), что упрощает разработку и масштабирование компонентов независимо друг от друга. 5️⃣ Многоуровневая система (Layered System): Клиент не может обязательно знать, общается ли он напрямую с сервером или через посредников, что повышает безопасность системы и позволяет использовать балансировщики нагрузки, кэширующие сервера и т.д. 6️⃣ Код по требованию (Code on Demand, необязательно): Сервер может временно расширять или настраивать функциональность клиента, передавая ему исполняемый код. Примеры: 1️⃣ Веб-сервисы: Веб-сайты используют его для запроса данных с сервера (например, загрузка списка пользователей, публикации сообщений в блоге). 2️⃣ Мобильные приложения: Мобильные приложения общаются с сервером для получения и отправки данных (например, проверка погоды, отправка сообщений). 3️⃣ Интеграция с внешними сервисами: Приложения могут интегрироваться с внешними API для расширения своего функционала (например, использование карт Google Maps, интеграция с социальными сетями). REST API — это набор принципов и ограничений для создания веб-сервисов, который обеспечивает гибкое и эффективное взаимодействие между компонентами распределенных систем через HTTP. Благодаря своей простоте, масштабируемости и гибкости, REST стал доминирующим стилем для разработки API для веб-приложений. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Всем привет, это Дмитрий Шишкин, C-level IT-менеджер, 24 года опыта в IT и 15 лет в управлении (РЖД, Газпром, etc.) Приглашаю всех на недели погружения: прокачка карьеры для тех кто в IT. Темы выбираете вы сами: ▶️ Как работает рынок найма в айти на самом деле?  ▶️  Тонкости написания резюме: что смотивирует назначить вам звонок? ▶️  Собеседование: как его проходить эффективно для себя, что говорить, как действовать ▶️  Как понять, что вы застряли в доходе и месте работы — и пора идти дальше? Голосуйте у меня на канале 👇 Карьера в ИТ by Shishkin и включайтесь в активную работу, участие бесплатное.

В чём отличие хранения данных в local storage от куки ? Спросят с вероятностью 17% Хранение данных в Local Storage и использование куки (cookies) — это два различных способа сохранения информации на стороне клиента в веб-разработке. Каждый из них имеет свои особенности, преимущества и недостатки: Local Storage 1️⃣ Объем данных: Предоставляет значительно больше пространства для хранения данных по сравнению с куки — до 5-10 МБ в зависимости от браузера. 2️⃣ Доступность: Данные, сохраненные нем, доступны только на том же домене и не отправляются на сервер при каждом запросе, в отличие от куки. 3️⃣ Срок хранения: Данные нем сохраняются бессрочно или до тех пор, пока не будут явно удалены кодом или пользователем через настройки браузера. 4️⃣ Безопасность: Так как данные из него не отправляются на сервер с каждым запросом, риск перехвата этих данных ниже, чем у куки. Однако, поскольку данные доступны через JavaScript, Local Storage уязвим к XSS-атакам (межсайтовому скриптингу). Куки (Cookies) 1️⃣ Объем данных: Ограничены размером, обычно максимум 4 КБ на одно куки. 2️⃣ Доступность: Отправляются на сервер при каждом HTTP-запросе к домену, который их установил, что может быть полезно для аутентификации или отслеживания сессий пользователя. 3️⃣ Срок хранения: Срок жизни куки может быть установлен при их создании. Если срок не установлен, куки считается сессионным и удаляется при закрытии браузера. 4️⃣ Безопасность: Куки могут быть настроены как HttpOnly, что делает их недоступными и уменьшает риск XSS-атак. Также куки могут быть помечены как Secure, что означает их отправку только по защищенным соединениям (HTTPS). Local Storage лучше подходит для хранения больших объемов данных, которые не требуется отправлять на сервер с каждым запросом. Это хороший выбор для сохранения настроек пользователя или данных форм на стороне клиента. Куки лучше использовать для управления сессиями пользователя или для хранения небольших объемов данных, которые должны быть доступны как на клиенте, так и на сервере. Куки также могут служить для реализации механизмов аутентификации и отслеживания состояния сессий. Выбор между Local Storage и куки зависит от конкретных требований приложения, включая необходимый объем хранения, требования к безопасности и необходимость обмена данными между клиентом и сервером. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Вместе уютно собираемся по вечерам каждый у себя дома и учимся верстать сайты с нуля. В комплекте приятная музыка, тёмная тема и добрейшее сообщество неопытных верстальщиков, которые вообще-то огого и всем ещё покажут. Всё это будет на бесплатном марафоне по HTML и СSS «ночной кружок по вёрстке», который пройдёт с 18 по 23 апреля. За 6 дней вы: — Изучите основы веб-технологий и попробуете себя в роли фронтенд-разработчика; — Напишете в тренажёрах свои первые строчки кода и увидите как изменяется страница сайта в реальном времени; — Поймёте нравится ли вам веб-разработка. Кстати, а ещё мы разыграем курс по HTML и СSS среди участников марафона. Вступить в кружок.

Что такое dom дерево ? Спросят с вероятностью 13% DOM (Document Object Model) дерево — это интерфейс, который представляет содержимое веб-страницы в виде иерархической структуры объектов. Каждый элемент страницы, включая текст, теги и атрибуты, становится узлом в этом дереве. Он позволяет языкам программирования, взаимодействовать с содержимым веб-страницы, изменяя его структуру, стиль и содержание. Структура DOM дерева - Узлы (Nodes): Базовые части. Узлы могут представлять элементы (Element), текст (Text), комментарии (Comment) и т.д. - Корневой узел (Root Node): Обычно узел document, который служит входной точкой к содержимому веб-страницы. - Родительские узлы (Parent Nodes): Узлы, содержащие другие узлы (дочерние узлы). - Дочерние узлы (Child Nodes): Узлы, находящиеся внутри другого узла. - Соседние узлы (Sibling Nodes): Узлы, расположенные на одном и том же уровне иерархии. Как работает DOM Когда браузер загружает веб-страницу, он создаёт такое дерево на основе HTML-документа. Это преобразование позволяет скриптам динамически изменять визуальное представление страницы, добавляя, удаляя или модифицируя элементы и их атрибуты. Можно выполнять различные операции с ним, такие как: ✅ Поиск элементов: С помощью методов вроде getElementById, getElementsByClassName, querySelector и querySelectorAll. ✅ Создание и добавление элементов: Используя методы createElement и appendChild. ✅ Удаление элементов: С помощью removeChild. ✅ Изменение атрибутов и стилей: Через обращение к свойствам элементов, таким как className, style и другим. Важность DOM Играет ключевую роль в интерактивности и динамическом поведении веб-страниц. Благодаря ему, веб-страницы могут отвечать на действия пользователя, обновляясь без необходимости перезагрузки страницы. Это лежит в основе таких технологий, как AJAX и SPA (Single Page Application), которые позволяют создавать быстрые и плавные веб-приложения. DOM дерево — это иерархическая структура, представляющая содержимое веб-страницы как объекты. Это позволяет создавать динамические и интерактивные веб-приложения, изменяя содержимое, структуру и внешний вид страницы на лету. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Недавно наткнулся на канал девушки, которая уже много лет занимается своим любимым делом - программированием. Эту девушку зовут Елена, она смогла устроить свою жизнь так, что многие могут позавидовать! Она работает фронтенд-разработчиком, а в свободное время путешествует (план - 10 стран в год!). Также Елена полгода назад запустила свой Chrome Extension, который успел собрать 20 000 пользователей, и в ближайшее время собирается его монетизировать. О своём опыте девушка делится в статье. Также Елена активно двигается в поиске работы на зарубежном рынке и недавно написала пост о том, как грамотно составить профиль на LinkedIn. Хотите узнать какие шаги нужно предпринять, чтобы вписать технологии, работу и отдых в свою жизнь - подписывайтесь на канал!

Как использовать useeffect ? Спросят с вероятностью 13% useEffect — это хук, введённый в React 16.8, который позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты включают в себя операции, которые выходят за рамки возвращаемого результатом рендеринга, такие как работа с сетью (запросы к API), подписки, изменение документа и так далее. Он заменяет собой жизненные циклы классовых компонентов, такие как componentDidMount, componentDidUpdate и componentWillUnmount. Синтаксис:

useEffect(() => {
  // Ваш код для побочного эффекта
  return () => {
    // Очистка (необязательно)
  };
}, [зависимости]);

✅ Функция побочного эффекта: Это его основное тело, где вы помещаете код, который должен выполняться после каждого рендеринга (по умолчанию) или когда изменяются определённые зависимости. ✅ Очистка: Функция очистки выполняется перед тем, как компонент будет удалён, а также перед следующим выполнением эффекта. Это идеальное место для отмены подписок, таймеров и других ресурсов, чтобы избежать утечек памяти. ✅ Массив зависимостей: Определяет, при изменении каких значений должен повторно выполняться эффект. Если массив пуст ([]), эффект выполнится один раз после первого рендеринга. Если массив не указан, эффект будет выполняться после каждого рендеринга. Примеры использования: 1️⃣ Запуск эффекта один раз Чтобы выполнить эффект один раз после первого рендеринга (аналог componentDidMount в классовых компонентах), используйте пустой массив зависимостей:

useEffect(() => {
  // Код здесь будет выполнен один раз после инициализации компонента
}, []);

2️⃣ Выполнение при изменении зависимостей Чтобы выполнить эффект при изменении определённых значений:

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

useEffect(() => {
  // Код здесь будет выполнен каждый раз, когда изменяется значение count
  document.title = Вы нажали ${count} раз;
}, [count]); // Зависимости

3️⃣ Очистка эффекта Пример использования функции очистки:

useEffect(() => {
  const timerID = setInterval(() => {
    // Ваша логика здесь
  }, 1000);

  return () => {
    clearInterval(timerID); // Очистка при размонтировании компонента
  };
}, []); // Эффект выполнится один раз

useEffect позволяет вам выполнять побочные эффекты в функциональных компонентах. Он может заменить собой несколько методов жизненного цикла классовых компонентов, предоставляя более унифицированный и удобный способ работы с побочными эффектами. Через массив зависимостей вы контролируете, как часто эффект должен выполняться, что делает ваш компонент более оптимизированным и предсказуемым. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

🚀Прокачайте свой уровень разработки веб-приложений — освойте мощный фреймворк Nest.Js Начните с бесплатного практического онлайн-урока от опытного программиста. Открытый вебинар пройдет в рамках большого курса для JS-разработчиков, вы получите выгодные условия на обучение ⏰Встречаемся 17 апреля в 20:00 (мск). 👉Регистрируйтесь прямо сейчас, чтобы посетить бесплатный урок и получить спец. цену на курс: РЕГИСТРАЦИЯ.

Что такое меморизация ? Спросят с вероятностью 17% Меморизация — это оптимизационная техника, используемая для ускорения выполнения программ путём сохранения результатов дорогостоящих функций и повторного использования этих результатов, когда снова возникают одинаковые входные данные, вместо того чтобы повторно выполнять функцию. Как это работает При первом вызове функции с определённым набором аргументов результат выполнения функции сохраняется в каком-либо хранилище (чаще всего в виде объекта или карты). При последующих вызовах функции с теми же аргументами, вместо выполнения функции, возвращается сохранённый результат. Это значительно сокращает время выполнения, особенно если исходная функция требует значительных вычислительных ресурсов. Применение: Меморизация часто применяется для оптимизации производительности в различных областях, включая: - Рекурсивные вычисления, например, вычисление чисел Фибоначчи. - Дорогостоящие вычисления, которые часто повторяются с одними и теми же аргументами. - Оптимизация производительности веб-приложений, например, в React, где меморизация помогает избежать ненужных перерисовок компонентов.

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = args.toString();
    if (cache[key]) {
      return cache[key];
    } else {
      const result = fn.apply(this, args);
      cache[key] = result;
      return result;
    }
  };
}

// Пример использования меморизации для функции вычисления факториала
const factorial = memoize(function(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
});

console.log(factorial(5));  // Вычисляется и сохраняется в кэше
console.log(factorial(5));  // Возвращается результат из кэша, вычислений не происходит

Меморизация — это техника сохранения результатов выполнения функций для их быстрого повторного использования, что позволяет существенно ускорить выполнение программы, особенно при работе с дорогостоящими вычислениями или рекурсивными функциями. Это достигается за счёт того, что вместо повторного выполнения функции с теми же аргументами, результат возвращается из специального хранилища (кэша). 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

Заметки про React Канал про React, в котором вы найдете: ◼️ Новые и полезные библиотеки ◼️ Подходы к архитектуре приложений ◼️ Новости из мира React ◼️ Обзоры полезных практик и паттернов ◼️ Гайды по оптимизации приложения 📢 Подпишись, чтобы быть в курсе: https://t.me/ru_react_notes

Что приоритетнее использовать ts или js ? Спросят с вероятностью 10% Выбор между TypeScript (TS) и JavaScript (JS) зависит от конкретных требований, предпочтений и специфики задачи. Оба языка имеют свои преимущества и недостатки, и решение о том, какой из них использовать, следует принимать, исходя из нескольких ключевых факторов. TypeScript Преимущества: ✅ Статическая типизация: Предоставляет строгую типизацию, что помогает обнаруживать ошибки на этапе компиляции, ещё до выполнения кода. Это может значительно уменьшить количество ошибок в продакшене. ✅ Поддержка последних возможностей JavaScript: Компилируется в чистый JS, что позволяет использовать последние возможности языка, не беспокоясь о совместимости с браузерами. ✅ Инструменты разработки: Улучшенная поддержка в IDE для автодополнения кода, рефакторинга и навигации по проекту. ✅ Масштабируемость: Лучше подходит для больших проектов благодаря возможности определения интерфейсов, типов и обобщений. Недостатки: ❌ Кривая обучения: Необходимо время на изучение синтаксиса и особенностейt. ❌ Время на настройку: Настройка проекта на нем может потребовать дополнительного времени и усилий, особенно в существующих больших проектах. ❌ Скорость сборки: Проекты на нем могут компилироваться дольше, чем чистый JS, из-за процесса типизации. JavaScript Преимущества: ✅ Гибкость: Очень гибкий язык, позволяющий разработчикам быстро прототипировать и реализовывать решения. ✅ Широкая поддержка: Поддерживается всеми современными браузерами без необходимости компиляции. ✅ Большое сообщество: Огромное количество ресурсов, библиотек и фреймворков доступно для него. ✅ Простота использования: Для начала работы с ним не требуется сложная настройка среды разработки. Недостатки: ❌ Динамическая типизация: Может привести к ошибкам во время выполнения, которые сложно обнаружить на этапе разработки. ❌ Масштабируемость: Управление большими проектами может стать сложнее без строгой системы типов. ❌ Используйте TypeScript, если вы работаете над крупным проектом с большой командой разработчиков, где масштабируемость и поддерживаемость кода являются ключевыми. TypeScript также предпочтительнее, если вам нужна строгая типизация для улучшения качества кода и уменьшения количества ошибок. ❌ Используйте JavaScript, если вы работаете над меньшим проектом, прототипом или когда скорость разработки критична. JavaScript может быть также предпочтительным выбором для новичков, которые только начинают изучать разработку веб-приложений, благодаря его непосредственной поддержке в браузерах и большому количеству обучающих материалов. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.