Frontend_new Flashcards
Какие есть структуры данных(7)
1.Массивы (Arrays)
2.Объекты (Objects)
3.Строки (Strings)
4.Списки (Linked Lists): Коллекции, состоящие из узлов, каждый из которых содержит значение и ссылку на следующий узел. Списки могут быть односвязными (ссылка только на следующий элемент) или двусвязными (ссылка на следующий и предыдущий элементы).
5.Стеки (Stacks):Last-In-First-Out, LIFO).
6.Очереди (Queues): (First-In-First-Out, FIFO). Элементы добавляются в конец очереди, а извлекаются из начала.
7.Хеш-таблицы (Hash Tables): Структуры данных, которые используют хеш-функции для быстрого поиска и вставки данных. Они обеспечивают доступ к данным через ключ.
Различия между авторизацией и аутентификацией
- это два различных процесса, но они часто используются вместе в контексте обеспечения безопасности систем.
Аутентификация проверяет личность пользователя, в то время как авторизация определяет его права доступа к ресурсам или функциям системы после успешной аутентификации.
Аутентификация (Authentication):
Аутентификация - это процесс проверки подлинности учетных данных пользователя, таких как логин и пароль.
Цель аутентификации - убедиться, что пользователь является тем, кем он утверждает быть.
Авторизация (Authorization):
Авторизация - это процесс определения прав доступа пользователя к определенным ресурсам или функциям в системе.
Цель авторизации - определить, какие действия пользователь может совершать после успешной аутентификации.
В чем раличия REST vs SOAP(4)
1.Архитектура:
REST использует стандартные HTTP методы (GET, POST, PUT, DELETE)
SOAP,является протоколом на основе XML и может работать поверх различных транспортных протоколов, таких как HTTP, SMTP, TCP и др.
2.Формат сообщений:
В REST данные часто передаются в формате JSON. Он более легковесен и читаем
SOAP использует XML. Он более многословен и тяжеловесен по сравнению с JSON.
3.Удобство использования:
REST более прост в использовании благодаря своей простой архитектуре и поддержке стандартных HTTP методов.
SOAP может быть более сложным в использовании из-за его большей сложности и тяжеловесности.
4.Поддержка:
REST имеет широкую поддержку и является предпочтительным выбором для большинства современных веб-сервисов.
SOAP также продолжает использоваться в некоторых корпоративных средах, где требуется высокий уровень надежности и безопасности.
Итоги:
REST обычно предпочтительнее для создания веб-сервисов из-за своей простоты, легковесности и широкой поддержки. SOAP может быть выбран в случаях, когда необходима высокая надежность и сложные функциональные возможности.
Различия между 301 и 302 статусами http-запросов
Основное различие между 301 и 302 состоит в том, что 301 указывает на постоянное перемещение ресурса, в то время как 302 указывает на временное перемещение.
Различия между http 2.0 и http 1.1(3)
1.Мультиплексирование
HTTP/2.0 поддерживает мультиплексирование, что позволяет отправлять несколько запросов и ответов по одному и тому же соединению в любое время, без ожидания завершения предыдущих запросов.
HTTP/1.1 отправляет запросы и ответы последовательно, что может привести к блокировке ожидания завершения предыдущих запросов
2.Сжатие заголовков
HTTP/2.0 поддерживает сжатие заголовков, что уменьшает объем передаваемых данных и улучшает производительность.
3.Server Push (серверное уведомление):
HTTP/2.0 позволяет серверу отправлять дополнительные ресурсы клиенту без запроса (Server Push), уменьшая задержку при загрузке веб-страницы.
Различие между PUT и PATCH запросами
- это два HTTP метода, используемых для обновления ресурсов на сервере
PUT
Используется для обновления целого ресурса на сервере. Не предполагает частичного обновления ресурса,полностью заменяет существующий ресурс новым. Если ресурс с указанным URL не существует, может создать новый ресурс с этим URL.
PATCH
Позволяет изменять или обновлять только определенные поля или части ресурса(частичное обновление), оставляя остальные данные неизменными.
Многопоточность, многопроцессорность
Основное различие между многопоточностью и многопроцессорностью заключается в том, что многопоточность относится к параллельному выполнению потоков в рамках одного процесса, а многопроцессорность - к параллельному выполнению нескольких процессов на нескольких процессорах или ядрах процессора.
Мультизадачность
это способность операционной системы одновременно выполнять несколько задач. Это может включать выполнение нескольких приложений или процессов одновременно или переключение между несколькими задачами с высокой скоростью так, чтобы пользователь воспринимал, что все задачи выполняются параллельно.
Что такое B-tree
структура данных в виде дерева, используемая для организации и хранения упорядоченного множества ключей. Она является одной из самых эффективных структур данных для поиска, вставки и удаления элементов в отсортированном наборе данных.
В JavaScript B-дерево может быть реализовано в виде пользовательской класса или модуля, который предоставляет методы для вставки, удаления и поиска элементов в дереве.
Плюсы и минусы монолита и микросервисов
Монолит:
Плюсы:
Простота развертывания.
Проще масштабирование.
Проще тестирование.
Минусы:
Сложность поддержки.
Ограниченная гибкость развертывания.
Неэффективное использование ресурсов.
Микросервисы:
Плюсы:
Гибкость и масштабируемость.
Легкость поддержки.
Технологическая гетерогенность.
Минусы:
Сложность управления.
Сетевые задержки.
Сложность тестирования.
Отличия распределенного монолита от микросервисов
Распределенный монолит:
Одно целое приложение, развернутое на нескольких узлах.
Обычно масштабируется вертикально.
Единая кодовая база и база данных для всего приложения.
Более прост в управлении и развертывании по сравнению с микросервисами.
Микросервисы:
Приложение разбито на отдельные сервисы, каждый из которых может быть развернут и масштабирован независимо.
Горизонтальное масштабирование путем добавления или уменьшения экземпляров сервисов.
Каждый сервис имеет свою собственную базу данных и кодовую базу.
Предоставляет большую гибкость и масштабируемость за счет архитектурной раздробленности.
Что бывает, когда вводишь google.com в браузере
Поиск DNS-записи для google.com.( сначала ищется в локальном хранилище (localStorage) браузера, затем в куки (cookies). если отсутсвует браузер отправляет запрос к системе DNS)
Получение IP-адреса сервера, обслуживающего google.com.
Установка TCP-соединения с сервером по полученному IP-адресу и порту 80 (стандартный порт HTTP).
Отправка HTTP-запроса GET для google.com через установленное TCP-соединение.
Получение HTTP-ответа от сервера Google, содержащего HTML-код главной страницы google.com.
Браузер интерпретирует HTML-код и отображает веб-страницу на экране пользователя.
Что такое promise
Promise (обещание) - это объект в JavaScript, предназначенный для работы с асинхронными операциями. Он представляет собой результат выполнения или ошибки асинхронной операции и обеспечивает удобный способ обработки этих результатов.
Promise позволяет элегантно обрабатывать результаты асинхронных операций, делая код более читаемым и управляемым. Кроме того, он предоставляет механизм для последовательного выполнения цепочек асинхронных операций через методы then и catch.
Пример использования Promise:
const myPromise = new Promise((resolve, reject) => {}
Какие состояния есть у promise
Promise имеет три состояния:
Pending (ожидание): Исходное состояние, когда promise создан, но операция все еще выполняется.
Fulfilled (выполнено): Состояние, в котором операция успешно завершена. В этом случае в promise содержится результат выполнения операции.
Rejected (отклонено): Состояние, в котором операция завершается с ошибкой. В этом случае в promise содержится информация об ошибке.
Что такое virtual dom
Virtual DOM (виртуальное DOM) - это концепция в React, которая помогает оптимизировать процесс обновления пользовательского интерфейса, делая его более эффективным.
Виртуальный DOM представляет собой абстракцию поверх реального DOM. Это легковесное представление текущего состояния интерфейса в виде дерева объектов JavaScript. Когда состояние приложения меняется, React (например) создает новое виртуальное дерево, представляющее обновленное состояние.
React сравнивает новое виртуальное дерево с предыдущим. Этот процесс называется “reconciliation” (согласование).
React находит минимальное количество изменений, необходимых для обновления реального DOM, чтобы отобразить новое состояние.
какие преимущества у virtual dom
Поскольку манипуляции с виртуальным DOM происходят в памяти JavaScript, они обычно быстрее, чем прямые манипуляции с реальным DOM.
React минимизирует количество фактических изменений в реальном DOM, что повышает производительность приложения.
Виртуальный DOM является одной из стратегий оптимизации для более эффективного управления состоянием пользовательского интерфейса в веб-приложениях.
Какие типы данных существуют в javascript(8)
Примитивные типы данных:
1.Number
2.String
3.Boolean
4.Undefined
5.Null
6.Symbol
7.BigInt
Объекты (Reference Types):
8.Object
Чем let отличается от var
Область видимости:
var - функциональная область видимости. Переменные видны внутри функции видны за ее пределами.
let: блочную область видимости. Видны только внутри блока кода (например цикл)
Поднятие (Hoisting):
var: Поднимает объявление переменных на верхний уровень функции (если переменная объявлена внутри функции) или на верхний уровень глобального контекста (если переменная объявлена вне функции).
let: Также поднимается, но переменные не инициализируются (их значение остается undefined), и доступ к ним возможен только после их фактического объявления.
Ошибки времени выполнения:
var: Может использоваться до объявления, что может привести к неочевидным ошибкам.
let: Вызывает ReferenceError, если переменная используется до объявления.
Использование в циклах:
var: Не создает новую переменную для каждой итерации цикла, что может привести к непредвиденным проблемам.
let: Создает новую переменную для каждой итерации цикла, предотвращая проблемы, связанные с замыканиями.
Глобальный объект:
var: Создает свойства на глобальном объекте (в браузере - window), если объявлено в глобальном контексте.
let: Не создает свойства на глобальном объекте, если объявлено в глобальном контексте.
Чем var отличается от const
Изменяемость (Mutability):
var: Можно переопределять и изменять.const: нет(да только частично массив/объект)
Область видимости:
var: функциональную область видимости. const: блочную область видимости.
Поднятие (Hoisting):
var: Можно вызвать до определения, но значение будет undefined. у const нельзя(ReferenceError)
Глобальный объект:
var: Создает свойства на глобальном объекте (в браузере - window), если объявлено в глобальном контексте.
const: Не создает свойства на глобальном объекте.
Использование в циклах:
var: Не создает новую переменную для каждой итерации цикла.
const: Создает новую переменную для каждой итерации цикла.
Обязательная инициализация:
var: Не требует обязательной инициализации при объявлении. Значение по умолчанию - undefined.
const: Требует обязательной инициализации при объявлении.
Для чего используются call, apply и bind
В JavaScript методы call, apply и bind используются для управления контекстом (значением this) функции и передачи аргументов при её вызове.
Общие черты методов и для чего они нужны.call apply bind
Общие черты:
Все три метода используются для управления контекстом функции.
Помогают избежать дублирования кода, связанного с передачей одних и тех же аргументов.
Позволяют использовать функции в контексте, отличном от их исходного контекста.
Различие методов call apply bind
Различия:
call и apply сразу вызывают функцию, в то время как bind создает новую функцию, которую можно вызвать позже.
apply принимает аргументы в виде массива, call - в виде отдельных параметров, bind - как и call.
bind не вызывает функцию, а возвращает новую функцию, тогда как call и apply вызывают функцию сразу.
call и apply можно использовать для функций с произвольным числом аргументов, в то время как bind фиксирует аргументы при создании новой функции.
call:
Синтаксис: function.call(context, arg1, arg2, …).
apply:
Синтаксис: function.apply(context, [arg1, arg2, …]).
bind:
Синтаксис: function.bind(context, arg1, arg2, …).
В чём разница между классической функцией и стрелочной (function expression и function declaration)
Синтаксис:
Классическая функция function expression:
function add(a, b) { return a + b }
Стрелочная функция function declaration:
const add = (a, b) => a + b;
Контекст (значение this):
Классическая функция:
Имеет свой собственный контекст this, который зависит от того, как она была вызвана.
Стрелочная функция:
Не имеет своего собственного контекста this; она заимствует контекст из родительского контекста в момент создания.
Связывание (bind):
Классическая функция:
Может быть привязана к определенному контексту с использованием метода bind.
Стрелочная функция:
Нельзя изменить контекст с помощью bind, так как у неё нет своего собственного this.
Аргументы arguments:
Классическая функция:
Имеет объект arguments, который содержит все переданные ей аргументы.
Стрелочная функция:
Не имеет собственного объекта arguments. Вместо этого, она использует аргументы из своего родительского контекста.
Ключевое слово new:
Классическая функция:
Может использоваться с ключевым словом new для создания экземпляра объекта.
Стрелочная функция:
Не может быть использована с ключевым словом new. Она не имеет собственного prototype, и попытка использовать new вызовет ошибку.
Длина функции (length):
Классическая функция:
Имеет свойство length, которое представляет количество параметров, объявленных в функции.
Стрелочная функция:
Не имеет собственного свойства length. Всегда возвращает 0, потому что не имеет собственных именованных аргументов.
Способ определения:
Классическая функция:
Лучше подходит для методов объектов, обработчиков событий, конструкторов и других случаев, где важен контекст this.
Стрелочная функция:
Удобна для кратких анонимных функций и в случаях, когда контекст this не является критически важным, например, для обработчиков событий или функций обратного вызова.
Выбор между классической и стрелочной функцией зависит от конкретного контекста использования и требований вашего кода.
Какие способы изоляции стилей ты знаешь
Изоляция стилей является важным аспектом веб-разработки для предотвращения конфликтов и воздействия стилей одного компонента на другие.
Inline Styles (Встроенные стили): Стили задаются непосредственно внутри тега элемента с использованием атрибута style(<div style="color:red;">).
CSS Modules:Позволяют изолировать стили на уровне компонента путем создания уникальных имен классов( index.module.css).
Shadow DOM: Позволяет создавать изолированный корневой узел DOM с его собственными стилями и селекторами. Внутри html в теге style все стили
BEM (Block Element Modifier):Методология именования классов, направленная на создание модульных и изолированных компонентов.(<div class="button button--primary">)
Библиотеки, позволяющие встраивать стили в компоненты JavaScript, обеспечивая их изоляцию.</div></div>
В чем разница == и ===
Двойное равенство ==
Сравнивает значения с приведением типов.
Если типы операндов различаются, JavaScript попытается привести их к общему типу перед сравнением.
5 == “5” // true, так как “5” приводится к числу
Тройное равенство ===:
Сравнивает значения без приведения типов (строгое сравнение).
Возвращает true только в том случае, если значения и их типы совпадают.
5 === “5” // false, так как значения различаются по типу
Какими способами можно объявить переменные, назовите отличия
var,let,const,a=5
В чём разница между foreach и map
forEach и Map применяет функцию обратного вызова к каждому элементу массива.
forEach не создает новый массив и не возвращает результат.
Map создает новый массив и возвращает результат.
forEach - Может изменять элементы исходного массива(мутирует)
Map - Не изменяет исходный массив.
forEach Возвращает undefined.
Map Возвращает новый массив.
В чём отличие null от undefined
null и undefined - это два специальных значения в JavaScript, которые представляют отсутствие значения, но они имеют различия в своем использовании и семантике.
undefined:
Переменная, которой не было присвоено значение, по умолчанию имеет значение undefined.
Если функция не возвращает явно значение, её возвращаемое значение также будет undefined.
Параметры функции, которые не были переданы, имеют значение undefined.
Попытка обратиться к несуществующему свойству объекта также вернет undefined.
null:
null - это явное значение, которое используется для представления отсутствия значения или отсутствия ссылки на объект.
Если переменной присвоено значение null, это обозначает, что переменная явно не ссылается на какой-либо объект или значение.
null используется программистом для явного указания на отсутствие значения.
Различия:
undefined обычно означает, что значение отсутствует из-за неопределенности, в то время как null явно указывает на отсутствие значения.
undefined - это значение по умолчанию для неинициализированных переменных, а null - это значение, которое программист присваивает переменной.
При сравнении значений, null и undefined равны друг другу, но не равны никаким другим значениям.
undefined чаще возникает естественным образом в процессе выполнения кода, в то время как null обычно устанавливается программистом для явного указания на отсутствие значения.
Что такое дженерик
“дженерик” (или “generic”) обозначает использование обобщенных (generic) типов данных или функций, которые могут работать с различными типами данных, без фиксированного привязывания к конкретному типу. Дженерики позволяют писать более универсальный и переиспользуемый код.
что такое utility types
В TypeScript существует несколько встроенных утилитных типов (utility types), которые предоставляют удобные инструменты для работы с типами данных.
Partial T
Создает тип, состоящий из всех возможных(необязательных) частичных вариантов типа T.
Пример:
typescript
interface User {
name: string;
age: number;
}
type PartialUser = Partial User;
// PartialUser имеет тип { name?: string; age?: number; }
Required T
Создает тип, состоящий из всех обязательных свойств типа T.
interface PartialUser {
name?: string;
age?: number;
}
type RequiredUser = Required PartialUser;
// RequiredUser имеет тип { name: string; age: number; }
Readonly T
Создает тип, состоящий из свойств типа T только для чтения.
interface User {
name: string;
age: number;
}
type ReadonlyUser = Readonly User;
// ReadonlyUser имеет тип { readonly name: string; readonly age: number; }
Record K, T
Создает тип объекта с ключами типа K и значениями типа T.
type UserRoles = Record string, string;
// UserRoles имеет тип { [key: string]: string; }
Pick T, K
Создает тип, выбирая из типа T только указанные свойства с ключами типа K.
interface User {
name: string;
age: number;
address: string;
}
type UserInfo = Pick User, ‘name’ | ‘age’;
// UserInfo имеет тип { name: string; age: number; }
Omit
Создает тип, исключая из типа T указанные свойства с ключами типа K.
Пример:
typescript
interface User {
name: string;
age: number;
address: string;
}
type WithoutAddress = Omit;
// WithoutAddress имеет тип { name: string; age: number; }
Exclude T, U
Создает тип, исключая из типа T все типы, которые также являются членами типа U.
type Numbers = 1 | 2 | 3 | 4 | 5;
type OddNumbers = Exclude Numbers, 2 | 4;
// OddNumbers имеет тип 1 | 3 | 5
Extract T, U
Создает тип, выбирая из типа T только те типы, которые также являются членами типа U
type Numbers = 1 | 2 | 3 | 4 | 5;
type EvenNumbers = ExtractNumbers, 2 | 4;
// EvenNumbers имеет тип 2 | 4
NonNullable T
Создает тип, исключая null и undefined из типа T
type NullableString = string | null | undefined;
type NonNullString = NonNullable “NullableString”;
// NonNullString имеет тип string
Что такое мемоизация
Мемоизация - это оптимизационная техника в программировании, которая заключается в сохранении результатов выполнения функции для заданных входных данных (аргументов), чтобы избежать повторного вычисления для одних и тех же входных данных. Это особенно полезно, когда функция является ресурсоемкой и часто вызывается с одними и теми же аргументами.
Принцип мемоизации заключается в том, чтобы кэшировать результаты выполнения функции и возвращать закешированный результат, если функция вызывается с теми же аргументами, что и ранее. Это может значительно ускорить выполнение программы и снизить избыточные вычисления.
В языке программирования JavaScript мемоизация часто реализуется с использованием объекта для хранения кэша. Вот пример простой функции мемоизации на JavaScript:
function memoize(fn) {
const cache = {};
return function (…args) {
const key = JSON.stringify(args);
if (cache[key] === undefined) {
// Вычисление и кэширование результата, если он не найден в кэше
cache[key] = fn.apply(this, args);
}
return cache[key];
};
}
const memoizedExpensiveOperation = memoize(expensiveOperation);
console.log(memoizedExpensiveOperation(5)); // Вычисление для 5
console.log(memoizedExpensiveOperation(5)); // Значение взято из кэша для 5
console.log(memoizedExpensiveOperation(10)); // Вычисление для 10
console.log(memoizedExpensiveOperation(10)); // Значение взято из кэша для 10
В этом примере, если memoizedExpensiveOperation вызывается с теми же аргументами, результат берется из кэша, что позволяет избежать повторного выполнения дорогостоящей операции.
Можешь рассказать о семантическом вресионировании
Семантическое версионирование (Semantic Versioning или SemVer) - это система нумерации версий, предназначенная для упрощения понимания изменений в программном обеспечении. SemVer используется для ясного и структурированного представления версий библиотек, пакетов и приложений, а также для управления зависимостями между ними.
Версии в SemVer состоят из трех чисел: MAJOR.MINOR.PATCH. Каждая из этих частей имеет свою семантику:
MAJOR (главная версия):
Увеличивается, когда внесены несовместимые изменения API.
Это означает, что изменения в MAJOR могут привести к нарушению обратной совместимости с предыдущими версиями.
MINOR (минорная версия):
Увеличивается, когда добавлены новые функциональные возможности, сохраняя обратную совместимость.
Новые функции в MINOR версии не должны нарушать существующее API.
PATCH (патч):
Увеличивается, когда внесены обратно совместимые исправления ошибок.
PATCH версия не должна вносить изменений в API и предназначена для исправления ошибок.
Помимо основной тройки MAJOR.MINOR.PATCH, SemVer также поддерживает дополнительные метаданные и предварительные (pre-release) версии. Например, 1.0.0-alpha.1 - это предварительная версия версии 1.0.0.
Применение семантического версионирования упрощает процесс обновления и управления зависимостями, так как разработчики и системы автоматической сборки могут точно определить, какие изменения включает новая версия, и принимать решения о необходимости обновления на основе этой информации.
Что такое this
this - это ключевое слово в JavaScript, которое используется для обращения к текущему контексту выполнения. Значение this зависит от того, как функция вызывается и где она вызывается.
Глобальный контекст:
Вне зависимости от того, где находится код, в глобальном контексте выполнения this ссылается на глобальный объект, который в браузере часто представлен как window.
Когда функция вызывается в контексте объекта, this ссылается на этот объект.
const obj = {
name: “John”,
greet: function() {
console.log(“Hello, “ + this.name);
}
};
Если функция вызывается как отдельная функция, вне контекста объекта, this ссылается на глобальный объект (в нестрогом режиме) или на undefined (в строгом режиме).
Контекст стрелочной функции:
Стрелочные функции не имеют собственного значения this; вместо этого, они заимствуют значение this из своего окружающего контекста.
В чём отличие хранения данных в local storage от куки
Local Storage и куки (Cookies) - это два различных механизма хранения данных в веб-браузерах, и у них есть несколько ключевых различий:
Объем данных:
Local Storage: около 5-10 МБ
Cookies: Куки обычно ограничены объемом до 4 КБ на домен.
Срок жизни:
Local Storage: могут сохраняться долгосрочно (постоянно),остаются доступными после закрытия браузера и перезапуска компьютера.
Cookies: Куки могут иметь различные сроки жизни, включая временные (только для текущей сессии), постоянные (сохраняются на долгий срок), или срок действия, устанавливаемый программно.
Передача данных на сервер:
Local Storage: Данные не отправляются на сервер автоматически при каждом запросе к серверу. То есть не участвуют в автоматическом обмене данными между клиентом и сервером.
Cookies: Куки автоматически включаются в каждый HTTP-запрос к серверу.
Доступность для JavaScript:
Local Storage: доступны для чтения и записи через JavaScript с использованием API localStorage.
Cookies: доступны через JavaScript с использованием document.cookie, но их API менее удобен для работы.
Безопасность:
Local Storage: Данные доступны только для того же источника (домена), который их создал. Доступ к данным из другого домена ограничен политиками безопасности браузера (same-origin policy).
Cookies: Куки также поддерживают политику same-origin, но могут быть настроены с использованием атрибутов Secure и HttpOnly для улучшения безопасности.
Cookies что это
Cookies (куки) - это небольшие текстовые файлы, которые веб-сайты отправляют и хранят на компьютере пользователя через веб-браузер. Куки содержат информацию о веб-сессии, предпочтениях пользователя, состоянии аутентификации и другие данные, которые могут быть использованы сайтом при последующих посещениях.
Основные характеристики куки:
Хранение данных:
Куки представляют собой текстовые файлы, которые содержат небольшие объемы данных, обычно в виде пар ключ-значение.
Передача на сервер:
Куки автоматически включаются в каждый HTTP-запрос к серверу, связанному с соответствующим доменом. Это позволяет серверу узнавать состояние пользователя и предоставлять персонализированный опыт.
Срок действия:
Куки могут иметь различные сроки действия, включая временные (браузерное сессия), постоянные (сохраняются на долгий срок), или срок действия, устанавливаемый программно.
Безопасность:
Куки поддерживают политику same-origin, что означает, что они могут быть доступны только для того же источника (домена), который их создал.
Доступ через JavaScript:
Куки можно читать и устанавливать через JavaScript с использованием объекта document.cookie. Однако, некоторые атрибуты кук, такие как HttpOnly, могут ограничивать доступ к кукам из JavaScript с целью повышения безопасности.
// Установка куки
document.cookie = “username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/”;
// Чтение куки
const username = document.cookie.split(‘; ‘).find(row => row.startsWith(‘username=’)).split(‘=’)[1];
Куки широко используются для различных целей, включая сохранение сеансов аутентификации, отслеживание пользовательских предпочтений, аналитику и т.д. Однако, из-за своей природы, куки также являются объектом внимания вопросов конфиденциальности и безопасности, и существуют механизмы управления и ограничениями их использования, такие как политики SameSite.
Что такое localstorage + пример
localStorage - это API веб-браузера, предоставляющее простое хранилище данных в виде пар ключ-значение. localStorage предназначен для хранения данных на стороне клиента, и эти данные остаются доступными даже после закрытия веб-браузера или перезапуска компьютера. Это предоставляет простой способ сохранения состояния или локальных настроек веб-приложения.
// Сохранение данных в localStorage
localStorage.setItem(‘username’, ‘JohnDoe’);
// Получение данных из localStorage
const savedUsername = localStorage.getItem(‘username’);
// Получение объекта из localStorage
const storedUser = JSON.parse(localStorage.getItem(‘user’));
console.log(storedUser); // Выводит { name: ‘John Doe’, age: 30 }
Обратите внимание, что данные в localStorage хранятся на уровне домена, и доступ к ним осуществляется только с того же самого домена, который их создал. Кроме того, хотя localStorage обеспечивает удобство, следует быть внимательным при хранении чувствительной информации, поскольку она доступна и изменяема из JavaScript в контексте того же домена.
Какие бывают хуки и чля чего они нужны(без примеров кода)
Хуки (Hooks) в React - это функции, которые позволяют вам использовать состояние и другие возможности React в функциональных компонентах. Хуки предоставляют более простой и чистый способ организации логики компонентов, делают компоненты более переиспользуемыми и обеспечивают удобное управление состоянием.
Вот некоторые из основных хуков React:
useState:
Позволяет добавлять локальное состояние в функциональные компоненты.
useEffect:
Предоставляет возможность выполнять побочные эффекты в функциональных компонентах, такие как выполнение кода после отрисовки компонента или подписка на внешние события.
useContext:
Позволяет компонентам получать доступ к значению контекста из ближайшего провайдера контекста.
useReducer:
Предоставляет альтернативу useState для управления более сложными состояниями с использованием функции редуктора.
useCallback:
Мемоизирует функцию, предотвращая ее пересоздание при каждом рендере компонента. Это полезно, чтобы избежать ненужных ререндеров дочерних компонентов, которым передаются функции.
useMemo:
Мемоизирует результат вычислений, предотвращая их повторное выполнение при каждом рендере компонента. Это полезно для оптимизации производительности.
useRef:
Создает объект ref, который может быть использован для сохранения мутабельных данных между рендерами без вызова повторного рендера.
useImperativeHandle:
Позволяет настроить значение, которое передается родительскому компоненту при использовании React.forwardRef.
useLayoutEffect:
Похож на useEffect, но запускается синхронно после всех изменений DOM. Используется, когда требуется измерить или манипулировать DOM сразу после рендера.
useDebugValue:
Позволяет отображать дополнительные данные в инструментах разработчика React.
Хуки в React предоставляют простой и единообразный способ управления состоянием и жизненным циклом функциональных компонентов, что делает код более читаемым, понятным и поддерживаемым.
Расскажи про области видимости
Глобальная область видимости (Global scope):
Переменные и функции, объявленные в глобальной области видимости, доступны из любой части кода, включая другие функции и блоки кода.
Переменные и функции, объявленные без использования ключевых слов var, let, или const, автоматически становятся глобальными.
Локальная область видимости (Local scope):
Переменные и функции, объявленные внутри функции или блока кода (например, условного оператора if или цикла for), имеют локальную область видимости.
Они доступны только внутри этой функции или блока кода и не видны извне.
Область видимости блока (Block scope):
Введена с появлением ES6 (ECMAScript 2015).
Переменные, объявленные с использованием ключевых слов let и const, имеют область видимости блока, ограниченную фигурными скобками {}.
Такие переменные доступны только внутри блока, в котором они были объявлены, и не видны вне этого блока.
Область видимости функции (Function scope):
Это старый подход, который применяется к переменным, объявленным с использованием ключевого слова var.
Переменные, объявленные внутри функции с использованием var, имеют область видимости, ограниченную функцией, и не доступны вне ее.
Какие бывают значения у свойства position(5)
Свойство position в CSS определяет метод позиционирования элемента на веб-странице. Вот основные значения для этого свойства:
static:
Элемент размещается в нормальном потоке документа, и его позиция определяется обычным порядком в HTML-коде.
Свойства top, right, bottom, left игнорируются при использовании position: static.
relative:
Элемент также размещается в нормальном потоке, но его положение может быть смещено с использованием свойств top, right, bottom, left.
Окружающие элементы занимают место, которое элемент занимал бы в нормальном потоке.
absolute:
Элемент удаляется из нормального потока, и его позиция определяется относительно ближайшего позиционированного (не static) предка.
Если такого предка нет, позиция устанавливается относительно краев окна браузера.
fixed:
Элемент также удаляется из нормального потока, и его позиция задается относительно краев окна браузера, что делает элемент “прикрепленным” к экрану.
Элемент остается на месте при прокрутке страницы.
sticky:
Элемент начинает вести себя как relative, когда он в пределах контейнера, и как fixed, когда он выходит за границы контейнера во время прокрутки.
Это значит, что элемент “приклеивается” к верхней или нижней границе контейнера в зависимости от направления прокрутки.
Как использовать useeffect
Хук useEffect в React используется для выполнения побочных эффектов в функциональных компонентах. Побочные эффекты могут быть, например, запросы к серверу, подписка на события, изменение DOM после рендера компонента и так далее.
Первый аргумент useEffect - это функция, содержащая код для выполнения побочного эффекта.
Второй аргумент useEffect - это массив зависимостей. Если какие-то переменные из этого массива изменяются между рендерами, эффект будет вызван снова. Если массив зависимостей пуст или отсутствует, эффект будет вызываться после каждого рендера.
Что такое семантика
Семантика HTML (HyperText Markup Language) относится к использованию HTML-тегов для передачи смысла и значения структуре веб-документа. В контексте HTML семантика означает использование тегов и их атрибутов для ясного определения содержимого и его роли на веб-странице.
Принципы семантики HTML включают:
Ясное определение структуры документа:
Использование семантических тегов, таких как , , , , , , , позволяет четко определить различные части документа.
Корректное использование заголовков:
Заголовки (<h1> до <h6>) используются для организации информации в древовидной структуре, отражая иерархию и важность контента.
Описание списков и таблиц:
Семантические теги, такие как <ul>, <ol>, <li>, <dl>, <dt>, </dt><dd>, а также теги для создания таблиц (, , , , , ), предоставляют ясное представление структуры списков и таблиц.
Использование адекватных тегов для мультимедийных элементов:
Для встраивания изображений, видео и аудио используются соответственно <img></img>, , , и дополнительные атрибуты и теги, чтобы обеспечить альтернативный контент и улучшить доступность.
Применение тегов форм:
Семантические теги форм, такие как , , , , , , помогают создавать интерактивные формы с четко определенными элементами.
Применение семантики в HTML важно для улучшения читаемости кода, поддержания доступности веб-страниц для всех пользователей, включая тех, которые используют устройства чтения с экрана, и повышения релевантности и индексации контента поисковыми системами. Это также способствует лучшему пониманию структуры документа программами и разработчиками.</dd></dl></li></ol></ul></h6></h1>
Что такое методолгия bem
BEM (Block, Element, Modifier) - это методология именования классов в CSS, предназначенная для организации кода веб-приложений. Она разработана и используется компанией Яндекс для упрощения разработки и обслуживания стилей в больших проектах.
Блок — это абсолютно независимый компонент страницы. Он отвечает только за отображение элементов — то есть, например, у него не может быть внешних отступов margin. Блоки могут включать в себя другие блоки. Имя блока совпадает с именем селектора по классу:
<div class=’‘trafic’’></div>
Элемент — это часть блока, которая имеет смысл только внутри своего блока и отдельно от него не используется. Имя селектора включает имя класса и — через двойное подчёркивание — имя элемента.
<div class=’‘trafic’_light’></div>
Модификатор — это сущность, которая описывает атрибуты блока или элемента: положение, состояние, поведение. Для разделения слов в именах всех сущностей используются дефисы. Модификатор в селекторе именуется через одно подчёркивание после имени элемента или блока.
<div class=’‘trafic’_light_trafic’_light_red’></div>
Что такое прототипы
Прототипы в JavaScript - это механизм, который позволяет объектам наследовать свойства и методы других объектов. Каждый объект в JavaScript связан с другим объектом, который называется его прототипом. Прототипы создают цепочку, известную как цепь прототипов (prototype chain), по которой происходит поиск свойств и методов.
Каждый объект в JavaScript, кроме корневого объекта Object, имеет свой прототип. Например, у объекта, созданного с использованием литерала объекта {}, прототипом будет объект Object.prototype. Если мы создадим функцию, у нее будет прототип, связанный с Function.prototype. Это обеспечивает наследование методов и свойств между различными типами объектов.
Пример создания объекта с использованием прототипа:
javascript
Copy code
// Создание объекта с использованием литерала объекта
const myObject = {};
// Вывод прототипа объекта
console.log(Object.getPrototypeOf(myObject)); // Выведет Object.prototype
JavaScript предоставляет два способа работы с прототипами:
__proto__:
Это устаревший способ доступа и установки прототипа объекта. Лучше использовать методы, предоставляемые ECMAScript 2015 (ES6) и выше.
javascript
Copy code
const obj = {};
const prototypeObj = { key: ‘value’ };
// Установка прототипа через __proto__
obj.__proto__ = prototypeObj;
console.log(obj.key); // Выведет ‘value’
Object.create():
Этот метод создает новый объект с указанным прототипом.
javascript
Copy code
const prototypeObj = { key: ‘value’ };
const obj = Object.create(prototypeObj);
console.log(obj.key); // Выведет ‘value’
Прототипы играют важную роль в системе наследования JavaScript и являются основой для работы с объектами и создания их иерархии. Они обеспечивают механизм делегирования свойств и методов между объектами, что улучшает переиспользование кода и управление сложностью программ.
Что такое rest api
REST API (Representational State Transfer Application Programming Interface) — это архитектурный стиль для построения веб-сервисов, который основан на принципах REST. REST представляет собой набор ограничений и правил для построения распределённых систем.
основные принципы rest api(5)
Основные принципы REST:
Ресурсы (Resources):
Ресурсы представляют собой сущности или объекты, к которым можно получить доступ или с которыми можно взаимодействовать. Ресурсы идентифицируются уникальными URL-адресами.
Представление (Representation):
Ресурсы могут иметь различные представления, такие как JSON, XML или HTML. Клиенты могут обращаться к ресурсам, запросив нужное им представление.
Стейт (Stateless):
Каждый запрос от клиента к серверу должен содержать всю необходимую информацию для понимания и обработки запроса. Сервер не должен хранить состояние между запросами от клиента.
Операции CRUD (Create, Read, Update, Delete):
Операции, соответствующие базовым действиям с данными: создание (POST), чтение (GET), обновление (PUT или PATCH), удаление (DELETE).
Унификация интерфейса (Uniform Interface):
Интерфейс взаимодействия между клиентом и сервером должен быть унифицирован. Это достигается использованием стандартных методов (GET, POST, PUT, DELETE), явной передачей состояния через представления и идентификацией ресурсов.
