Задания к курсу Full-Stack JavaScript Разработки

Добро пожаловать в раздел практических заданий! Эти задания разработаны для

того, чтобы помочь вам закрепить теоретические знания, полученные в основном
курсе, и развить практические навыки, необходимые для становления полноценным
Full-Stack JavaScript разработчиком. Каждое задание направлено на отработку
конкретных концепций и технологий, рассмотренных в соответствующих главах.
Как выполнять задания:
1. Внимательно прочитайте условие: Убедитесь, что вы полностью понимаете, что
от вас требуется.
2. Используйте полученные знания: Применяйте концепции, примеры кода и
лучшие практики, описанные в основном курсе.
3. Не бойтесь экспериментировать: Попробуйте разные подходы, если что-то не
получается с первого раза.
4. Проверяйте свои решения: После выполнения задания, если это возможно,
протестируйте свой код.
5. Сравните с ответами: После того как вы закончите задание и проверите его, вы
можете свериться с файлом ответов, чтобы увидеть одно из возможных решений.
Помните, что часто существует несколько способов решения одной и той же
задачи.
Удачи в обучении и кодировании!

Глава 1: Основы JavaScript и [Link]

Задание 1.1: Работа с переменными и типами данных
Цель: Закрепить понимание основных типов данных и работы с переменными в
JavaScript.
Описание:
 1. Создайте новый JavaScript-файл (например, chapter1_exercises.js ).
2. Объявите переменную name и присвойте ей ваше имя (строка).
3. Объявите переменную age и присвойте ей ваш возраст (число).
4. Объявите переменную isStudent и присвойте ей булево значение, указывающее,
являетесь ли вы студентом.
5. Объявите переменную hobbies и присвойте ей массив из 3-5 ваших хобби.
6. Объявите переменную address и присвойте ей объект, содержащий свойства
street , city , zipCode .
7. Используя [Link]() , выведите в консоль:
• Тип каждой из объявленных переменных.
• Значение каждой переменной.
• Второй элемент массива hobbies .
• Значение свойства city из объекта address .

Задание 1.2: Условные операторы и циклы

Цель: Практика использования условных операторов ( if/else , switch ) и циклов ( for ,
while ).
Описание:
1. В том же файле chapter1_exercises.js :
2. Напишите функцию checkAge(age) , которая принимает возраст в качестве
аргумента.
• Если возраст меньше 18, выведите в консоль: "Вы несовершеннолетний."
• Если возраст от 18 до 65 (включительно), выведите: "Вы взрослый."
• В противном случае выведите: "Вы пенсионер."
3. Вызовите функцию checkAge с разными значениями возраста (например, 15, 30,
70).
4. Напишите цикл for , который выводит числа от 1 до 10 в консоль.
5. Напишите цикл while , который выводит четные числа от 2 до 20 в консоль.
Задание 1.3: Функции и стрелочные функции
Цель: Понимание объявления и использования функций, включая стрелочные
функции.
Описание:
1. В том же файле chapter1_exercises.js :
2. Создайте обычную функцию add(a, b) , которая принимает два числа и
возвращает их сумму.
3. Создайте стрелочную функцию multiply(a, b) , которая принимает два числа и
возвращает их произведение.
4. Создайте стрелочную функцию greet(name) , которая принимает имя и
возвращает строку вида "Привет, [имя]!".
5. Выведите результаты вызовов этих функций в консоль.
Задание 1.4: Модули [Link] (CommonJS)
Цель: Практика создания и использования модулей в [Link].
Описание:
1. Создайте новый файл [Link] .
2. В [Link] экспортируйте две функции: add и subtract .
• add(a, b) должна возвращать сумму a и b .
• subtract(a, b) должна возвращать разность a и b .
 3. В файле chapter1_exercises.js импортируйте эти функции.
4. Используйте импортированные функции для выполнения сложения и вычитания
двух чисел и выведите результаты в консоль.
Задание 1.5: Работа с файловой системой (fs) и асинхронность
Цель: Использование встроенного модуля fs для чтения и записи файлов, а также
понимание асинхронных операций.
Описание:
1. В файле chapter1_exercises.js :
2. Используя модуль fs ([Link]):
• Асинхронно запишите строку "Привет, мир! Это мой первый файл." в файл
[Link] .
• После успешной записи, асинхронно прочитайте содержимое файла [Link] .
• Выведите прочитанное содержимое в консоль.
• Обработайте возможные ошибки при записи и чтении файла.

Глава 2: Разработка фронтенда с React

Задание 2.1: Основы React-компонентов
Цель: Понять структуру и создание функциональных компонентов в React.
Описание:
1. Создайте новое React-приложение с помощью npx create-react-app my-react-app .
2. Удалите стандартный контент из [Link] .
3. Создайте функциональный компонент WelcomeMessage , который принимает
пропс name и отображает <h1>Привет, {name}!</h1> .
4. Используйте WelcomeMessage в [Link] , передав ему ваше имя.
5. Запустите приложение и убедитесь, что сообщение отображается в браузере.
Задание 2.2: Состояние (State) и обработка событий
Цель: Научиться управлять состоянием компонентов и обрабатывать
пользовательские события.
Описание:
1. В вашем React-приложении создайте новый компонент Counter .
2. В Counter используйте хук useState для создания состояния count с начальным
значением 0.
3. Отобразите текущее значение count .
4. Добавьте две кнопки: "Увеличить" и "Уменьшить".
5. При клике на кнопку "Увеличить" инкрементируйте count .
6. При клике на кнопку "Уменьшить" декрементируйте count .
7. Используйте Counter в [Link] .
Задание 2.3: Условный рендеринг и списки
Цель: Практика условного рендеринга и отображения списков элементов.
Описание:
1. Создайте компонент ItemList , который принимает пропс items (массив строк).
2. Если массив items пуст, отобразите сообщение "Список пуст."
3. Если массив items не пуст, отобразите каждый элемент массива как элемент
списка ( <li> ) внутри неупорядоченного списка ( <ul> ). Используйте map() и
key пропс.
4. Используйте ItemList в [Link] , передав ему сначала пустой массив, а затем
массив с несколькими элементами (например, ['Яблоко', 'Банан', 'Апельсин'] ).
Задание 2.4: Хуки useEffect и useRef
Цель: Понять использование хуков useEffect для сайд-эффектов и useRef для
доступа к DOM-элементам.
Описание:
1. Создайте компонент Timer .
2. Используйте useState для состояния seconds с начальным значением 0.
3. Используйте useEffect для запуска интервала, который каждую секунду
увеличивает seconds на 1. Убедитесь, что интервал очищается при
размонтировании компонента.
4. Отобразите текущее значение seconds .
5. Создайте компонент FocusInput .
6. Используйте useRef для создания ссылки на <input> элемент.
7. Добавьте кнопку "Фокус на поле ввода". При клике на нее, используйте useRef
для установки фокуса на поле ввода.
8. Используйте Timer и FocusInput в [Link] .
Задание 2.5: Маршрутизация с React Router
Цель: Реализовать базовую маршрутизацию в React-приложении.
Описание:
1. Установите react-router-dom : npm install react-router-dom .
2. Создайте три простых компонента: HomePage , AboutPage , ContactPage , каждый
из которых просто отображает заголовок с названием страницы.
3. В [Link] настройте маршрутизацию так, чтобы:
• / вел на HomePage .
• /about вел на AboutPage .
• /contact вел на ContactPage .
4. Добавьте навигационные ссылки ( <Link> ) на каждую страницу в [Link] .
5. Проверьте работу маршрутизации в браузере.

Глава 3: Бэкенд на [Link] и Express

Задание 3.1: Создание простого Express-сервера
Цель: Научиться создавать базовый HTTP-сервер с использованием [Link].
Описание:
1. Создайте новую папку для проекта (например, express-server-exercise ).
2. Инициализируйте проект [Link] ( npm init -y ).
3. Установите Express ( npm install express ).
4. Создайте файл [Link] .
5. В [Link] создайте Express-приложение.
6. Настройте маршрут GET / (корневой маршрут), который будет отправлять в
ответ строку "Привет от Express-сервера!".
7. Запустите сервер на порту 3000.
8. Проверьте работу сервера, открыв [Link] в браузере.
Задание 3.2: Обработка различных HTTP-методов и параметров
маршрута
Цель: Практика обработки GET, POST запросов и извлечения параметров из URL.
Описание:
1. В [Link] :
2. Создайте маршрут GET /users/:id , который будет возвращать JSON-объект с id
пользователя, полученным из параметров маршрута. Например, для /users/123
должен вернуться { "userId": "123" } .
3. Создайте маршрут POST /products , который будет принимать JSON-данные в теле
запроса (например, { "name": "Ноутбук", "price": 1200 } ).
• Используйте [Link]() для парсинга JSON-тела запроса.
• Возвращайте полученные данные в ответ с сообщением "Продукт добавлен:".
• Протестируйте POST-запрос с помощью Postman, Insomnia или curl .

Задание 3.3: Промежуточное ПО (Middleware)

Цель: Понять концепцию и применение промежуточного ПО в Express.
Описание:
1. В [Link] :
2. Создайте простое промежуточное ПО loggerMiddleware , которое будет выводить в
консоль метод и URL каждого входящего запроса (например, GET /users/123 ).
3. Примените loggerMiddleware глобально ко всем маршрутам.
4. Создайте промежуточное ПО authMiddleware , которое проверяет наличие
заголовка Authorization .
• Если заголовок отсутствует, отправляйте ответ со статусом 401 и сообщением
"Неавторизованный доступ".
• Если заголовок присутствует, вызывайте next() .
5. Примените authMiddleware только к маршруту /admin (GET-запрос), который
возвращает "Добро пожаловать в админ-панель!".
6. Протестируйте доступ к /admin с заголовком и без него.
Задание 3.4: Обработка ошибок
Цель: Реализовать базовую обработку ошибок в Express-приложении.
Описание:
1. В [Link] :
2. Создайте маршрут GET /error-test , который будет генерировать ошибку
(например, throw new Error("Что-то пошло не так!") ).
3. Создайте промежуточное ПО для обработки ошибок (error-handling middleware),
которое принимает 4 аргумента ( err, req, res, next ).
4. В этом промежуточном ПО отправляйте клиенту ответ со статусом 500 и
сообщением об ошибке.
5. Проверьте, как сервер обрабатывает ошибку при обращении к /error-test .
Задание 3.5: Статические файлы
Цель: Научиться отдавать статические файлы (HTML, CSS, JS, изображения) с
помощью Express.
Описание:
1. В корне вашего Express-проекта создайте папку public .
2. В папке public создайте файл [Link] с простым HTML-кодом (например,
<h1>Моя статическая страница</h1> ).
3. В [Link] настройте Express на отдачу статических файлов из папки public .
4. Убедитесь, что при обращении к корневому маршруту ( / ) в браузере
отображается содержимое [Link] .
5. Попробуйте добавить CSS-файл или изображение в папку public и убедитесь, что
они также доступны через сервер.

Глава 4: Работа с базами данных

Задание 4.1: Подключение к MongoDB и создание модели
(Mongoose)
Цель: Научиться подключаться к базе данных MongoDB и определять схемы и модели
с помощью Mongoose.
Описание:
1. Убедитесь, что у вас установлен MongoDB (локально или используйте облачный
сервис, например, MongoDB Atlas).
2. Создайте новую папку для проекта (например, mongodb-exercise ).
3. Инициализируйте проект [Link] ( npm init -y ).
4. Установите Mongoose ( npm install mongoose ).
5. Создайте файл [Link] .
6. В [Link] подключитесь к вашей базе данных MongoDB (например,
mongodb://localhost:27017/mydatabase ).
7. Определите схему Mongoose для сущности Book со следующими полями:
• title (String, required)
• author (String, required)
• year (Number)
• genres (Array of Strings)
8. Создайте модель Book на основе этой схемы.
9. После успешного подключения к базе данных, выведите сообщение в консоль.
Задание 4.2: CRUD-операции с Mongoose
Цель: Практика создания, чтения, обновления и удаления документов в MongoDB с
использованием Mongoose.
Описание:
1. В [Link] (продолжая предыдущее задание):
2. Создание (Create):
• Создайте новую книгу с данными по вашему выбору и сохраните ее в базе
данных.
• Выведите сохраненную книгу в консоль.
3. Чтение (Read):
• Найдите все книги в базе данных и выведите их в консоль.
• Найдите одну книгу по названию (например, по названию, которое вы только
что создали) и выведите ее.
4. Обновление (Update):
• Найдите книгу по названию и обновите ее год издания.
• Выведите обновленную книгу в консоль.
5. Удаление (Delete):
• Найдите книгу по названию и удалите ее из базы данных.
• Выведите сообщение об успешном удалении.
6. Убедитесь, что все операции выполняются асинхронно с использованием
async/await .

Задание 4.3: Интеграция MongoDB с Express (REST API)

Цель: Создать RESTful API для управления книгами, используя Express и Mongoose.
Описание:
1. Продолжите работу в проекте mongodb-exercise .
2. Установите Express ( npm install express ).
3. В [Link] настройте Express-сервер (как в Главе 3) и подключитесь к MongoDB.
4. Создайте следующие маршруты для управления книгами:
• GET /api/books : Получить все книги.
• GET /api/books/:id : Получить книгу по ID.
• POST /api/books : Создать новую книгу. Принимает JSON-тело с title , author ,
year , genres .
• PUT /api/books/:id : Обновить книгу по ID. Принимает JSON-тело с обновленными
данными.
• DELETE /api/books/:id : Удалить книгу по ID.
5. Реализуйте логику для каждого маршрута, используя Mongoose-модель Book .
6. Обработайте возможные ошибки (например, книга не найдена, неверные
данные).
7. Запустите сервер и протестируйте API с помощью Postman, Insomnia или curl .
Задание 4.4: Валидация данных (Mongoose Validators)
Цель: Использовать встроенные валидаторы Mongoose для обеспечения целостности
данных.
Описание:
1. В схеме Book из Задания 4.1 добавьте следующие валидаторы:
• title : minlength: 3 , maxlength: 100 .
• author : minlength: 3 , maxlength: 50 .
 • year : min: 1000 , max: new Date().getFullYear() .
• genres : Добавьте кастомный валидатор, который проверяет, что массив
genres не пуст, если он предоставлен.
2. Попробуйте создать или обновить книгу с данными, которые нарушают эти
валидаторы, и убедитесь, что Mongoose возвращает ошибку валидации.
3. Обработайте эти ошибки валидации в вашем Express API (Задание 4.3), возвращая
клиенту статус 400 (Bad Request) и подробное сообщение об ошибке.
Задание 4.5: Поиск и фильтрация
Цель: Реализовать функциональность поиска и фильтрации для коллекции книг.
Описание:
1. В вашем Express API (Задание 4.3) измените маршрут GET /api/books так, чтобы он
поддерживал следующие параметры запроса (query parameters):
• title : Поиск книг, название которых содержит указанную подстроку
(используйте регулярные выражения с $regex и $options: 'i' для
регистронезависимого поиска).
• author : Поиск книг по автору (точное совпадение).
• year_gte : Поиск книг, изданных в год, больший или равный указанному.
• year_lte : Поиск книг, изданных в год, меньший или равный указанному.
2. Реализуйте логику фильтрации, комбинируя условия в запросе Mongoose
( .find({}) ).
3. Протестируйте различные комбинации параметров запроса.

Глава 5: Тестирование приложений

Задание 5.1: Юнит-тестирование функций (Jest)
Цель: Научиться писать юнит-тесты для простых JavaScript-функций с
использованием Jest.
Описание:
1. Создайте новую папку для проекта (например, testing-exercise ).
2. Инициализируйте проект [Link] ( npm init -y ).
3. Установите Jest: npm install --save-dev jest .
4. Добавьте в [Link] скрипт для запуска тестов: "test": "jest" .
5. Создайте файл [Link] со следующими функциями:
6. Создайте файл [Link] .
7. В [Link] напишите тесты для каждой из функций в [Link] :
• Проверьте правильность сложения, вычитания, умножения.
• Проверьте деление на ноль (ожидайте, что функция выбросит ошибку).
• Используйте expect().toBe() , expect().[Link]() , expect().toThrow() .
8. Запустите тесты командой npm test и убедитесь, что все они проходят.
Задание 5.2: Тестирование React-компонентов (React Testing
Library)
Цель: Научиться писать тесты для React-компонентов, имитируя взаимодействие
пользователя.
Описание:
1. В вашем React-приложении (из Главы 2) или новом проекте React:
2. Установите необходимые библиотеки: npm install --save-dev @testing-library/react
@testing-library/jest-dom .
3. Создайте простой компонент Button :
 4. Создайте файл [Link] .
5. В [Link] напишите тесты для компонента Button :
• Проверьте, что кнопка рендерится с правильным текстом.
• Имитируйте клик по кнопке и убедитесь, что функция onClick была вызвана.
• Используйте render , [Link] , [Link] .
6. Запустите тесты и убедитесь, что они проходят.
Задание 5.3: Интеграционное тестирование Express API (Supertest)
Цель: Научиться писать интеграционные тесты для Express API, проверяя
взаимодействие маршрутов и баз данных.
Описание:
1. В вашем Express-проекте (из Главы 3 или 4) или новом проекте Express:
2. Установите Supertest: npm install --save-dev supertest .
3. Создайте файл [Link] .
4. В [Link] напишите тесты для вашего API:
• Проверьте маршрут GET / (из Задания 3.1).
• Проверьте маршрут POST /products (из Задания 3.2), убедитесь, что он
возвращает правильный статус и данные.
• Если у вас есть API с базой данных (из Главы 4), напишите тесты для CRUD-
операций с книгами: создание, чтение, обновление, удаление.
• Перед каждым тестом или набором тестов очищайте тестовую базу данных,
чтобы тесты были независимыми.
• Используйте request(app).get('/') , request(app).post('/products').send(...) , expect(200) ,
expect([Link]).toBe(...) .
5. Запустите тесты и убедитесь, что они проходят.
Задание 5.4: Мокирование зависимостей
Цель: Понять, как мокировать внешние зависимости (например, вызовы к базе
данных или внешним API) для изоляции тестов.
Описание:
1. В вашем Express-проекте (из Главы 4, где есть взаимодействие с
MongoDB/Mongoose):
2. Создайте сервис, который взаимодействует с моделью Book (например,
[Link] ):
3. В вашем [Link] используйте bookService для обработки маршрутов.
4. Создайте файл [Link] .
5. В [Link] напишите тесты для bookService .
6. Используйте Jest для мокирования модели Book :
• Мокируйте [Link] так, чтобы он возвращал предопределенный массив книг.
• Мокируйте [Link] так, чтобы он возвращал сохраненный объект.
• Убедитесь, что bookService работает корректно с мокированными
зависимостями, не обращаясь к реальной базе данных.
7. Запустите тесты и убедитесь, что они проходят.
Задание 5.5: E2E-тестирование (Cypress или Playwright -
теоретически)
Цель: Понять концепцию E2E-тестирования и его роль в Full-Stack разработке (без
фактической установки и запуска).
Описание:
1. Теоретическое задание: Представьте, что у вас есть Full-Stack приложение
(фронтенд на React, бэкенд на Express/[Link]).
2. Опишите, какие сценарии вы бы покрыли E2E-тестами с использованием Cypress
или Playwright.
3. Приведите примеры тестовых шагов для одного из сценариев (например,
регистрация пользователя, добавление товара в корзину, отправка формы).
4. Объясните, почему E2E-тестирование важно для Full-Stack приложений, и в чем
его отличие от юнит- и интеграционных тестов.

Глава 6: Развертывание и обслуживание

Задание 6.1: Развертывание статического фронтенда (Netlify/Vercel
- теоретически)
Цель: Понять процесс развертывания статического фронтенд-приложения.
Описание:
1. Теоретическое задание: Представьте, что у вас есть готовое React-приложение
(из Главы 2), которое вы хотите развернуть.
2. Опишите пошагово процесс развертывания этого приложения на одной из
платформ для статического хостинга (например, Netlify или Vercel).
3. Укажите, какие команды нужно выполнить в терминале, какие настройки сделать
на платформе (например, указать папку для сборки).
4. Объясните, как настроить автоматическое развертывание при каждом пуше в Git-
репозиторий.
Задание 6.2: Развертывание [Link] бэкенда (Heroku/Render -
теоретически)
Цель: Понять процесс развертывания [Link] бэкенд-приложения.
Описание:
1. Теоретическое задание: Представьте, что у вас есть готовый Express-сервер (из
Главы 3 или 4), который вы хотите развернуть.
2. Опишите пошагово процесс развертывания этого приложения на одной из PaaS-
платформ (например, Heroku или Render).
3. Укажите, какие файлы необходимы для развертывания ( [Link] , Procfile для
Heroku), какие переменные окружения нужно настроить (например, для
подключения к базе данных).
4. Объясните, как обеспечить доступность вашего API после развертывания.
Задание 6.3: Использование Docker для контейнеризации
(теоретически)
Цель: Понять основы контейнеризации с Docker и ее преимущества для Full-Stack
разработки.
Описание:
1. Теоретическое задание: Объясните, что такое Docker и зачем он нужен в
контексте Full-Stack разработки.
2. Опишите, как бы вы создали Dockerfile для вашего [Link] бэкенда.
3. Какие команды Docker вы бы использовали для сборки образа и запуска
контейнера?
4. Объясните, как Docker может помочь в процессе разработки, тестирования и
развертывания.
Задание 6.4: Мониторинг и логирование (теоретически)
Цель: Понять важность мониторинга и логирования для продакшн-приложений.
Описание:
1. Теоретическое задание: Объясните, почему мониторинг и логирование
критически важны для Full-Stack приложений в продакшене.
2. Какие типы метрик вы бы отслеживали для фронтенда и бэкенда?
3. Какие инструменты для логирования и мониторинга вы бы использовали
(например, Winston для [Link], Prometheus/Grafana, Sentry)?
4. Опишите, как бы вы настроили сбор и анализ логов в вашем приложении.
Задание 6.5: Обновление и поддержка приложений (теоретически)
Цель: Понять процесс обновления и поддержки развернутых Full-Stack приложений.
Описание:
1. Теоретическое задание: Опишите процесс выпуска обновлений для вашего Full-
Stack приложения (фронтенд и бэкенд).
2. Какие стратегии развертывания (например, Blue/Green, Canary) вы знаете и когда
их стоит применять?
3. Как бы вы обрабатывали обратную совместимость при обновлении API?
4. Объясните важность регулярного обновления зависимостей и патчей
безопасности.

Глава 7: Безопасность Full-Stack приложений

Задание 7.1: Защита от XSS-атак
Цель: Понять природу XSS-атак и научиться предотвращать их.
Описание:
1. Теоретическое задание: Объясните, что такое XSS (Cross-Site Scripting) атака и
как она работает.
2. Приведите пример уязвимого кода на JavaScript/HTML, который подвержен XSS.
3. Опишите, как можно предотвратить XSS-атаки на фронтенде (например, при
использовании React) и на бэкенде (при возврате данных).
4. Какие библиотеки или методы вы бы использовали для санитаризации
пользовательского ввода?
Задание 7.2: Защита от CSRF-атак
Цель: Понять природу CSRF-атак и научиться предотвращать их.
Описание:
1. Теоретическое задание: Объясните, что такое CSRF (Cross-Site Request Forgery)
атака и как она работает.
2. Приведите пример сценария, в котором пользователь может стать жертвой CSRF-
атаки.
3. Опишите основные методы защиты от CSRF-атак (например, CSRF-токены,
SameSite-куки).
4. Как бы вы реализовали защиту от CSRF в Express-приложении?
Задание 7.3: Защита от SQL-инъекций (для баз данных)
Цель: Понять, как предотвращать SQL-инъекции при работе с базами данных.
Описание:
1. Теоретическое задание: Объясните, что такое SQL-инъекция и как она может
быть использована злоумышленником.
2. Приведите пример уязвимого SQL-запроса, который подвержен инъекции.
3. Опишите, как можно предотвратить SQL-инъекции при работе с базами данных
(например, параметризованные запросы, ORM).
4. Как Mongoose помогает предотвращать SQL-инъекции в MongoDB?
Задание 7.4: Аутентификация и авторизация (JWT)
Цель: Реализовать базовую аутентификацию и авторизацию с использованием JWT.
Описание:
1. В вашем Express-проекте (из Главы 3 или 4):
2. Установите необходимые библиотеки: npm install jsonwebtoken bcryptjs .
3. Создайте модель User (если ее нет) с полями username и password (пароль
должен быть хеширован).
4. Реализуйте маршрут POST /api/register для регистрации нового пользователя
(хешируйте пароль перед сохранением).
5. Реализуйте маршрут POST /api/login :
• Принимает username и password .
• Проверяет учетные данные.
• Если данные верны, генерирует JWT-токен и отправляет его клиенту.
6. Создайте промежуточное ПО authMiddleware , которое проверяет наличие и
валидность JWT-токена в заголовке Authorization .
7. Защитите маршрут GET /api/protected с помощью authMiddleware , который
возвращает "Доступ разрешен!" только для авторизованных пользователей.
8. Протестируйте регистрацию, вход и доступ к защищенному маршруту.
Задание 7.5: Защита API от атак (Rate Limiting, CORS)
Цель: Применить методы защиты API от распространенных атак.
Описание:
1. В вашем Express-проекте:
2. Установите express-rate-limit : npm install express-rate-limit .
 3. Примените ограничение частоты запросов (rate limiting) к маршруту POST
/api/login , чтобы предотвратить брутфорс-атаки (например, 5 запросов в минуту).
4. Установите cors : npm install cors .
5. Настройте CORS (Cross-Origin Resource Sharing) для вашего Express-приложения,
разрешив запросы только с определенного домена (например, [Link]
для вашего React-фронтенда).
6. Протестируйте, как работает ограничение частоты запросов и CORS.

Глава 8: Производительность и оптимизация

Задание 8.1: Оптимизация производительности фронтенда
(теоретически)
Цель: Понять основные методы оптимизации производительности фронтенд-
приложений.
Описание:
1. Теоретическое задание: Опишите основные методы и техники, которые
используются для оптимизации производительности React-приложений (или
любого другого фронтенд-фреймворка).
2. Упомяните такие концепции, как: Code Splitting, Lazy Loading, Virtualization,
Memoization ([Link], useCallback, useMemo), оптимизация изображений,
кеширование.
3. Объясните, как каждый из этих методов способствует улучшению
пользовательского опыта и скорости загрузки.
Задание 8.2: Оптимизация производительности бэкенда
(теоретически)
Цель: Понять основные методы оптимизации производительности бэкенд-
приложений на [Link].
Описание:
1. Теоретическое задание: Опишите основные методы и техники, которые
используются для оптимизации производительности [Link]/Express-
приложений.
2. Упомяните такие концепции, как: кеширование (Redis, in-memory),
индексирование базы данных, оптимизация запросов к БД, асинхронное
программирование, использование кластеров [Link], балансировка нагрузки.
3. Объясните, как каждый из этих методов помогает справляться с высокой
нагрузкой и уменьшать время отклика.
Задание 8.3: Использование кеширования на бэкенде (Redis -
теоретически)
Цель: Понять, как можно использовать Redis для кеширования данных в [Link]
приложении.
Описание:
1. Теоретическое задание: Объясните, что такое Redis и почему он является
хорошим выбором для кеширования в [Link] приложениях.
2. Опишите сценарий, в котором вы бы использовали Redis для кеширования
(например, часто запрашиваемые данные из базы данных).
3. Приведите пример псевдокода или опишите шаги, как бы вы реализовали
кеширование данных о книгах (из Главы 4) с использованием Redis в вашем
Express API.
4. Как бы вы обрабатывали инвалидацию кеша при изменении данных?
Задание 8.4: Индексирование базы данных (MongoDB -
теоретически)
Цель: Понять важность индексирования для оптимизации запросов к базе данных.
Описание:
1. Теоретическое задание: Объясните, что такое индексы в базах данных и почему
они важны для производительности.
2. На примере вашей модели Book из Главы 4, какие поля вы бы проиндексировали
и почему?
3. Опишите, как бы вы создали индексы в MongoDB для этих полей.
4. Объясните, как индексы влияют на операции чтения и записи.
Задание 8.5: Профилирование и отладка производительности
(теоретически)
Цель: Понять, как выявлять и устранять узкие места в производительности Full-Stack
приложений.
Описание:
1. Теоретическое задание: Опишите процесс профилирования
производительности для [Link] бэкенда и React фронтенда.
2. Какие инструменты вы бы использовали для профилирования (например, Chrome
DevTools Performance tab, [Link] perf_hooks , [Link] )?
3. Как бы вы интерпретировали результаты профилирования для выявления узких
мест?
4. Приведите примеры типичных проблем с производительностью и способы их
решения.

Глава 9: Расширенные темы и новые технологии

Задание 9.1: GraphQL (теоретически)
Цель: Понять основы GraphQL и его преимущества перед REST.
Описание:
1. Теоретическое задание: Объясните, что такое GraphQL и в чем его основные
отличия и преимущества по сравнению с традиционным REST API.
2. Приведите пример GraphQL-запроса и GraphQL-схемы.
3. Опишите, в каких случаях использование GraphQL будет более
предпочтительным, чем REST.
4. Какие библиотеки или фреймворки используются для реализации GraphQL на
[Link] (например, Apollo Server) и на фронтенде (например, Apollo Client)?
Задание 9.2: WebSockets (теоретически)
Цель: Понять концепцию WebSockets и их применение для создания интерактивных
приложений.
Описание:
1. Теоретическое задание: Объясните, что такое WebSockets и в чем их отличие от
HTTP-запросов.
2. Приведите примеры использования WebSockets в реальных приложениях
(например, чаты, онлайн-игры, уведомления).
3. Опишите, как бы вы реализовали простой чат-сервер с использованием
WebSockets на [Link] (например, с библиотекой ws или [Link] ).
4. Как бы вы подключили фронтенд к этому WebSocket-серверу?
Задание 9.3: Serverless Functions (теоретически)
Цель: Понять концепцию Serverless и ее применение в Full-Stack разработке.
Описание:
1. Теоретическое задание: Объясните, что такое Serverless-архитектура и Serverless
Functions (например, AWS Lambda, Google Cloud Functions, Azure Functions).
2. В чем заключаются преимущества и недостатки Serverless для Full-Stack
разработчика?
3. Приведите пример сценария, в котором Serverless Function была бы идеальным
решением (например, обработка изображений, отправка уведомлений).
4. Как бы вы интегрировали Serverless Functions с вашим фронтенд-приложением?
Задание 9.4: Микросервисы (теоретически)
Цель: Понять концепцию микросервисной архитектуры и ее преимущества.
Описание:
1. Теоретическое задание: Объясните, что такое микросервисная архитектура и в
чем ее отличие от монолитной архитектуры.
2. Какие преимущества и недостатки имеет микросервисный подход?
3. Приведите пример, как бы вы разделили ваше Full-Stack приложение (например, с
книгами) на несколько микросервисов.
4. Какие вызовы возникают при работе с микросервисами (например, межсервисное
взаимодействие, распределенные транзакции, мониторинг)?
Задание 9.5: TypeScript (теоретически)
Цель: Понять преимущества использования TypeScript в Full-Stack JavaScript
разработке.
Описание:
1. Теоретическое задание: Объясните, что такое TypeScript и почему он становится
все более популярным в JavaScript-сообществе.
2. Какие основные преимущества TypeScript предоставляет для разработки больших
и сложных Full-Stack приложений?
3. Приведите пример простого JavaScript-кода и его эквивалента на TypeScript,
демонстрируя добавление типов.
4. Как TypeScript помогает улучшить качество кода, облегчить отладку и
рефакторинг?
Глава 10: Карьера Full-Stack разработчика
Задание 10.1: Составление резюме и портфолио
Цель: Понять, как эффективно представить себя на рынке труда.
Описание:
1. Теоретическое задание: Представьте, что вы ищете свою первую работу Full-
Stack разработчика.
2. Опишите, какие разделы должно содержать ваше резюме и что в них нужно
указывать, чтобы привлечь внимание работодателя.
3. Какие проекты вы бы включили в свое портфолио, чтобы продемонстрировать
свои навыки Full-Stack разработчика? Приведите примеры.
4. Объясните, почему важно иметь онлайн-присутствие (например, GitHub, LinkedIn)
и как его поддерживать.
Задание 10.2: Подготовка к собеседованию
Цель: Понять, как подготовиться к техническим и поведенческим собеседованиям.
Описание:
1. Теоретическое задание: Опишите, как бы вы готовились к техническому
собеседованию на позицию Full-Stack разработчика.
2. Какие темы (алгоритмы, структуры данных, JavaScript, React, [Link], базы
данных) вы бы повторили?
3. Приведите примеры вопросов, которые могут задать на техническом
собеседовании по каждой из этих тем.
4. Как бы вы готовились к поведенческому собеседованию? Какие вопросы могут
быть заданы и как на них отвечать?
Задание 10.3: Непрерывное обучение и развитие
Цель: Понять важность постоянного обучения в IT-сфере.
Описание:
1. Теоретическое задание: Объясните, почему непрерывное обучение является
ключевым для Full-Stack разработчика.
2. Какие ресурсы вы бы использовали для поддержания своих знаний в актуальном
состоянии (блоги, курсы, конференции, документация)?
3. Как бы вы выбирали, какие новые технологии изучать, чтобы оставаться
востребованным специалистом?
4. Опишите, как бы вы планировали свое профессиональное развитие на
ближайшие 3-5 лет.
Задание 10.4: Работа в команде и Agile-методологии
Цель: Понять, как эффективно работать в команде разработчиков.
Описание:
1. Теоретическое задание: Опишите, как происходит работа в команде
разработчиков, использующей Agile-методологии (например, Scrum).
2. Какие роли существуют в Scrum-команде и каковы их обязанности?
3. Какие встречи проводятся в Scrum (Daily Scrum, Sprint Planning, Sprint Review,
Sprint Retrospective) и какова их цель?
4. Объясните важность коммуникации, код-ревью и системы контроля версий (Git)
при командной разработке.
Задание 10.5: Фриланс и предпринимательство (опционально)
Цель: Рассмотреть альтернативные карьерные пути для Full-Stack разработчика.
Описание:
1. Теоретическое задание: Если вы рассматриваете фриланс или создание
собственного продукта, какие шаги вы бы предприняли?
2. Какие навыки, помимо технических, необходимы для успешного фрилансера или
предпринимателя?
3. Где искать клиентов для фриланса? Как оценивать свои услуги?
4. Какие юридические и финансовые аспекты нужно учитывать при работе на себя?