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

REKONFA: что интересного вас ждёт 15 октября 15 октября встречаемся на REKONFA — большой конференции Яндекс Рекламы. На сцене: — Глеб Доброрадных — о рекламном рынке и эффективности в сложных условиях — Алексей Штоколов — о новых продуктах и технологиях — Лиза Смирнова — о 360°-форматах и новых точках контакта — Александр Пушной — о человеке и ИИ — Александр Умаров — о персональном подходе, который помогает влюблять клиентов в бренд — Яна Чурикова — об актуальных задачах предпринимателей — Татьяна Мужицкая — о целях и энергии — Антон Беляев — об индивидуальности и проектах, которые любят зрители Вне сцены — зона продуктов Яндекс Рекламы, три игры, викторина, зоны Яндекс Ярда и eLama и нетворкинг. 15 октября, Москва, ВТБ Арена и онлайн. Участие бесплатное. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

🤔 Что такое и как работает CI/CD? CI/CD — это процесс автоматизации: - CI (Continuous Integration) — проверка кода, тесты, сборка. - CD (Continuous Delivery/Deployment) — автоматическая доставка на сервер. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое merge и rebase, в чем отличие друг от друга? Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев. 🚩Merge (слияние) Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния. Предположим, у вас есть две ветки: main и feature. В ветке feature вы сделали несколько коммитов. Вы хотите объединить изменения из feature в main. git checkout main git merge feature 🚩Rebase (перебазирование) Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов. Предположим, у вас есть две ветки: main и feature. В ветке feature вы сделали несколько коммитов. Вы хотите перенести изменения из feature на текущий конец main. git checkout feature git rebase main 🚩Основные отличия 🟠История коммитов Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток. Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений. 🟠Коммиты слияния Merge: Создает новый коммит слияния, который объединяет изменения из двух веток. Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую. 🟠Конфликты Merge: Конфликты решаются один раз при слиянии. Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно. 🟠Применение Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе. Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master. Ставь 👍 и забирай 📚 Базу знаний

🔥 Скрытые вакансии с удаленной работой для Frontend разработчика, которые нигде больше не публикуются. Напрямую от компаний, с контактами рекрутеров. 🔹 Frontend Jobs | Вакансии 🔹 Node.js Jobs | Вакансии 🔸 Все каналы с вакансиями

Открытый урок: бизнес-логика в микросервисах Разработка в микросервисах — это не только разбиение на сервисы, но и грамотное распределение логики. 22 октября в 19:00 мск — открытый урок для разработчиков и архитекторов. Узнаете, где должна жить бизнес-логика. Запишитесь! Зарегистрироваться #реклама 16+ otus.ru О рекламодателе

🤔 Как передать данные из родительского компонента в дочерний? Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему. 🚩Шаги для передачи данных из родительского компонента в дочерний 1⃣Создание родительского компонента В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать. Затем передаем эти данные в дочерний компонент через пропсы. 2⃣Приём данных в дочернем компоненте В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий. Родительский компонент (ParentComponent.js) import React from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const message = "Привет, дочерний компонент!"; return ( <div> <h1>Родительский компонент</h1> <ChildComponent message={message} /> </div> ); } export default ParentComponent; Дочерний компонент (ChildComponent.js) import React from 'react'; function ChildComponent(props) { return ( <div> <h2>Дочерний компонент</h2> <p>{props.message}</p> </div> ); } export default ChildComponent; 🚩Пояснение 1⃣В родительском компоненте `ParentComponent`: Создаем переменную message, содержащую строку "Привет, дочерний компонент!". В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message. 2⃣В дочернем компоненте ChildComponent: Принимаем пропс message через параметр props. Используем props.message для отображения переданной строки внутри тега <p>. 🚩Дополнительные примеры Родительский компонент (ParentComponent.js) import React from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const user = { name: "Иван", age: 25 }; return ( <div> <h1>Родительский компонент</h1> <ChildComponent user={user} /> </div> ); } export default ParentComponent; Дочерний компонент (ChildComponent.js) import React from 'react'; function ChildComponent(props) { return ( <div> <h2>Дочерний компонент</h2> <p>Имя: {props.user.name}</p> <p>Возраст: {props.user.age}</p> </div> ); } export default ChildComponent; Ставь 👍 и забирай 📚 Базу знаний

🤔 Что известно про user-agent стили и способы работы с ними? User-agent стили — это базовые стили браузера. Они автоматически применяются к HTML-элементам (например, отступы у <body>). Чтобы работать с ними, часто применяют CSS reset или normalize.css. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про mobx MobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в React. Она основана на реактивности и позволяет автоматически отслеживать изменения данных, обновляя интерфейс только там, где это необходимо. 🚩Основные принципы MobX 🟠Модели данных – `observable` (наблюдаемые) MobX делает объекты реактивными, автоматически отслеживая их изменения. import { makeAutoObservable } from "mobx"; class Store { count = 0; constructor() { makeAutoObservable(this); // Автоматически делает свойства "наблюдаемыми" } increment() { this.count++; } } const store = new Store(); 🟠Экшены (`actions`) Это методы, которые изменяют состояние. store.increment(); // Увеличит count и автоматически обновит UI 🟠Компоненты подписываются на изменения – `observer` Чтобы React-компонент обновлялся при изменении данных, его нужно обернуть в observer (из mobx-react-lite). import React from "react"; import { observer } from "mobx-react-lite"; const Counter = observer(({ store }) => ( <div> <p>Счетчик: {store.count}</p> <button onClick={() => store.increment()}>+</button> </div> )); export default Counter; 🟠Компьютед-свойства (`computed`) Это вычисляемые значения, которые пересчитываются только при изменении зависимостей. class Store { count = 2; constructor() { makeAutoObservable(this); } get double() { return this.count * 2; } } const store = new Store(); console.log(store.double); // 4 store.count = 5; console.log(store.double); // 10 (пересчиталось автоматически) Ставь 👍 и забирай 📚 Базу знаний

🤔 В чём отличие amend от squash? amend заменяет последний коммит, добавляя новые изменения или меняя сообщение. squash объединяет несколько коммитов в один, используется в git rebase -i для "очистки" истории перед пушем. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Можно ли перезапустить остановленный promise? Нет, Promise в JavaScript нельзя перезапустить. Промисы являются одноразовыми: после того как они переходят в одно из состояний — выполнен (resolved) или отклонён (rejected) — их состояние больше не может измениться. Это одно из ключевых свойств промисов. 🚩Почему нельзя перезапустить Promise? Промис, как только выполняется, становится иммутабельным. После выполнения (resolve) или отклонения (reject), он остаётся в этом состоянии навсегда. Промисы предназначены для представления единственного результата асинхронной операции. Их дизайн не предполагает повторного запуска той же самой асинхронной логики. const myPromise = new Promise((resolve, reject) => { resolve('Done!'); }); myPromise.then((result) => console.log(result)); // "Done!" // Даже если вы попытаетесь вызвать resolve или reject снова, ничего не произойдет myPromise.then((result) => console.log(result)); // "Done!" (результат уже закеширован) 🚩Что делать, если нужно "перезапустить" асинхронную операцию? Если вы хотите выполнить операцию заново, вместо "перезапуска" Promise нужно создать новый Promise или использовать функцию, которая возвращает новый Promise каждый раз. function createPromise() { return new Promise((resolve, reject) => { setTimeout(() => resolve('Я новый промис!'), 1000); }); } // Первый вызов createPromise().then((result) => console.log(result)); // "Я новый промис!" // "Перезапуск" createPromise().then((result) => console.log(result)); // "Я новый промис!" (новый промис создан) 🚩Как это сделать с использованием `async/await`? Это синтаксический сахар над промисами. Если вам нужно "перезапустить" асинхронную операцию, просто вызовите асинхронную функцию ещё раз. async function fetchData() { return new Promise((resolve) => { setTimeout(() => resolve('Данные загружены!'), 1000); }); } async function main() { const data1 = await fetchData(); console.log(data1); // "Данные загружены!" const data2 = await fetchData(); // "Перезапуск" fetchData console.log(data2); // "Данные загружены!" } main(); 🚩Повторная попытка выполнения промиса (ретрай) Если вам нужно повторно попытаться выполнить операцию (например, в случае неудачи), можно реализовать "ретрай". Это особенно полезно для операций вроде сетевых запросов. function fetchDataWithRetry(retries) { return new Promise((resolve, reject) => { setTimeout(() => { if (Math.random() > 0.7) { // 70% шансов на ошибку resolve('Данные успешно загружены!'); } else { reject('Ошибка загрузки данных'); } }, 1000); }).catch((error) => { if (retries > 0) { console.log(`Повторная попытка... Осталось: ${retries}`); return fetchDataWithRetry(retries - 1); // Рекурсивный вызов } else { throw error; // Если попытки исчерпаны, выбрасываем ошибку } }); } fetchDataWithRetry(3) .then((data) => console.log(data)) .catch((error) => console.error(error)); Ставь 👍 и забирай 📚 Базу знаний