Основное отличие от ручного способа заключается лишь в том, что все эти процессы выполняются не на компьютерах разработчиков, а где-то там далеко на серверах GitHub или типа того, всё зависит от архитектуры вашей системы контроля версий.

Если коротко:
CI — процессы, связанные с интеграцией кода в репозиторий
CD — процессы, связанные с доставкой готовой сборки на окружение

const controller = new AbortController()

// отправляем запрос
fetch('https://.../', { signal: controller.signal })

// отменяем его
controller.abort()

useEffect(() => {
  const controller = new AbortController()

  // делаем запрос на маунт компонента
  fetch('https://.../', { signal: controller.signal })

  // отменяем запрос на анмаунт компонента
  return () => controller.abort()
}, [])

navigator.clipboard.writeText('Какой-то текст')

// нужно создать какой-то текстовый элемент 
// и установить ему необходимое значение
const textArea = document.createElement('textarea');
textArea.value = "Какой-то текст";

// убрать элемент куда-то далеко
textArea.style.position = 'absolute';
textArea.style.left = '-999999px;

// и добавить его в вёрстку
document.body.prepend(textArea);

// далее выделить наше поле ввода
textArea.select();

try {
  // и скопировать значение в буфер обмена
  document.execCommand('copy');
  console.log('Текст скопирован!');
} catch (err) {
  console.error('Не удалось скопировать текст: ', err);
}

// не забываем удалить элемент из вёрстки
textArea.remove()

if (navigator.clipboard && window.isSecureContext) {
  // используем navigator.clipboard
} else {
  // используем document.execCommand('copy')
}

Кратко:

— в современных браузерах используется браузерное API navigator.clipboard для взаимодействия с буфером
— в старых браузерах и на страницах, работающих по http, используется устаревший document.execCommand

const display = 'flex';

const Button = styled.button`
    padding: 10px;
    color: red;
    display: ${display}
`

function foo(strings, ...values) {
    let result = strings[0];
  
    values.forEach((value, index) => {
        result += value + strings[index + 1];
    });

    return result;
}

const name = "Денис"
const channel = "progway"

foo`Меня зовут ${name} и я люблю ${channel}`

Для нашего примера, strings — это:

[
"Меня зовут ",
" и я люблю ",
""
]

а values:

[
"Денис",
"progway"
]

Красиво в одной из статей на хабре описали:

Для работы с состоянием в React используются хуки useState и useReducer, но они не умеют работать с состоянием, которое "живет" за пределами React, поскольку в один момент времени доступна только одна версия внешнего состояния.

Значения внешнего состояния могут меняться со временем без ведома React, что может приводить к таким проблемам, как отображение двух разных значений для одних и тех же данных.

Статья: https://habr.com/ru/companies/timeweb/articles/720136/

const useLocalStorageState = (key: string, defaultValue?: string) => {
  const subscribe = (listener: () => void) => {
    window.addEventListener("update-local-storage", listener);
    return () => void window.removeEventListener("update-local-storage", listener);
  };

  const getSnapshot = () => localStorage.getItem(key) ?? defaultValue;

  const store = useSyncExternalStore(subscribe, getSnapshot);

  const updateStore = (newValue: string) => {
    localStorage.setItem(key, newValue);
    window.dispatchEvent(new StorageEvent("update-local-storage", { key, newValue }));
  };

  return [store, updateStore] as const;
};

const [name, setName] = useLocalStorageState("name", "progway");

WebRTC — Web Real Time Communications — стандарт, который описывает прямую передачу потоковых аудиоданных, видеоданных и контента между клиентами в режиме реального времени. На основе этого стандарта работают всякие зумы, телемосты, google meet и прочие площадки

Для реализации такого соединения в браузерах используется нативный JS класс RTCPeerConnection

p2p — peer-to-peer — это такое сетевое соединение, которое позволяет двум или более устройствам общаться между собой напрямую без сервера-посредника. Ещё такие соединения называют одноранговыми

NAT — Network Address Translation — механизм TCP/IP, который позволяет транслировать внутренние локальные IP адреса во внешние IP адреса за пределами нашего маршрутизатора (можно назвать роутером), который будет выступать в роли межсетевого экрана (файрвол)

STUN — Session Traversal Utilities for NAT (перевод "утилиты обхода сеансов для NAT") — это протокол, который позволяет каждому устройству узнать свой внешний IP адрес даже за файрволом

Клиент отправляет STUN серверу запрос, затем сервер STUN отправляет клиенту обратно информацию о том, каков внешний адрес маршрутизатора NAT, и какой порт открыт на NAT для приема входящих запросов обратно во внутреннюю сеть

Сигнальный сервер — это то, что мы можем реализовать сами на любых удобных технологиях. Тут вообще не важно как Offer, Answer и ICE Candidate будут передаваться между клиентами — REST API, сокеты... хоть голубями отправляйте

Такая односторонняя связь полезна при реализации:
— уведомлений
— обновления данных в реальном времени (цен, загрузки CPU...)
— индикатора прогресса загрузки большого файла
— даже в играх

И многих других случаях

const http = require('http');

http.createServer((req, res) => {
  if (req.url === '/stream') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    });

    setInterval(() => {
      res.write('data:  ПРИВЕТ!\n\n');
    }, 1000);
  }
}).listen(3000);

const source = EventSource('/stream')

sourse.addEventListener('message', (message) => {
  console.log(message.data)
})

Если кратко:

SSE — технология однонаправленной связи от сервера к клиенту
С помощью SSE можно обновлять данные на клиенте в рамках одного соединения в реальном времени

Array(100)

Array(100).fill(0)

Array(100).map((_, index) => index)

Ответ:
⬇️

Получится [empty × 100], а не массив индексов)

Тут дело в том, что при вызове Array(100) у нас изначально создаётся "разряженный" массив. Это когда под каждый элемент массива даже память не выделяется.

Язык просто создаёт пустую структуру с полем length в значении 100

Object.keys(Array(100)).length

[...Array(100)].map((_, index) => index)

Array.from({ length: 100 })

Array.from({ length: 100 }, () => 'привет')

const array = []

for (let i = 0; i < 100; i++) {
    array.push('progway')
}