Пояснения к практической работе

Инструкция по запуску

• Part 1: открыть index.html через удобный браузер
• Part 2 & 3: выполнить npm install & npm run dev из корня проекта

Доступность (accessibility) ❓

Я добавил <label for="…"> для всех полей, чтобы связать подписи с инпутами. Кнопка «Показать/Скрыть пароль» имеет aria-pressed и меняет aria-label при клике. Для динамического текста (ошибки/успех) использовал <p aria-live="polite">, чтобы скринридеры читали новые сообщения. Также прописал чёткие :focus-стили, чтобы было видно фокус при навигации с клавиатуры.

Обоснование подхода к вёрстке ❓

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

Выбор брейкпоинтов ❓

• ≤768px (планшет): Этот порог часто используют для перехода с десктопа на планшет, поэтому при 768px меняется направление соцкнопок и растягивается форма.
• ≤480px (мобильный): Это примерно ширина смартфонов, там ещё уменьшаю шрифты и возвращаю соцкнопки в колонку.

Хранение данных (localStorage vs sessionStorage) ❓

Если отмечена галочка «Keep me logged in», я сохраняю email и пароль в localStorage, чтобы после закрытия браузера они остались. Если не отмечена — в sessionStorage, чтобы данные удалялись при закрытии вкладки. Так показал разницу между долгосрочным и сессионным хранением.

Стрелочные и именованные функции ❓

• Стрелочные (например, const showMessage = (…) => {…}) я использую для мелких утилитарных функций и коллбэков, потому что синтаксис короче и не нужен свой this.
• Именованные (например, function handleFormSubmit(e) {…}) применил для более крупных блоков логики, чтобы было понятнее по названию, и они хойстятся, то есть их можно вызывать до объявления.

Выбор пакет-менеджера ❓

Я использую npm, потому что он по умолчанию идёт вместе с Node.js и не требует доп. установки.

Объяснение конфигурации tsconfig.json ❓

1. "strict": true" включает все строгие проверки (noImplicitAny, strictNullChecks и т. д.), чтобы ловить как можно больше проблем на этапе компиляции.
2. "target": "ES2020" — современные браузеры уже поддерживают большинство ES-фич, а Vite при необходимости дополнительно транспилирует.
3. "module": "ESNext" и "moduleResolution": "node" нужны для корректной работы с Vite (он ожидает ES-модули).
4. "isolatedModules": true" — обязательно для ts-jest (мы будем тестировать напрямую TypeScript) и для Vite, который обрабатывает каждый файл изолированно.
5. "outDir": "dist" и "rootDir": "src" — чтобы ясно разделять исходники и результат сборки.
6. Исключаем папки native/, node_modules/ и dist/.

Объяснение выбора сборщика ❓

1. Моментальный старт: никаких тысяч строк конфигурации Webpack.
2. HMR (Hot Module Replacement) работает очень быстро, особенно на TypeScript.
3. Простая настройка для HTML + CSS + TS.
4. Встроенный dev-сервер.
5. Лёгче, чем Webpack.

Почему такая конфигурация линтера ❓

1. Базовый набор правил eslint:recommended покрывает ошибки JavaScript.
2. plugin:@typescript-eslint/recommended добавляет TS-специфичные проверки.
3. Расширение prettier отключает конфликты между ESLint и Prettier (чтобы форматтер не ругался на правила линтера).

Почему такая конфигурация форматера❓

1. singleQuote: true — сразу используем одинарные кавычки.
2. printWidth: 80 — классическая граница ширины строки, чтобы код был более читаем.
3. trailingComma: "es5" — добавляем запятую там, где ECMAScript 5 поддерживает, что упрощает добавление новых полей/элементов.
4. Остальные настройки по умолчанию: табы = две пробелы, точка-запятая в конце, избегаем лишних скобок в стрелочных функциях.

Объяснение выбора фреймворка тестов и конфигурации ❓

1. Jest — самый популярный фреймворк для юнит-тестов в JS/TS, имеет простой синтаксис (describe/it/expect).
2. ts-jest позволяет запускать .ts-тесты «на лету», без предварительной сборки в JS.
3. testEnvironment: 'jsdom' даёт возможность тестировать код, который обращается к DOM (например, функции, манипулирующие полями формы).
4. Собираем покрытие (collectCoverage: true), чтобы видеть, какие строки/функции покрыты тестами.
5. moduleNameMapper настраивает alias src/…, если вы хотите именованные импорты (например, import { foo } from 'src/utils';), но в нашем случае мы просто используем относительные пути.

Объяснение выбора фреймворка ❓

React является наиболее популярным выбором из React/Vue/Angular и имеет большое коммьюнити разработчиков.

Объяснение выбора стейт менеджера ❓

Zustand - мал по размеру и прост с точки зрения синтаксиса и количества кода для работы с ним.