Справочник

Словарь курса

Канонический язык курса. Определения короткие — это не учебник, а шпаргалка, к которой возвращаются.

← ко всем урокам

Быстрая шпаргалка: три инструмента

Инструмент	Что это	Отвечает на вопрос	Вместо него бывает
React	библиотека интерфейса	«Из чего собираю интерфейс?»	Vue, Svelte, Angular
Vite	сборщик + dev-сервер	«Чем превратить код в сайт?»	webpack, Parcel, Rsbuild
Next.js	фреймворк поверх React	«Нужен каркас целиком?»	Remix, Astro

Сайт и приложение

Веб-сайт блок 1

Набор страниц, которые в основном показывают информацию: пользователь читает и переходит по ссылкам. Часто без входа и базы данных — проще и дешевле.

Аналогия: печатная брошюра — берёшь, читаешь, для всех одинаковая.

Веб-приложение блок 1

Программа в браузере, где пользователь действует (вводит, создаёт), а данные сохраняются и у каждого свои. Обычно нужны сервер, база данных и вход.

Аналогия: банкомат — вставляешь карту, он отвечает и помнит твой счёт.

Критерий: данные пользователя сохраняются → это приложение.

Статический сайт (static) блок 1

Страницы готовы заранее и одинаковы для всех (как напечатанная брошюра). Быстро грузятся, дёшево размещать.

Динамический (dynamic) блок 1

Содержимое собирается под запрос или под конкретного пользователя в момент захода, а не лежит готовым.

Слои стека

Frontend

Часть приложения, которая работает в браузере у пользователя: то, что он видит и с чем взаимодействует.

Избегать: «клиентская часть» как синоним сервера, «вёрстка» (это уже).

Backend

Часть, которая работает на сервере: данные, логика, безопасность. Пользователь её не видит.

Браузер

Программа у пользователя (Chrome, Safari), которая выполняет frontend-код и рисует страницу.

Сервер

Удалённый компьютер, который хранит данные и отдаёт страницы/ответы по запросу браузера.

Слой

«Этаж» приложения, отвечающий за свою задачу. React, сборщик и фреймворк — разные слои, поэтому они не конкурируют, а складываются вместе.

Языки веб-платформы

HTML (HyperText Markup Language) блок 1

Структура страницы — «что есть»: какие на ней заголовки, тексты, кнопки, поля, картинки. Узнаётся по угловым скобкам: <button>.

Аналогия: коробка дома — стены, комнаты, двери.

CSS (Cascading Style Sheets) блок 1

Оформление — «как выглядит»: цвета, шрифты, размеры, отступы, расположение. Узнаётся по свойствам в фигурных скобках: color: teal.

Аналогия: отделка дома — краска, обои, мебель, свет.

JavaScript (JS) блок 1

Поведение — «что происходит»: реакция на клик, ввод, таймер. Язык, на котором в итоге работают React, Vite и Next.js.

Аналогия: электрика и «умный дом» — щёлкнул выключатель, зажёгся свет.

Правило слоёв блок 1

Сначала структура (HTML), потом вид (CSS), потом поведение (JS). HTML живёт сам по себе; CSS и JS без HTML нечего оформлять и оживлять. Отсюда диагностика: нет элемента — вопрос к HTML; есть, но выглядит не так — к CSS; выглядит верно, но не реагирует — к JS.

DOM (Document Object Model) блок 1

Живое представление страницы в памяти браузера — дерево вложенных элементов, построенное из HTML. Именно DOM меняет JavaScript и именно его вы видите на экране.

Связь: HTML — текст-чертёж (его показывает «View source»); DOM — построенный по нему дом (его показывает «Inspect / Просмотреть элемент»).

Аналогия: чертёж → построенный дом, в котором JS двигает мебель.

Узел (node, элемент) блок 1

Одна «вещь» в дереве DOM: заголовок, кнопка, div. Вложенность задаёт отношения «родитель → потомок».

Виртуальный DOM (virtual DOM) блок 1

Лёгкая копия дерева, которую держит React: сравнивает её с реальным DOM и меняет на экране только отличия — ради скорости. Подробно — блок 4.

Инструменты и их типы

Библиотека блок 4

Готовый набор кубиков, которые вы зовёте сами, когда нужно. React — библиотека.

Избегать: путать с «фреймворком».

Фреймворк блок 4

Каркас, который задаёт структуру приложения и сам зовёт ваш код в нужные моменты. Next.js — фреймворк.

Правило различия: библиотеку зовёте вы; фреймворк зовёт вас.

Сборщик (бандлер, build tool) блок 4

Инструмент, который превращает ваши исходные файлы в то, что реально грузит браузер, и собирает версию для публикации. Vite — сборщик.

Избегать: «компилятор», «упаковщик» — допустимо, но в курсе говорим «сборщик».

Dev-сервер (сервер разработки) блок 4

Локальный сервер, запускаемый на время разработки: открываете сайт у себя и видите правки мгновенно. Это то, что стартует npm run dev.

React блок 4

Библиотека для построения интерфейса из компонентов. Сама не запускается — ей нужен сборщик (или фреймворк, который его включает).

Vite (вит) блок 4

Популярный сборщик и dev-сервер. Частый напарник React в лёгких приложениях («React + Vite»).

Next.js (некст) блок 4

Фреймворк поверх React: добавляет маршрутизацию, серверную часть и оптимизации. Имеет свой встроенный сборщик — Vite с ним отдельно не нужен.

Понятия приложения

Компонент (component) блок 4

Самостоятельный переиспользуемый кубик интерфейса (кнопка, форма, карточка), из которых React собирает экран. Объединяет разметку, логику и вид одного куска UI.

Пропсы (props, параметры компонента) блок 4

Настройки, которые передают компоненту снаружи (как аргументы функции), чтобы он показал нужное. Один компонент «Карточка» + разные пропсы = разные карточки.

SPA (Single-Page Application) блок 4

Одностраничное приложение: браузер подгружает данные на лету, не перезагружая страницу целиком. Типичный результат связки «React + Vite».

Маршрутизация (роутинг) блок 4

Правила «какой адрес → какая страница». В Next.js встроена; в голом React+Vite добавляется отдельно.

SEO

Насколько хорошо поисковики (Google) видят и индексируют ваши страницы. Один из поводов выбрать Next.js, а не SPA.

Фронтенд: состояние, типы, оформление

Состояние компонента (state) блок 4

Данные, которые компонент помнит и которые могут меняться (что ввёл пользователь, открыт ли список). См. также «Состояние» из блока 2 — здесь это механизм React.

Реактивность блок 4

Главное свойство React: меняете состояние — части экрана, которые его показывают, обновляются сами, вручную DOM трогать не нужно.

useState блок 4

Способ завести в компоненте состояние и функцию его менять. При смене значения экран перерисовывается.

Prop drilling (протаскивание пропсов) блок 4

Передача данных через много уровней пропсов — неудобно при росте. Лечится общим состоянием.

Context / стор (Zustand, Redux) блок 4

Общее состояние, доступное многим компонентам без протаскивания. Context встроен в React; стор — внешняя «центральная коробка» с данными.

TypeScript (TS) блок 4

JavaScript с типами и проверкой до запуска: ловит ошибки в редакторе и при сборке, а не у пользователя. Оправдан в серьёзных и растущих проектах.

Тип (type) блок 4

Обещание о виде данных: это число, это строка, у объекта такие-то поля. TypeScript проверяет, что обещания соблюдены.

Tailwind CSS блок 4

Фреймворк utility-классов: стиль задаётся короткими классами прямо в разметке (class="flex p-4 text-lg"), без отдельного CSS-файла.

UI-библиотека (shadcn/ui, MUI, Chakra) блок 4

Готовый набор оформленных компонентов (кнопки, формы, модалки), которые берут и используют — быстрый красивый результат без дизайнера.

Дизайн-система блок 4

Единый набор правил и компонентов для согласованного вида всех экранов.

CSR / SSR / SSG блок 4

Три режима рендеринга: CSR — страницу рисует браузер (SPA); SSR — сервер собирает HTML под каждый запрос (хорошо для SEO); SSG — страницы собраны заранее при сборке (мгновенно и дёшево).

Серверный компонент блок 4

В современном Next (App Router) — по умолчанию: выполняется на сервере, может брать данные напрямую, свой JavaScript в браузер не шлёт.

Клиентский компонент ("use client") блок 4

Компонент с директивой "use client" в начале файла: работает в браузере, нужен для интерактива — состояния, обработки кликов, ввода.

Файловая маршрутизация блок 4

В Next структура папок и файлов задаёт адреса страниц: файл/папка = маршрут (URL), вручную настраивать не нужно.

Безопасность: секреты, вход, защита

Секрет (secret) блок 5

Данные, дающие доступ: пароль базы, ключ API, токен. Не пишут в коде и не кладут в репозиторий.

Переменная окружения (.env) блок 5

Значение, заданное окружению запуска отдельно от кода. Локально хранят в файле .env, который добавляют в .gitignore.

.gitignore блок 5

Список файлов, которые git намеренно не отслеживает (чтобы, например, .env с секретами не попал в репозиторий).

Аутентификация (authentication, authn) блок 5

Подтверждение личности — «кто ты»: логин и пароль, код из СМС, вход через Google.

Авторизация (authorization, authz) блок 5

Проверка прав — «что тебе можно». Вошёл (authn) ≠ можно всё (authz); забытая проверка прав — частая дыра.

Сессия и токен (JWT) блок 5

«Пропуск», который выдают после входа, чтобы не вводить пароль на каждой странице. Сессия — сервер помнит вход; токен (JWT) — подписанный пропуск; часто хранится в куке (см. блок 2).

SSO / OAuth блок 5

Единый вход через другой сервис (например, Google) без передачи ему вашего пароля.

TLS и SSL-сертификат блок 5

Шифрование канала, на котором работает HTTPS (см. блок 1): защищает данные в пути. Сертификат подтверждает подлинность сайта и даёт «замочек».

Готовое решение входа (Clerk, Supabase, Auth0) блок 5

Сервис, берущий на себя логин, пароли, восстановление и 2FA. Безопаснее и быстрее, чем писать вход с нуля.

Валидация ввода (input validation) блок 5

Проверка всех внешних данных перед использованием. Правило: никогда не доверяй вводу; проверка на сервере обязательна.

Санитизация / экранирование блок 5

Обезвреживание ввода перед вставкой (например, в страницу), чтобы чужой текст не исполнился как код.

SQL-инъекция блок 5

Необработанный ввод попадает в запрос к базе и выполняется как команда. Лечится параметрами запроса или ORM.

XSS (cross-site scripting) блок 5

Чужой скрипт исполняется в браузере другого пользователя, потому что ввод вставили в страницу как есть. Лечится экранированием.

Как работает веб

Клиент блок 1

Устройство и браузер пользователя, которые спрашивают: шлют запросы и показывают ответ.

Связь: «клиент» = браузер + устройство; противоположность — сервер.

Запрос и ответ (request / response) блок 1

Сообщение клиента серверу («дай мне…») и ответное сообщение сервера. Так общаются все веб-приложения.

HTTP блок 1

Правила (протокол), по которым клиент и сервер обмениваются запросами и ответами.

HTTPS блок 1

Тот же HTTP, но зашифрованный (замочек в адресной строке): данные между браузером и сервером нельзя подсмотреть по дороге. Норма для любого «боевого» сайта.

HTTP-метод (глагол запроса) блок 1

Что именно браузер просит сделать: GET — принеси (чтение), POST — создай, PUT/PATCH — замени/поправь, DELETE — удали.

Правило: GET только читает; POST/PUT/PATCH/DELETE меняют данные.

Статус-код (код ответа) блок 1

Трёхзначное число в ответе сервера — чем закончился запрос. Семьи: 2xx — успех, 3xx — перенаправление, 4xx — ошибка на стороне клиента, 5xx — ошибка на стороне сервера.

Память: 4xx — «ваша» вина (404 — не найдено), 5xx — вина сервера (500 — внутренняя ошибка).

404 / 500 блок 1

404 Not Found — страница/ресурс не найдены (чаще неверный адрес). 500 Internal Server Error — сервер упал на обработке запроса. Первое чинят в ссылке/на клиенте, второе — на сервере.

DNS блок 1

Служба, переводящая имя сайта (webdev-course.gildiya7.ru) в числовой адрес сервера (IP). «Телефонная книга интернета».

URL (веб-адрес) блок 1

Полный адрес ресурса. Части: схема (https://), домен (shop.example.com), путь (/catalog/42), query (?color=red) и фрагмент (#reviews).

Аналогия: почтовый адрес — домен «кто/где», путь «что именно», query «уточнения».

Домен / путь / query / порт блок 1

Домен — «кто» (какой сервер). Путь — «что» (какая страница/ресурс). Query (?ключ=значение) — «как / с какими параметрами». Порт — номер «двери» на сервере: в проде скрыт, в разработке виден (localhost:3000).

Рендеринг (отрисовка) блок 1

Превращение присланных файлов (HTML/CSS/JS) в видимую страницу. Бывает в браузере или заранее на сервере (см. SSR, блок 4).

База данных (БД) блок 1

Место на стороне сервера, где данные хранятся надолго и переживают перезагрузку. Подробно — блок 2.

Избегать: путать с «состоянием» (временные данные в памяти браузера).

Этап сборки (build time) блок 1

Момент превращения исходников в готовые файлы — до запуска приложения, один раз при выкладке.

Время работы (runtime) блок 1

Когда приложение уже запущено и им пользуются. Противопоставляется этапу сборки: «работает локально, ломается на проде» часто про разницу этих моментов.

Где живут данные

Состояние (state) блок 2

Данные, которые приложение держит в памяти прямо сейчас, пока работает: что на экране, что введено в форму, кто вошёл. Живёт в оперативной памяти и по умолчанию исчезает при перезагрузке.

Аналогия: бумаги на рабочем столе — под рукой, но вечером их сметают.

Избегать: путать с базой данных (постоянное хранилище на сервере).

Оперативная память (RAM) блок 2

Быстрая временная память устройства; её содержимое стирается при перезагрузке или закрытии вкладки. Здесь живёт состояние.

localStorage (локальное хранилище) блок 2

Хранилище «ключ–значение» в браузере. Переживает перезагрузку и закрытие, лежит на устройстве пользователя, на сервер само не уходит. Для настроек, темы, черновиков.

Избегать: хранить здесь секреты и токены — их легко прочитать скриптом на странице.

sessionStorage блок 2

Как localStorage, но стирается при закрытии вкладки.

Cookie (кука) блок 2

Маленький фрагмент данных (обычно до 4 КБ), который браузер автоматически прикладывает к каждому запросу к серверу. Главное применение — узнавать вошедшего пользователя (сессия).

Аналогия: пропуск в кармане — показываешь охраннику-серверу на каждом входе.

IndexedDB блок 2

Встроенная в браузер база для больших объёмов данных на устройстве (вместительнее и сложнее localStorage).

База данных (database, БД) блок 2

Программа-хранилище на сервере: данные живут надолго, одни для всех пользователей, с быстрым поиском и бэкапами. Самый надёжный из трёх уровней хранения.

Аналогия: центральный склад под охраной и с описью.

СУБД (DBMS) блок 2

Система, которая управляет базой данных: PostgreSQL, MySQL, MongoDB.

SQL / реляционная база блок 2

База, где данные лежат в связанных таблицах со строгой структурой (схемой); язык запросов — SQL. Примеры: PostgreSQL, MySQL, SQLite. Разумный дефолт для структурированных связанных данных.

Аналогия: листы Excel со ссылками друг на друга.

NoSQL блок 2

Базы с гибкой структурой: документные (MongoDB), «ключ–значение» (Redis) и другие. Берут под конкретные задачи — неоднородные данные или большой масштаб.

Избегать: думать «NoSQL всегда современнее»; выбор зависит от данных.

Схема (schema) блок 2

Описание структуры данных: какие поля, какого типа, что обязательно. У реляционных баз задаётся заранее.

Модель данных блок 2

Чертёж данных приложения: какие есть сущности, их поля и как они связаны. То, на что заказчик влияет сильнее всего.

Сущность (entity) блок 2

Тип объекта в системе: пользователь, заказ, товар. Обычно соответствует таблице в базе.

Связь (relationship) блок 2

Отношение между сущностями: один-ко-многим (у пользователя много заказов), многие-ко-многим (студенты и курсы), один-к-одному.

ORM (Object-Relational Mapping) блок 2

Инструмент-«переводчик» между объектами в коде и таблицами базы: агент описывает модели, ORM создаёт таблицы и генерирует запросы вместо ручного SQL. Примеры: Prisma, Drizzle.

Аналогия: переводчик между вами и кладовщиком-базой.

Миграция (migration) блок 2

Управляемое изменение структуры базы под обновлённую модель (добавить поле/таблицу). На проде требует аккуратности.

Избегать: путать с «переездом на другой сервер».

Персистентность (persistence) блок 2

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

Бэкап (backup) блок 2

Резервная копия базы, чтобы восстановить данные после сбоя или ошибочной миграции.

Кэш (cache) блок 2

Временно сохранённая копия данных ради скорости. Иногда показывает устаревшее — частая причина «обновил, а вижу старое».

Как приложения общаются

API (Application Programming Interface) блок 3

Набор правил, по которым одна программа обращается к другой. В отличие от сайта (он для людей), API — для программ; в ответ присылает данные.

Аналогия: здание с окошками — у каждого своя задача.

Эндпоинт (endpoint) блок 3

Конкретный адрес API под определённую операцию (/users/42). «Окошко», куда шлёшь запрос за конкретной вещью.

JSON (JavaScript Object Notation) блок 3

Текстовый формат обмена данными: пары «ключ: значение», списки [ ], вложенные объекты { }. На нём отвечает почти любое API.

Аналогия: заполненная анкета с подписанными полями.

Парсинг (parse) блок 3

Превращение JSON-текста в объект, с которым работает программа («распарсить ответ»).

REST / RESTful блок 3

Самый распространённый стиль API: данные как ресурсы по своим URL, действия — через HTTP-методы (GET/POST/PUT/DELETE), результат — статус-код. Даёт предсказуемость.

Аналогия: единый порядок во всех филиалах библиотеки.

Ресурс (resource) блок 3

Сущность, доступная по своему URL в REST-API (товар, пользователь): /products/42.

API-ключ (API key) блок 3

Секретный «пропуск», по которому чужой сервис узнаёт и тарифицирует тебя. Хранить как пароль, не светить в браузере, коде и git (подробно — блок 5).

Rate limit (лимит запросов) блок 3

Ограничение, сколько запросов к API можно сделать за период. Превышение → ответ 429 Too Many Requests. Часто связано со стоимостью вызовов.

Вебхук (webhook) блок 3

«API наоборот»: чужой сервис сам шлёт запрос на твой эндпоинт, когда случается событие (например, оплата прошла).

Аналогия: «вам перезвонят, когда будет готово».

CORS (Cross-Origin Resource Sharing) блок 3

Правило безопасности браузера: он блокирует запрос со страницы на чужой домен, если тот не разрешил. Типовая ошибка «CORS blocked»; обычный фикс — звать чужой API со своего сервера.

Связь: важно «где выполняется код» — напрямую из браузера нельзя, с сервера можно.

Доставка: как приложение попадает в интернет

Среда разработки (development, dev) блок 6

Где приложение пишут и проверяют — обычно на вашем компьютере (localhost). Можно ломать, видны подробные ошибки.

Продакшн (production, prod) блок 6

Боевая версия в интернете для реальных людей. «Локально работает, на проде нет» — чаще всего разница сред: другой ключ, база или забытая prod-переменная.

Staging (предпрод) блок 6

Промежуточная копия прода для финальной проверки перед выкладкой.

Хостинг (hosting) блок 6

Место, где приложение работает и откуда отдаётся пользователям.

Статический хостинг блок 6

Раздаёт только готовые файлы (HTML/CSS/JS) без своего сервера — дёшево и быстро (Vercel, Netlify, GitHub Pages).

Serverless («бессерверный») блок 6

Код запускается по запросу как функция; платите за вызовы, масштабируется сам (AWS Lambda, Vercel Functions). Сервер есть — просто им управляете не вы.

Managed-база (хостинг БД) блок 6

Боевая база под ключ: провайдер хранит данные, делает бэкапы и держит её доступной (Supabase, Neon). Подключение — это секрет (см. блок 5).

A-запись / CNAME (DNS-записи) блок 6

Указывают, куда вести домен: A-запись — домен → IP-адрес; CNAME — домен → другой домен. Изменения DNS расходятся не мгновенно («ещё не прописался»). См. также: Домен и DNS (блок 1), SSL-сертификат (блок 5).

CI/CD (continuous integration / delivery) блок 6

Автоматический конвейер от кода до прода: CI собирает проект и прогоняет проверки при каждом изменении, CD выкладывает прошедшую версию (например, по пушу в main). Инструмент: GitHub Actions.

Пайплайн (pipeline) блок 6

Последовательность шагов конвейера сборки и доставки. «Пайплайн упал» — шаг дал ошибку, выкладки не будет, пока не починят.

Логи (logs) блок 6

Записи о происходящем в приложении (запросы, ошибки, события). Первое место, куда смотрят при сбое на проде: «что в логах?».

Мониторинг и алерты блок 6

Наблюдение за здоровьем приложения (доступность, скорость, частота ошибок) и оповещения, которые сами сообщают о проблеме (Sentry, метрики хостинга).

Работа с агентом и ремесло

Git (система контроля версий) блок 7

Хранит историю изменений кода, чтобы вернуться к любой прошлой версии. Делает эксперименты безопасными — если коммитить.

Коммит (commit) блок 7

Сохранённая точка-снимок проекта с коротким описанием. Как «сохранение» в игре, к которому можно вернуться.

Ветка (branch) блок 7

Параллельная линия работы: пробуете новое, не трогая рабочую версию; не вышло — выбросили.

GitHub блок 7

Онлайн-хранилище репозитория: копия истории в облаке плюс совместная работа.

Необратимое действие блок 7

То, что откат кода НЕ отменит: удалённые данные в боевой базе, отправленные письма, проведённые платежи. Git хранит код, а не внешние действия.

Зависимость (dependency) блок 7

Чужой готовый код (пакет, библиотека), который использует проект, чтобы не писать всё с нуля.

npm (менеджер пакетов) блок 7

Каталог и менеджер пакетов для Node.js и JavaScript: откуда их ставят. Аналоги — yarn, pnpm.

package.json блок 7

«Опись» проекта: список зависимостей с версиями и команд. По нему ставят ровно тот же набор. node_modules — папка скачанных пакетов, в гите не хранится.

Версия (пакета) блок 7

Номер выпуска (например, 4.2.1). Обновление обычно улучшает, но может оказаться несовместимым и что-то сломать («конфликт версий»).

Консоль (Console, DevTools) блок 7

Место в инструментах разработчика браузера (F12), где видны ошибки фронтенда. Первое, куда смотреть при сбое в браузере.

Network (вкладка «Сеть») блок 7

Список запросов к серверу и их статус-коды (см. блок 1): видно, какой запрос упал и что вернул.

Баг-репорт блок 7

Описание проблемы для агента: что делал, что ожидал, что произошло, и доказательства (текст ошибки, статус, скриншот). Лучше, чем «не работает».

Воспроизведение (repro) блок 7

Последовательность шагов, стабильно повторяющая баг. Баг «всегда» или «иногда» — ищут по-разному.

ТЗ (техническое задание) блок 7

Что нужно, зачем и в каких границах. Чем точнее — тем меньше «агент сделал не то».

Критерии приёмки (acceptance criteria) блок 7

Проверяемый список «готово, если…». По нему принимают результат, а не «на глаз».

Тест (test) блок 7

Код, который сам проверяет нужное поведение. По сути — критерии приёмки, проверяемые автоматически после каждой правки.

Регрессия (regression) блок 7

Когда новая правка ломает то, что раньше работало. Именно это и ловят автотесты.