🤔 В чём отличие amend от squash?

amend заменяет последний коммит, добавляя новые изменения или меняя сообщение.
squash объединяет несколько коммитов в один, используется в git rebase -i для "очистки" истории перед пушем.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Расскажи про 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 (пересчиталось автоматически)

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

🤔 Что известно про user-agent стили и способы работы с ними?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как передать данные из родительского компонента в дочерний?

Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в 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;

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

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

🔹 Frontend Jobs | Вакансии
🔹 Node.js Jobs | Вакансии

🔸 Все каналы с вакансиями

🤔 Что такое 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.

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

🤔 Что такое и как работает CI/CD?

CI/CD — это процесс автоматизации:
- CI (Continuous Integration) — проверка кода, тесты, сборка.
- CD (Continuous Delivery/Deployment) — автоматическая доставка на сервер.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Зачем нужен 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";
}

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

🤔 Зачем нужен eslint?

ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода.

🚩Почему ESLint полезен?
Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить.

🚩Проблемы без ESLint

Разные стили написания кода
Пропущенные точки с запятой или лишние пробелы
Неиспользуемые переменные
Ошибки, которые не выявляются во время компиляции (например, undefined переменные)

🚩Решение с ESLint:

Автоматически находит ошибки и предупреждения
Подсказывает лучшие практики
Поддерживает кастомные правила
Работает в IDE и CI/CD (автоматическая проверка)

🟠Как ESLint работает?
ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку.

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("John")

Пример исправленного кода (ESLint fix)

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

sayHello("John");

🟠Как установить и настроить ESLint?
Установка

npm install eslint --save-dev

Создание конфига

npx eslint --init

Пример .eslintrc.js (настройки ESLint)

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    "eslint:recommended", // Базовые рекомендации
    "plugin:vue/vue3-recommended" // Рекомендации для Vue
  ],
  rules: {
    "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных
    "semi": ["error", "always"], // Обязательные точки с запятой
    "quotes": ["error", "double"], // Только двойные кавычки
  },
};

Запуск проверки кода

npx eslint myfile.js

Автоматическое исправление ошибок

npx eslint myfile.js --fix

🟠ESLint в IDE (VS Code, WebStorm)
Чтобы ESLint работал в VS Code, установите расширение ESLint и включите "editor.codeActionsOnSave"

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

🟠ESLint в CI/CD (автоматическая проверка на сервере)
В проектах ESLint можно запускать в GitHub Actions, Jenkins, GitLab CI и других CI/CD системах, чтобы не допускать ошибок в main ветку.

"scripts": {
  "lint": "eslint src --fix"
}

Теперь перед коммитом можно запускать:

npm run lint

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

🤔 Что такое git-flow?

Это рабочая модель ветвления, предложенная Винсентом Дриссеном в 2010 году. Эта модель определяет строгий набор правил для создания веток и их слияния, что помогает более организованно управлять процессом разработки, особенно в условиях, когда над проектом работает много людей. Он предназначен для упрощения процесса выпуска новых версий программного обеспечения и обеспечения стабильности кодовой базы.

🚩Основные ветки

🟠master
Содержит стабильную версию кода, готовую к выпуску (release).
🟠develop
Основная ветка для разработки, содержит последние изменения кода для следующего выпуска.

🚩Вспомогательные ветки

🟠feature
Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop.

🟠release
Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop.

🟠hotfix
Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop.

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