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

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

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

🔥 Осталось 3 дня! Пожизненный easyoffer PRO по цене одного года. Покупаешь один раз – пользуешься всю жизнь. Что входит в PRO: – Вопросы и задачи с реальных собеседований в конкретных компаниях – Лучшие ответы и видео-примеры от middle/senior специалистов – Записи реальных собеседований – Обход фильтров ATS с топ-30 ключевых слов в резюме – Автоотклики на hh – Тренажёры и симуляторы для идеальной подготовки к интервью ⏳ Акция действует только до 2 сентября 23:59 по МСК 👉 Забрать PRO со скидкой 70%: https://easyoffer.ru/pro

🤔 Какие используешь подходы для написания приложения которую проще поддерживать, чем делать первоначальную разработку? При разработке frontend-приложений, которые в будущем будет проще поддерживать и масштабировать, я придерживаюсь ряда ключевых подходов. 🟠Разделение ответственности (Separation of Concerns) Это значит, что код должен быть разделен по зонам ответственности. В frontend-разработке это проявляется в: Чистом разделении логики, представления и данных (например, с помощью архитектуры MVC, MVVM или FLUX). Использовании компонентов в React/Vue или шаблонов в Angular. Разделении CSS, JS и HTML, либо использовании методологий, где стили хранятся рядом с компонентом (CSS Modules, Styled Components). Вместо того, чтобы писать всю логику и разметку в одном файле: function App() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>Count: {count}</button>; } Я разделяю бизнес-логику и представление // CounterLogic.js export function useCounter() { const [count, setCount] = useState(0); const increment = () => setCount(count + 1); return { count, increment }; } // Counter.js import { useCounter } from "./CounterLogic"; function Counter() { const { count, increment } = useCounter(); return <button onClick={increment}>Count: {count}</button>; } 🟠Компонентный подход и повторное использование кода Frontend-приложения должны строиться из переиспользуемых и изолированных компонентов. Это уменьшает дублирование кода и делает его понятным. // Button.js (переиспользуемый компонент) function Button({ onClick, children }) { return <button onClick={onClick}>{children}</button>; } // Counter.js (использует Button) function Counter() { const [count, setCount] = useState(0); return <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>; } 🟠Чистый код и читаемость Код должен быть понятным не только мне, но и другим разработчикам. Понятные имена переменных и функций. Вместо x → userAge, вместо doSmth() → calculateTotalPrice(). Меньше вложенности. Вместо кучи if и else, лучше использовать early return. Разбиение кода на модули. Один файл = одна зона ответственности. function getDiscountedPrice(price, discount) { if (discount <= 0) return price; return price - price * (discount / 100); } 🟠Состояние приложения: локальное vs глобальное В зависимости от сложности приложения нужно правильно управлять состоянием: Локальное состояние – useState (React), ref (Vue) для простых данных внутри компонента. Глобальное состояние – Redux, MobX, Zustand, Pinia, Context API – когда данные нужны многим компонентам. Серверное состояние – React Query, SWR – когда данные приходят с API и их нужно кешировать. 🟠Следование принципам SOLID и DRY DRY (Don't Repeat Yourself) – не повторяем код, используем функции, хуки, компоненты. SOLID – например, принцип единственной ответственности (Single Responsibility Principle) гласит, что каждый компонент или функция должны решать только одну задачу. function sendEmailAndSaveToDB(user) { sendEmail(user.email); saveUserToDatabase(user); } Лучше разделить логику function sendEmail(email) { /* отправка письма */ } function saveUserToDatabase(user) { /* сохранение в БД */ } function registerUser(user) { sendEmail(user.email); saveUserToDatabase(user); } 🟠Использование TypeScript TypeScript помогает избежать ошибок и делать код предсказуемым. type User = { id: number; name: string; }; function getUserName(user: User): string { return user.name; } 🟠Документация и кодстайл ESLint + Prettier → автоформатирование и проверка стиля. JSDoc/TypeScript → документация функций и типов данных. Storybook → для документирования UI-компонентов. Ставь 👍 и забирай 📚 Базу знаний

Яндекс Музыка до 360 дней бесплатно Яндекс Музыка для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс. Попробуйте бесплатно❤️ Слушать #реклама 18+ music.yandex.ru О рекламодателе

🤔 Какие достоинства у инкрементального DOM против виртуального? Инкрементальный DOM (например, в Svelte): - Менее абстрактен — ближе к реальному DOM. - Быстрее монтируется — нет необходимости в полной виртуальной копии. - Меньше памяти и меньше промежуточных структур. В отличие от виртуального DOM: - он не сравнивает деревья, а прямо вставляет нужные изменения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Услуги дата-центра в Москве Размещение и аренда серверного оборудования в дата-центре. 👍 4 современных дата-центра в Москве. 👍 Лицензированный оператор связи. 👍 Индивидуальные конфигурации выделенных серверов под задачи клиента. 👍 Круглосуточная техническая поддержка в Телеграм, без ботов. Узнать цену #реклама 16+ itsoft.ru О рекламодателе

🤔 Как мы будем через js анимировать что либо? В JavaScript есть три основных способа создания анимаций: CSS-анимации (transition, @keyframes) + изменение классов через JS Метод requestAnimationFrame() Использование библиотек (GSAP, Anime.js, Velocity.js) 🟠CSS-анимации + управление через JS Самый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы. <button onclick="toggleBox()">Анимировать</button> <div id="box"></div> <style> #box { width: 100px; height: 100px; background: red; transition: transform 0.5s ease-in-out; } .move { transform: translateX(200px); } </style> <script> function toggleBox() { document.getElementById("box").classList.toggle("move"); } </script> 🟠`requestAnimationFrame()` — лучший способ в чистом JS Если нужно более гибкое управление анимацией, используем requestAnimationFrame(). <button onclick="startAnimation()">Старт</button> <div id="box"></div> <style> #box { width: 50px; height: 50px; background: blue; position: absolute; } </style> <script> let position = 0; let animationId; function animate() { position += 5; // Двигаем на 5px за кадр document.getElementById("box").style.transform = `translateX(${position}px)`; if (position < 300) { // Останавливаем, когда достигнет 300px animationId = requestAnimationFrame(animate); } } function startAnimation() { cancelAnimationFrame(animationId); // Останавливаем предыдущую анимацию position = 0; animate(); } </script> 🟠Библиотеки (GSAP, Anime.js, Velocity.js) Если нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку. <button onclick="animateBox()">Анимировать</button> <div id="box"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script> function animateBox() { gsap.to("#box", { x: 300, rotation: 360, duration: 2, ease: "elastic.out(1,0.3)" }); } </script> Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое нечистая функция? Нечистая функция — функция, которая: - Имеет побочные эффекты (запросы, изменения внешнего состояния). - Может возвращать разные результаты при одних и тех же входных данных. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что можешь рассказать об version? version (версия) – это числовой или текстовый идентификатор, который используется для обозначения определённого состояния кода, программы, библиотеки или API. Версия помогает понимать, какие изменения были внесены, и совместима ли текущая версия с предыдущими. 🟠Семантическое версионирование (SemVer) Наиболее распространённый стандарт версионирования – SemVer (Semantic Versioning). Он использует формат MAJOR.MINOR.PATCH Пример в package.json (Node.js-проекты): { "name": "my-app", "version": "1.2.3" } Команда для обновления версии в package.json npm version major # 2.0.0 npm version minor # 1.3.0 npm version patch # 1.2.4 🟠Версионирование API При работе с REST API или GraphQL API тоже используют версии, чтобы не ломать старые клиенты. https://api.example.com/v1/users https://api.example.com/v2/users 🟠Версионирование в Git В Git версиями называют теги (tags), привязанные к коммитам. git tag v1.0.0 git push origin v1.0.0 Чтобы посмотреть все версии git tag Ставь 👍 и забирай 📚 Базу знаний