ДЕНЬ 130
Разработал простенький конвертор валют. Пользователь вводит число и необходимые валюты, затем получает результат курса. Были проблемы с апишкой, так как первый раз в реакте использовал апишку, засунул .env с ключом в SRC, тем самым получал значение undefined при попытке получить коэффициент конвертации.
Весь проект стоит оптимизировать, чтобы компоненты не рендерились повторно из-за мелких изменений.
Также перешёл на vite, очень удобный инструмент сборки. Было неудобно создавать проект при create-react-app, так как при написании верстки приходилось перезапускать сервер. Стоит отметить, что очень у vite простая и быстрая настройка для создания проекта.

Верстаю на gulp эту и следующую неделю.
Потом расскажу подробно, что было сделано

ДЕНЬ 131
Устанавливал PHP на комп, изначально хотел через XAMPP (так как там не нужно настраивать вручную и куда проще скачать), но мне не удалось даже начать загрузку, поэтому устанавливал вручную:
- PHP
- Apache
+ Делал настройку под PostgreSQL

Изначально установил не ту версию PHP, которая не предназначена под Apache, из-за этого пришлось переустанавливать на другую версию.

Прописал одну команду в тестовый файл PHP и запустил локалку → получил вывод инфы о PHP → следовательно всё работает.

Вчера смотрел про оптимизацию в React и добавил:
- useCallback
- memo
в компоненты.

ДЕНЬ 132
PHP установлен, осталось только подключить его к проекту. Изначально я пытался сделать так, чтобы в одном проекте находились и фронтенд, и бэкенд. Я настраивал конфигурацию Apache, чтобы он запускал файлы PHP на локалке не только из своей папки, но и из проекта, но так и не смог это сделать. Поэтому в папке htdocs (откуда запускаются файлы PHP на локалке) я создал еще одну папку для проекта и оттуда уже запускал PHP.

Так как сервер и фронтенд находятся на разных портах, их нужно было как-то связать. В запросе я указывал localhost:80 (80 — порт моего сервера), но при отправке он уходил на localhost:5173 (5173 — порт для фронтенда) и на localhost:80. Чтобы это исправить, нужно было немного изменить конфигурацию Vite для сервера. После этого запрос обрабатывался корректно и выводил результат, который написан на PHP.

На PHP был написан простенький код для чтения файла и вывода его содержимого.

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

ДЕНЬ 133
    Для практики с PHP решил сделать дефолтный таск-менеджер с подключением базы данных.

Когда создаешь задачу — форма отправляется и данные заносятся в БД. Также сделал отображение задач из базы на сайт, но есть нюансы:

1️⃣ При отправке формы перекидывает на страницу с PHP-файлом. Пытался это пофиксить, убирая дефолтное поведение браузера при отправке формы, но в этом случае данные не заносятся в БД.

2️⃣ Данные из БД отображаются не динамически — нужно перезагружать страницу. Можно пофиксить, задав интервал рендера компонента, но, думаю, лучше использовать вебсокеты.

Также всё это дело нужно стилизовать и довести до ума, разумеется.

ДЕНЬ 135
Нашел, в чем была ошибка запросов. В заголовках при отправке с фронта стоял Content-Type, и на бэке тоже. Соответственно, запрос отправлялся дважды. Я пофиксил это, убрав Content-Type при отправке запроса в React.

Также стилизовал отображение данных на странице с возможностью удаления и редактирования (но пока такого функционала нет).

ДЕНЬ 136
Очередная проблема с серверной частью.

Я пытался реализовать удаление задачи при клике на иконку, но сервер не обрабатывает запрос. ID задачи передаётся корректно, однако запрос приходит не как 'DELETE', что вызывает ошибку. Я пробовал отправить прямой запрос на удаление, но сервер его не распознаёт. Также использовал метод POST с переменной для удаления, а также отправлял запросы через axios, но результат остаётся неизменным: два ответа, и оба неудачные.

Путь к файлу PHP проверен и правильный.

ДЕНЬ 137

Наконец-то я понял, в чем был нюанс. Я перепробовал разные методы запросов и способы их отправки. В итоге нашел причину проблемы.

Изначально было два неправильных запроса. В первом случае необходимо было настроить CORS, чтобы разрешить доступ с определенного домена для выполнения запроса. Во втором случае ошибка возникла на стороне бэкенда из-за неправильного синтаксиса SQL-запроса к базе данных.

Теперь я понимаю, что нормально, когда сервер отправляет два запроса: предварительный и основной. Предварительный запрос выполняется методом OPTIONS и проверяет, разрешает ли сервер выполнение основного запроса. После этого браузер отправляет запрос на сервер с информацией о методе и заголовках, которые будут использованы в основном запросе.

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

if ($method === 'OPTIONS') {
    exit;
}

ДЕНЬ 138

Внёс изменение данных в таске (название и степень важности). Можно либо применить изменение, либо отменить и оставить как было. Принцип прост: при клике на изменение, в ячейки таблицы добавляется input (для ввода двух значений) .

Осталась самая сложная часть — реализовать вебсокет для отслеживания изменений. Разбирался, для чего он нужен и в каких случаях используется. Хочется максимально подробно изучить их, чтобы потом не возникало особых проблем. Кто уже писал вебсокеты — есть ли смысл делать их на PHP или лучше на Node.js?

ДЕНЬ 139

Переписал все запросы на context, так как мне это показалось намного удобнее. Теперь нет огромного кода с запросом в компоненте — все они хранятся отдельно и просто берутся с помощью useContext. После этого все действия на странице отображаются сразу же (добавление, удаление, редактирование).

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

P.S. Контента долго не было, так как постоянно был в разъездах и крайне мало находился в городе.

ДЕНЬ 140

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

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

Столкнулся с проблемой: когда страница рендерится, сначала рендерится компонент с вызовом функции для получения всех тасок из базы, который находится в контексте. Мне же нужно, чтобы эта функция запускалась при открытии вебсокета. НО вебсокет — на контексте, и все функции с базой тоже в контексте, соответственно они конфликтуют, и ничего не выходит.

Есть вариант попробовать вынести все функции с базой отдельно — должно прокатить.

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

ДЕНЬ 141

   Вынес все функции с базой и вебсокетом в отдельные файлы, чтобы избежать конфликтов и это у меня получилось(отчасти). Очень тупил с диспатчем для обращения к базе, пытался в отдельном файле с запросами к БД сделать, но спустя некоторое время понял, что это максимально тупо и вот тут мне впервые пригодился метод .then для асинхронной операции, чтобы передать результат в вебсокет. Также столкнулся с ошибкой, связанной с назначением айдшника, но об этом в видео.

Также пробовал писать бэк на C#, но об этом чуть позже