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

🤔 Зачем нужен nginx? Nginx — это мощный веб-сервер, который используется для раздачи статических файлов, балансировки нагрузки, проксирования запросов и обеспечения безопасности. 🟠Как Nginx раздаёт фронтенд-приложение? Когда мы билдим SPA-приложение (например, React/Vue/Angular), в папке dist появляются статические файлы (index.html, app.js, styles.css).

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;
    
    location / {
        try_files $uri /index.html;
    }
}

🟠Как Nginx проксирует запросы к бэкенду? Если фронтенд (myapp.com) и бэкенд (api.myapp.com) находятся на разных серверах, Nginx может перенаправлять запросы на API.

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    # Проксирование API-запросов
    location /api/ {
        proxy_pass http://localhost:5000/; # Node.js, Python, PHP и т. д.
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

🟠Как Nginx балансирует нагрузку? Если у нас несколько бэкенд-серверов, Nginx может распределять нагрузку между ними.

upstream backend {
    server backend1.myapp.com;
    server backend2.myapp.com;
}

server {
    listen 80;
    server_name api.myapp.com;

    location / {
        proxy_pass http://backend;
    }
}

🟠Как Nginx ускоряет сайт с кэшем? Кэширование уменьшает нагрузку на сервер и ускоряет загрузку страниц.

location /static/ {
    expires 7d; # Кэшировать файлы на 7 дней
    add_header Cache-Control "public, max-age=604800";
}

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

Хочешь начать карьеру в ИТ на оплачиваемой стажировке? Присоединяйся к ИТ-лагерю Т1 для студентов вузов технических и ИТ-специальностей. Теперь в обновлённом формате: ещё больше практики, доступ к платформам Т1, а участие — оплачивается и оформляется как стажировка. За 2,5 месяца вместе с проектной командой ты пройдешь полный цикл создания ИТ-продукта: от идеи до разработки прототипа и финальной защиты. Превратить идею в проект помогут мастер-классы, общение с экспертами и погружение в процессы Т1. Направления подготовки: ✅ ручное тестирование; ✅ прикладное администрирование (DevOps); ✅ системный анализ; ✅ фронтенд-разработка (React); ✅ бэкэнд-разработка (Java). Подай заявку до 30 июня! Старт — в июле. Узнать больше #реклама 16+ career.t1.ru О рекламодателе

🤔 Как работает HTTP? HTTP — это протокол клиент-серверного взаимодействия. Клиент отправляет запрос (метод, заголовки, тело) на сервер, сервер возвращает ответ (статус-код, заголовки, данные). Протокол работает на основе TCP, чаще всего используется для работы с вебом. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг 18 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Виталию Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

Не грузится? Понимаем. Бесплатный мессенджер для вашей компании - Битрикс24. Личные и групповые чаты, видеозвонки, каналы и нейросеть. Всё привычно и удобно. Начните работать на бесплатном тарифе уже сейчас. Узнать больше #реклама 16+ bitrix24.ru О рекламодателе

🤔 В чём разница между event.preventDefault и event.stopPropagation? 1. event.preventDefault: предотвращает стандартное поведение элемента (например, отправку формы). 2. event.stopPropagation: останавливает дальнейшее распространение события по дереву DOM. 3. Часто используются совместно для полной обработки события без влияния на другие элементы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 В чём преимущество синтаксического сахара в виде async await над promise? Оба способа позволяют работать с асинхронным кодом в JavaScript, но async/await делает код чище, проще и удобнее. 🟠`async/await` проще читать и писать Код на Promise.then() часто становится вложенным и запутанным

fetch("https://api.example.com/user")
  .then(response => response.json())
  .then(user => {
    return fetch(`https://api.example.com/orders/${user.id}`);
  })
  .then(response => response.json())
  .then(orders => {
    console.log("Заказы:", orders);
  })
  .catch(error => console.error("Ошибка:", error));

Решение: async/await

async function getUserOrders() {
    try {
        const response = await fetch("https://api.example.com/user");
        const user = await response.json();

        const ordersResponse = await fetch(`https://api.example.com/orders/${user.id}`);
        const orders = await ordersResponse.json();

        console.log("Заказы:", orders);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}

getUserOrders();

async/await лучше обрабатывает ошибки

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    throw new Error("Ошибка в обработке данных");
  })
  .catch(error => console.error("Ошибка:", error));

async/await + try/catch – мощная обработка ошибок

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Ошибка HTTP " + response.status);
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}
fetchData();

async/await удобен в for и try/catch

const urls = ["url1", "url2", "url3"];
urls.forEach(url => {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));
});

async/await в for of

async function fetchAll(urls) {
    for (const url of urls) {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    }
}
fetchAll(["url1", "url2", "url3"]);

async/await работает с try/finally

async function fetchData() {
    try {
        console.log("Запрос данных...");
        const response = await fetch("https://api.example.com");
        const data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка:", error);
    } finally {
        console.log("Закрываем соединение...");
    }
}
fetchData();

async/await можно использовать внутри Promise.all() Иногда Promise.all() быстрее, потому что запускает промисы параллельно.

async function fetchMultiple() {
    const [user, orders] = await Promise.all([
        fetch("https://api.example.com/user").then(res => res.json()),
        fetch("https://api.example.com/orders").then(res => res.json())
    ]);

    console.log(user, orders);
}
fetchMultiple();

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

Аренда VPS/VDS-сервера. Виртуальные выделенные серверы в дата-центрах уровня Tier III — 7 готовых конфигураций от 200 ₽/мес. Преимущества аренды: - Выделенные ресурсы без переплаты; - KVM-виртуализация; - Быстрые NVMe SSD; - Соответствие 152-ФЗ, PCI DSS; - Бесплатная защита от DDoS; - Управление через панель, API и Terraform; - Техподдержка 24/7. Запустите сервер за несколько минут! Попробовать #реклама 16+ selectel.ru О рекламодателе

🤔 Как отследить изменение модели? Способы: - watch: следим за конкретным полем или выражением. - @input или @update:modelValue — события от v-model. - computed с геттером и сеттером — можно ловить изменения при записи. - emit из компонента — в родителе можно слушать события. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое массив? Это структура данных, которая представляет собой упорядоченный список элементов. В JavaScript массивы могут содержать любые типы данных: числа, строки, объекты, другие массивы и даже функции. 🚩Почему массивы нужны? Массивы помогают удобно хранить и обрабатывать наборы данных. Вместо того чтобы создавать множество переменных, можно использовать массив, чтобы хранить сразу несколько значений и работать с ними с помощью специальных методов. 🚩Как используются массивы? Массивы позволяют: Хранить несколько значений в одной переменной Перебирать элементы с помощью циклов Добавлять, удалять, изменять элементы Выполнять операции, например, сортировку и фильтрацию 🚩Как создать массив? В JavaScript массив можно создать разными способами: С использованием литерала массива

let fruits = ["яблоко", "банан", "апельсин"];

С использованием конструктора Array

let numbers = new Array(1, 2, 3, 4, 5);

🚩Как обращаться к элементам массива? Доступ к элементу массива осуществляется по индексу (начинается с 0):

let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits[0]); // "яблоко"
console.log(fruits[1]); // "банан"

🚩Основные методы работы с массивами Добавление элемента в конец push()

let arr = [1, 2, 3];
arr.push(4); 
console.log(arr); // [1, 2, 3, 4]

Удаление последнего элемента pop()

arr.pop();
console.log(arr); // [1, 2, 3]

Добавление элемента в начало unshift()

arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

Удаление первого элемента shift()

arr.shift();
console.log(arr); // [1, 2, 3]

Перебор массива forEach()

arr.forEach(item => console.log(item)); 

Фильтрация элементов filter()

let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2]

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

Кто и как смотрит контент на Connected TV? Времена меняются, а люди по-прежнему проводят вечера у телевизора — только теперь сами выбирают, что смотреть: 📊 66% переключаются между онлайн-кинотеатрами и видеоплатформами 📊 24% предпочитают только онлайн-кинотеатры 📊 10% смотрят контент исключительно на видеоплатформах Аналитики Яндекс Рекламы изучили обезличенные данные пользователей 5,8 млн устройств CTV с YaOS. В среднем пользователи проводят за просмотром контента 4 часа 11 минут в сутки. Охватить эту аудиторию помогает реклама на Connected TV. Настроить показы видео и ТВ-билбордов с умной оптимизацией можно прямо в Директе. ⚡ Запустить продвижение на CTV Перейти на сайт #реклама 16+ yandex.ru О рекламодателе

🤔 Как можно заставить Git что-то забыть? Использовать git rm --cached файл, если нужно убрать файл из индекса, но оставить на диске. Для полной очистки из истории — git filter-branch, BFG Repo-Cleaner или git reset. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое псевдоэлемент? Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML. 🚩Синтаксис Начинается с двойного двоеточия (::), за которым следует название псевдоэлемента. Например, ::before или ::after. 🟠Распространенные псевдоэлементы ::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.

    p::before {
    content: "«";
    color: blue;
  }
  
  p::after {
    content: "»";
    color: blue;
  }
  

::first-line: Применяет стили к первой строке текста в блочном элементе.

    p::first-line {
    font-weight: bold;
  }
  

::first-letter: Применяет стили к первой букве текста в блочном элементе.

    p::first-letter {
    font-size: 200%;
  }
  

::selection: Применяет стили к части текста, которую пользователь выделил.

    p::selection {
    background: yellow;
  }
  

🚩Особенности работы Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями. Чтобы псевдоэлементы ::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";). Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript. Ставь 👍 и забирай 📚 Базу знаний

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

🤔 Когда нужно использовать кнопки а когда ссылки? В веб-разработке часто возникает вопрос: использовать кнопку (<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение. 🟠Когда использовать `<button>`? Когда действие выполняется на странице без перехода на другую Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта) Отправка формы Открытие/закрытие модального окна Включение/выключение чего-то на странице Взаимодействие с JavaScript (AJAX-запросы, события)

<button onclick="alert('Нажато!')">Кликни</button>

Пример кнопки в форме:

<form>
  <input type="text" placeholder="Введите имя">
  <button type="submit">Отправить</button>
</form>

🟠Когда использовать `<a>`? Когда нужно перейти на другую страницу (или секцию сайта) Когда ссылка ведет на внешний или внутренний ресурс Навигация по сайту Переход на другую страницу Ссылки на соцсети, статьи, файлы

<a href="https://example.com">Перейти на сайт</a>

Ссылка внутри страницы (якорь)

<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>

Открытие в новом окне

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>

🟠Ошибки и неправильное использование Ошибка: использовать <button> вместо ссылки

<button onclick="window.location.href='https://example.com'">Перейти</button>

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

🤔 Какие методологии есть? Методологии в верстке и CSS: - BEM (Block Element Modifier) — строгая иерархия классов; - SMACSS — деление стилей на категории (base, layout, module, state); - OOCSS (Object-Oriented CSS) — повторное использование объектов; - Atomic CSS / Utility-first — минималистичные, многоклассовые подходы (Tailwind). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Стань спикером на форуме по Кибербезопасности! С 30 сентября по 2 октября мы собераем ИБ-сообщество, чтобы честно обсудить настоящее и будущее кибербезопасности. В этом году форум «Global Information Security Days: дни глобальной информационной безопасности» ставит новые рекорды: еще больше участников, еще масштабнее программа и еще круче экспертный состав! Чувствуете в себе силы выступить на большой сцене? У нас открыт прием заявок для спикеров. Станьте голосом GIS DAYS 2026! Подать заявку #реклама 16+ gisdays.ru О рекламодателе

🤔 Какое свойство Flexbox отвечает за направление flex items? Свойство flex-direction: - row (по горизонтали), - column (по вертикали), - и их обратные варианты (row-reverse, column-reverse). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие хуки добавляют для подключения роутера? Во Vue с Vue Router: - beforeRouteEnter — до создания компонента; - beforeRouteUpdate — при смене параметров маршрута; - beforeRouteLeave — при уходе с маршрута; Используются для логики навигации, авторизации и пр. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Запустите рекламу в телеграм-каналах через Яндекс Директ Перфоманс-реклама в мессенджере продолжает работать: • Таргетинг по тематикам и регионам • Умный подбор каналов • Гибкие модели оплаты (CPC и CPV) Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе