Справочник

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

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

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

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

Веб-сайт блок 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 с ним отдельно не нужен.

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

Компонент подробно — блок 4

Переиспользуемый кубик интерфейса (кнопка, форма, карточка), из которых React собирает экран.

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

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

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

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

SEO

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

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

Клиент блок 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

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