Reading Code You Did Not Write

Скачайте код своего прототипа (все инструменты умеют экспорт в GitHub) и откройте его в редакторе. Не пытайтесь читать подряд — стройте карту. Для типового сгенерированного проекта на React или Next.js достаточно четырёх остановок.

Первая — package.json в корне. Секция dependencies — это список технологий проекта: увидели react — интерфейс на React, @supabase/supabase-js — база Supabase, tailwindcss — стили. Секция scripts — как проект запускать: почти всегда dev для локального запуска и build для сборки.

Вторая — структура папок. Типовая картина:

src/
  components/   — кусочки интерфейса (кнопки, карточки, формы)
  pages/ или app/ — экраны, каждый файл = адрес в браузере
  lib/ или utils/ — вспомогательный код, подключение к базе
  hooks/        — переиспользуемая логика React

Третья — точка входа: src/main.tsx, src/App.tsx или app/layout.tsx. Отсюда видно, какие провайдеры оборачивают приложение: роутер, тема, клиент базы.

Четвёртая — роуты. В Next.js App Router адреса совпадают со структурой папок: app/habits/page.tsx — это страница /habits. В React-проектах ищите файл с createBrowserRouter или компонентом Routes.

Пятнадцать минут на четыре остановки — и у вас есть карта: что за технологии, где экраны, где логика, где база. Этого достаточно, чтобы не блуждать.

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

Начните с экрана: найдите компонент страницы (например, app/habits/page.tsx) и в нём — кнопку отметки. У кнопки есть обработчик, обычно onClick. Идите по цепочке вызовов: обработчик вызывает функцию, функция — запрос к базе. В сгенерированном коде с Supabase конец цепочки выглядит так:

const { error } = await supabase
  .from('checkins')
  .insert({ habit_id: habitId, done_on: today });

Читается почти как английский: в таблицу checkins вставить строку с идентификатором привычки и датой. Не нужно понимать каждый символ — достаточно видеть глаголы: from — из какой таблицы, select — прочитать, insert — добавить, update — изменить, delete — удалить, eq — фильтр «равно».

Два практических приёма ускоряют трассировку. Первый — глобальный поиск по проекту (Cmd/Ctrl+Shift+F): ищите текст с кнопки («Отметить») — найдёте компонент; ищите имя таблицы («checkins») — найдёте все места, где её читают и пишут. Второй — «где это используется»: клик правой кнопкой по имени функции в редакторе, «Find All References».

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

Самый быстрый способ разобраться в сгенерированном коде — спросить того, кто его сгенерировал. Полезные промпты-шаблоны: «объясни файл app/habits/page.tsx по блокам, для новичка»; «нарисуй текстом путь данных: что происходит от нажатия кнопки Отметить до появления записи в базе»; «какие таблицы есть в базе, какие у них поля и кто на них ссылается»; «что сломается, если я удалю функцию calcStreak».

Одно критическое правило: агент может уверенно ошибаться. Модель отвечает правдоподобно, а не гарантированно точно — она может описать код, которого нет, или пропустить важный побочный эффект. Поэтому каждое объяснение проверяйте по самому коду: агент говорит «отметки сохраняются в таблицу checkins» — откройте код и найдите этот insert глазами; говорит «удалять функцию безопасно» — сделайте глобальный поиск её имени и убедитесь, что вызовов действительно нет.

Хорошая привычка — просить агента указывать точные места: «в ответе ссылайся на конкретные файлы и строки». Тогда проверка занимает секунды: открыл файл, посмотрел, совпало.

И ещё один сильный приём — просить объяснение с позиции риска: «прочитай lib/supabase.ts и скажи, что здесь может быть небезопасно или хрупко». Такой промпт часто вскрывает то, о чём вы не догадались бы спросить: ключи в коде, отсутствие обработки ошибок, запросы без фильтра по пользователю. Это мост к следующему уроку — про безопасность.

Читая vibed-код, держите в голове короткий список красных флагов — их видно даже без глубоких знаний.

• Секреты в коде. Строки вида sk-..., eyJ... или password прямо в файлах. Особенно опасно всё, что лежит в клиентских файлах — это попадает в браузер каждого пользователя.
• Пустые catch. Ошибка проглатывается молча, и приложение «просто не работает» без следов:

try {
  await saveCheckin(habitId);
} catch (e) {
  // тишина — пользователь никогда не узнает, что сохранение не удалось
}

• Дублирование. Один и тот же блок логики скопирован в три компонента с мелкими отличиями. Агент любит копировать вместо переиспользования; баг потом чинится в одном месте из трёх.
• Запрос в цикле. await внутри for по списку записей — верный кандидат на проблему N+1, о которой подробно поговорим в уроке про рефакторинг.
• Файлы-гиганты. Компонент на 500+ строк, где смешаны запросы, логика и вёрстка. Работает, но любое изменение в нём рискованно.
• Мёртвый код и TODO. Закомментированные блоки, // TODO: fix later, неиспользуемые функции — следы прошлых циклов агента.

Найденный флаг — не повод паниковать и не задача «исправить всё сейчас». Заведите файл TECH_DEBT.md и записывайте находки: файл, строка, что не так. Этот список станет планом работ для уроков про безопасность и рефакторинг.