From 1a18557ec618f8c3416c0c6f2b2b26f30f2d4846 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Fri, 23 May 2025 15:02:39 +0300 Subject: [PATCH] feat: add cookie article, some style fixes --- docs/api/07-server-side-events.md | 24 +++---- docs/browser/07-cookie.md | 97 +++++++++++++++++++++++++++++ docs/react/01-intro.md | 4 +- docs/state-managers/02-redux.md | 16 ++--- docs/state-managers/03-rtk-query.md | 20 +++--- docs/state-managers/04-zustand.md | 26 ++++---- 6 files changed, 142 insertions(+), 45 deletions(-) create mode 100644 docs/browser/07-cookie.md diff --git a/docs/api/07-server-side-events.md b/docs/api/07-server-side-events.md index cdb7cfb..fbfb433 100644 --- a/docs/api/07-server-side-events.md +++ b/docs/api/07-server-side-events.md @@ -112,23 +112,23 @@ app.listen(3000, () => { - Сервер отправляет данные клиенту каждые 2 секунды. ## Преимущества SSE: -1. Простота: Легко реализовать как на клиенте, так и на сервере. -2. Автоматическое восстановление: Клиент автоматически переподключается при разрыве соединения. -3. Эффективность: Меньше нагрузки на сервер по сравнению с polling. +1. **Простота:** Легко реализовать как на клиенте, так и на сервере. +2. **Автоматическое восстановление:** Клиент автоматически переподключается при разрыве соединения. +3. **Эффективность:** Меньше нагрузки на сервер по сравнению с polling. ## Недостатки SSE: -1. Односторонняя связь: Клиент не может отправлять данные серверу через SSE. -2. Ограниченная поддержка браузеров: Не поддерживается в Internet Explorer. -3. Ограничения протокола: Только текстовые данные. +1. **Односторонняя связь:** Клиент не может отправлять данные серверу через SSE. +2. **Ограниченная поддержка браузеров:** Не поддерживается в Internet Explorer. +3. **Ограничения протокола:** Только текстовые данные. ## Когда использовать SSE: -1. Уведомления: Например, уведомления о новых сообщениях. -2. Обновления статуса: Например, статус заказа или задачи. -3. Потоковая передача данных: Например, ленты новостей или обновления котировок. +1. **Уведомления:** Например, уведомления о новых сообщениях. +2. **Обновления статуса:** Например, статус заказа или задачи. +3. **Потоковая передача данных:** Например, ленты новостей или обновления котировок. ## Альтернативы SSE: -1. WebSockets: Для двусторонней связи в реальном времени. -2. Long Polling: Когда SSE недоступен. -3. Polling: Для простых сценариев. +1. **WebSockets:** Для двусторонней связи в реальном времени. +2. **Long Polling:** Когда SSE недоступен. +3. **Polling:** Для простых сценариев. 🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/browser/07-cookie.md b/docs/browser/07-cookie.md new file mode 100644 index 0000000..d75e987 --- /dev/null +++ b/docs/browser/07-cookie.md @@ -0,0 +1,97 @@ +--- +sidebar_position: 7 +--- + +# Cookie + +Файлы **cookie** используются веб-сайтами для хранения небольших объемов данных прямо в браузере пользователя. Они играют важную роль в авторизации, отслеживании сессий, персонализации и аналитике. + +- **Cookie** – это простой способ хранить данные между запросами. +- **JavaScript** может управлять ими через `document.cookie`. +- **Используются** для авторизации, сессий, настроек, трекинга. +- **Осторожно:** Если не защищены (`Secure`, `HttpOnly`, `SameSite`), могут быть украдены через XSS. + +## Как работают cookie в браузере? + Когда вы заходите на сайт, сервер может отправить HTTP-заголовок `Set-Cookie`, и браузер сохранит эту информацию. При последующих запросах к тому же сайту браузер автоматически отправляет cookie обратно на сервер в заголовке `Cookie`. +```http request +HTTP/1.1 200 OK +Set-Cookie: session_id=abc123; Path=/; Expires=Wed, 30 May 2025 12:00:00 GMT +``` + +Теперь при каждом запросе к этому домену браузер будет отправлять: + +```http request +GET /profile HTTP/1.1 +Cookie: session_id=abc123 +``` + +## JavaScript и работа с cookie + JavaScript может **читать, создавать, изменять и удалять** cookie через свойство `document.cookie`. + +📌 Чтение всех cookie +```js +console.log(document.cookie); +// Выведет строку вида "name=value; name2=value2" +``` +📌 Установка новой cookie +```js +document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/"; +``` +**Параметры:** +- `expires` – срок действия (если не указать, cookie удалится при закрытии браузера). +- `max-age` – время жизни в секундах (альтернатива `expires`). +- `path=/` – на каких страницах доступна cookie (по умолчанию текущий путь). +- `domain` – для какого домена (по умолчанию текущий). +- `secure` – передавать только по HTTPS. +- `samesite` – защита от CSRF (`Strict`, `Lax`, `None`). + +📌 Изменение cookie +Просто перезапишите её с тем же именем: +```js +document.cookie = "username=Anna; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/"; +``` + +📌 Удаление cookie +Установите `**expires**` в прошлое: +```js +document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; +``` + +## Примеры использования cookie в JS + +🔹 Сохранение авторизации +```js +// После успешного входа +document.cookie = `auth_token=${token}; max-age=3600; path=/; secure`; +``` +🔹 Запоминание пользовательских настроек +```js +// Сохраняем тему +document.cookie = "theme=dark; max-age=2592000"; // 30 дней + +// Читаем тему +const cookies = document.cookie.split(';').map(c => c.trim()); +const themeCookie = cookies.find(c => c.startsWith('theme=')); +const theme = themeCookie ? themeCookie.split('=')[1] : 'light'; +``` +🔹 Корзина покупок +```js +// Добавление товара +let cart = JSON.parse(localStorage.getItem('cart') || '[]'); +cart.push({ id: 123, name: "Phone" }); +document.cookie = `cart=${JSON.stringify(cart)}; max-age=86400`; +``` + +## Ограничения cookie +- **Размер:** Обычно до **4 КБ** на cookie. +- **Количество:** Зависит от браузера (~50 на домен). +- **Доступ:** Только для своего домена (если не указан `domain`). +- **Безопасность:** Уязвимы к XSS, если не стоит `HttpOnly` (тогда JS не сможет читать). + +## Альтернативы cookie +- **localStorage / sessionStorage** – больше места (5-10 МБ), но не отправляются на сервер автоматически. +- **JWT (JSON Web Tokens)** – для авторизации без куки. +- **IndexedDB** – для хранения больших объемов данных. + +🚀 **_Источник: DeepSeek_** \ +🚀 **Источник: [Cookies. Все, что нужно знать о Cookies: Настройка, Использование и Безопасность](https://www.youtube.com/watch?v=Xqc3T9QtqvI)** \ No newline at end of file diff --git a/docs/react/01-intro.md b/docs/react/01-intro.md index 57d8b2b..003767d 100644 --- a/docs/react/01-intro.md +++ b/docs/react/01-intro.md @@ -61,5 +61,5 @@ sidebar_position: 1 ## Итог **React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения. -🚀 **_Источник: DeepSeek_** -🚀 **Источник: [https://www.youtube.com/playlist?list=PL_Ff6C61NLImA9pRrkFXp8yaWz1_RtFdQ](https://www.youtube.com/playlist?list=PL_Ff6C61NLImA9pRrkFXp8yaWz1_RtFdQ)** \ No newline at end of file +🚀 **_Источник: DeepSeek_** \ +🚀 **Источник: [Курс по базе официальной документации на react.dev](https://www.youtube.com/playlist?list=PL_Ff6C61NLImA9pRrkFXp8yaWz1_RtFdQ)** \ No newline at end of file diff --git a/docs/state-managers/02-redux.md b/docs/state-managers/02-redux.md index ff09f5d..6187e8d 100644 --- a/docs/state-managers/02-redux.md +++ b/docs/state-managers/02-redux.md @@ -94,23 +94,23 @@ function Counter() { ``` ## Преимущества Redux: -1. Централизованное состояние: +1. **Централизованное состояние:** - Всё состояние приложения хранится в одном месте, что упрощает управление и отладку. -2. Предсказуемость: +2. **Предсказуемость:** - Состояние изменяется только через действия и редьюсеры, что делает поведение приложения предсказуемым. -3. Инструменты разработчика: +3. **Инструменты разработчика:** - Redux DevTools позволяют отслеживать изменения состояния, отменять действия и многое другое. -4. Масштабируемость: +4. **Масштабируемость:** - Redux хорошо подходит для больших приложений с множеством компонентов и сложной логикой состояния. -5. Сообщество и экосистема: +5. **Сообщество и экосистема:** - Redux имеет огромное сообщество и множество дополнительных библиотек (например, Redux Thunk, Redux Saga). ## Недостатки Redux: -1. Boilerplate: +1. **Boilerplate:** - Redux требует написания большого количества кода (actions, reducers, store), что может быть избыточным для небольших приложений. -2. Сложность: +2. **Сложность:** - Для новичков Redux может показаться сложным из-за множества концепций и шагов. -3. Производительность: +3. **Производительность:** - Неправильное использование Redux может привести к лишним ререндерам компонентов. ## Redux Toolkit (RTK): diff --git a/docs/state-managers/03-rtk-query.md b/docs/state-managers/03-rtk-query.md index bcf3134..a6ad36a 100644 --- a/docs/state-managers/03-rtk-query.md +++ b/docs/state-managers/03-rtk-query.md @@ -22,34 +22,34 @@ sidebar_position: 3 - RTK Query интегрируется с Redux DevTools, что позволяет отслеживать состояние запросов и кэша. Основные хуки RTK Query: -1. useQuery: +1. **useQuery:** - Используется для выполнения **GET**-запросов. - Возвращает объект с данными, состоянием загрузки (`isLoading`), ошибкой (~~error~~) и другими полезными полями. - Пример: `useGetPostsQuery()`. -2. useMutation: +2. **useMutation:** - Используется для выполнения **POST**, **PUT**, **DELETE** и других запросов, изменяющих данные на сервере. - Возвращает функцию для выполнения мутации и объект с состоянием (`isLoading`, `isError` и т.д.). - Пример: `useAddPostMutation()`. -3. useLazyQuery: +3. **useLazyQuery:** - Используется для выполнения запросов по требованию (например, при нажатии кнопки). - Пример: `const [fetchPost, { data }] = useLazyGetPostByIdQuery()`. ## Преимущества RTK Query: -1. Минимум boilerplate-кода: +1. **Минимум boilerplate-кода:** - RTK Query автоматически генерирует редьюсеры, действия и хуки. -2. Кэширование: +2. **Кэширование:** - Данные автоматически кэшируются, что предотвращает лишние запросы. -3. Интеграция с Redux: +3. **Интеграция с Redux:** - RTK Query легко интегрируется с существующим Redux-стором. -4. Оптимизация: +4. **Оптимизация:** - Автоматическое управление подписками и ререндерами. -5. Поддержка TypeScript: +5. **Поддержка TypeScript:** - RTK Query полностью поддерживает TypeScript, что делает её удобной для типизированных проектов. ## Недостатки RTK Query: -1. Ограниченная гибкость: +1. **Ограниченная гибкость:** - RTK Query ориентирована на REST API и GraphQL. Для более сложных сценариев может потребоваться ручная настройка. -2. Зависимость от Redux: +2. **Зависимость от Redux:** - Если в проекте не используется Redux, RTK Query может быть избыточной. ## Когда использовать RTK Query? diff --git a/docs/state-managers/04-zustand.md b/docs/state-managers/04-zustand.md index 668834d..a5bc9cc 100644 --- a/docs/state-managers/04-zustand.md +++ b/docs/state-managers/04-zustand.md @@ -11,39 +11,39 @@ Zustand — это минималистичная и современная би ## Основные особенности Zustand: -1. Простота: +1. **Простота:** - Zustand имеет минимальный API, что делает его очень простым в использовании. - Для начала работы достаточно создать store с помощью функции create. -2. Минимум boilerplate: +2. **Минимум boilerplate:** - В отличие от Redux, Zustand не требует настройки редьюсеров, действий или middleware. -3. Реактивность: +3. **Реактивность:** - Zustand автоматически отслеживает изменения состояния и обновляет компоненты, которые используют store. -4. Гибкость: +4. **Гибкость:** - Zustand позволяет хранить как простые, так и сложные состояния, включая асинхронные операции. -5. Интеграция с React: +5. **Интеграция с React:** - Zustand предоставляет хуки для удобного использования store в функциональных компонентах. -6. Производительность: +6. **Производительность:** - Zustand оптимизирован для минимизации лишних ререндеров. ## Преимущества Zustand: -1. Минимализм: +1. **Минимализм:** - Zustand предоставляет только необходимый функционал, без лишних сложностей. -2. Простота интеграции: +2. **Простота интеграции:** - Не требуется настройка провайдеров или обёрток, как в Redux. -3. Производительность: +3. **Производительность:** - Zustand оптимизирован для минимизации ререндеров. -4. Гибкость: +4. **Гибкость:** - Подходит как для простых, так и для сложных сценариев управления состоянием. -5. TypeScript-поддержка: +5. **TypeScript-поддержка:** - Zustand полностью поддерживает TypeScript, что делает его удобным для типизированных проектов. ## Недостатки Zustand: -1. Ограничение в инструменте для отладки: +1. **Ограничение в инструменте для отладки:** - В отличие от Redux, Zustand не имеет таких мощных инструментов, как Redux DevTools, но при этом практически полностью совместим и может использовать его для отладки. -2. Меньше сообщества: +2. **Меньше сообщества:** - Zustand менее популярен, чем Redux, поэтому может быть меньше ресурсов и примеров. ## Когда использовать Zustand?