Frontend

Question 1

React Reconciliation

Answer 1

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

Question 2

JSX

Answer 2

Это синтаксис элементов реакта. Он транспайлится в JS, а потом рендерится в DOM. Под капотом используется React.createElement.

Question 3

SSR

Answer 3

Позволяет отрендерить страницу на стороне сервера, что помогает поисковикам проще индексировать страницу. После загрузки страницы в браузере, запускается JS и страница дальше работает как SPA. Этот процесс называется hydration.

Question 4

Provider & Context

Answer 4

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

Question 5

В чому особливість Redux?

Answer 5

Redux — бібліотека для централізованого керування станом у додатках. Щоб внести зміни, потрібно тригернути екшн; редюсер — чиста функція, яка змінює частину стейту на основі екшена, а селектор дозволяє отримати потрібну частину даних зі стейту.

Question 6

React Synthetic Events

Answer 6

Синтетичні події повторюють нативні події браузера, але водночас мають єдиний інтерфейс для всіх браузерів.

Реакт обробляє івенти в кореневому компоненті. По одному на кожний тип події, додаючи обробники для кожного елементу і додаючи відповідні target і currentTarget.

Коли ми натискаємо на кнопку, спочатку спрацьовує фаза capture: обробники цієї фази виконуються від батьків до нащадків. Потім іде фаза bubbling (спливання), під час якої звичайні обробники спрацьовують від нащадків до батьків. Лише подія focus не спливає.

Метод e.stopPropagation() зупиняє подальше проходження події по обробниках.

Question 7

Web worker

Answer 7

Позволяет запускать долгий синхронный код в отдельном потоке. Главные поток и воркер могут обмениваться сообщениями, через onmessage и postmessage. Есть еще shared worker, с ним нужно работать через объект port (специальный объект для коммуникации). У него нет доступа к DOM.

Question 8

Service worker

Answer 8

Service Worker дозволяє кешувати ресурси сайту і працювати офлайн. Функціонально він схожий на проксі-сервер, що дає можливість модифікувати запити та відповіді, підміняючи їх даними з кешу. З його допомогою можна створювати PWA, а також обробляти push notifications.

Question 9

IndexDB

Answer 9

Асинхронная NoSQL база, поддерживает транзакции, индексы. Хранит пары ключ, значение.

Question 10

HTML <script async … />

Answer 10

Позволяет начать грузить JS асинхронно не блокируя дальнейший рендеринг. Скрипт будет запущен, как только будет загружен, даже до полной загрузки страницы. Порядок запуска не гарантирован.

Если его нет, то скрипт будет загружен и запущен в том месте где он указан и только потом продолжится рендеринг.

Question 11

HTML <script defer … />

Answer 11

Позволяет начать грузить JS асинхронно не блокируя дальнейший рендеринг.Гарантирует порядок запуска скриптов. Запускает скрипты когда уже вся страница отрендерилась.

Question 12

What is the difference between authentification and authorization?

Answer 12

Authentication - the process of provinguser’s identity to the system or simply login.

Authorization - the process of providing permissions toresources inside the system.

Question 13

Симметричное и ассиметричное шифрование

Answer 13

Симметричное - можно зашифровать и расшифровать 1 ключем.

Ассиметричное - публичным ключем можно зашифровать, приватным ключем можно расшифровать.

Question 14

HTTPS

Answer 14

1. Браузер и сервер делают handshake, если сертификат валидный, генерирует сеансовый ключ, шифрует его публичным ключем и отправляет серверу.
2. Безопасно переданный сеансовый ключ используется браузером для шифрования и сервером для расшифровки. Это быстрее, чем использовать приватный/публичный ключи.

Question 15

JWT

Answer 15

Имеет структуру header.payload.signature. В хедере хранится алгоритм и тип. В пейлоде публичные данные о пользователе. Подпись нужна для проверки валидности. Все данные закодированны с помощью base64url и их может прочитать кто угодно.

Question 16

Какие уязвимости может иметь веб приложение?

Answer 16

• Лучше избегать регулярок в запросе, так как можно написать регулярку, которая положит приложение и базу.
• Стоит защитить поля ввода от XSS атак, экранируя спецсимволы.
• Нужно включить заголовки связанные с безопасностью. Они позволить защититься от общеизвестных атак.Для этого достаточно подключить пакет helmet.
• Стоит включить httpOnly для cookies. Чтобы с браузера нельзя было их подменить.
• Нужно проверить свои npm пакеты. Не делают ли они чего-то вредного.
• Защита от DDoS. Ограничить колличество запросов по времени с одного ip.
• Не стоит error stack возвращать вместе с ошибкой реквеста. Достаточно её просто логировать.

Question 17

Сookies

Answer 17

Это данные, отправленные сервером, которые хранятся на клиенте и вкладываются в каждый запрос. Обычно используется для идентификации пользователя на сервере. Полезно, когда он еще не зарегистрировался.

Question 18

Как работает WebSocket?

Answer 18

Он работает через TCP протокол. Данные могут передаваться в обе стороны. В самом начале происходит обмен через http, с помощью специальных заголовков, дальше все идет через протокол websocket. Сервер может решить, устанавливать связь или нет. При скейлинге бекенда нужен дополнительный брокер для работы.

Question 19

Чи може script в <head /> виконати дії з dom?

Answer 19

• Може виконати якщо додати defer, тоді він виконається після повного завантаження DOM.
• Можна додати колбек DOMContentLoaded, всередині нього можна вже працювати з DOM.
• Перемістити в кінець body.

Question 20

В чому мінуси Context і навіщо Redux або стейт у вигляді атомів?

Answer 20

При використанні контексту - перерендер усіх компонентів, підписаних на контекст, навіть якщо вони використовують лише частину стану. Redux чи атомарні стейти (Jotai/Recoil) дозволяють локалізувати оновлення стану.

Question 21

Як хуки працюють під капотом? Чому не можна використовувати if для хуків?

Answer 21

Під капотом хуки компонента зберігаються у впорядкованому масиві. Потім по hook index викликає кожен з них. If ламає цю систему викликів по індексу.

Question 22

Коли треба використовувати useCallback?

Answer 22

Якщо функція використовується в useEffect, щоб він не викликався на кожен рендер через зміну посилання.
Якщо використовується React.memo, щоб компонент не ререндерився через зміну посилання на функцію.
Треба уникати зайвого використання useCallback, через те що це навантажує памʼять.

Question 23

Коли треба використовувати useMemo?

Answer 23

Щоб уникнути зайвих обчислень на кожен перерендер, або уникнути зміни посилання на результат, коли це не потрібно.

Question 24

Що таке DOM?

Answer 24

Document Object Model - це інтерфейс для роботи з HTML в JS. Представляє собою дерево елементів у вигляді вузлів. Браузер парсить HTML і будує DOM дерево. Ми можемо змінювати його стилі, атрибути, контент тощо.

Question 25

Різниця між event.currentTarget та event.target?

Answer 25

event.target - елемент до якого привʼязана подія. event.currentTarget - елемент на якому відбулася подія.

Question 26

Web Components

Answer 26

Web Components дають можливість створення багаторазових і незалежних компонентів, які працюють у будь-якому фреймворку або без нього.

Shadow DOM забезпечує інкапсуляцію стилів і логіки компонента, вони будуть ізольовані від решти сторінки та не конфліктують із глобальними CSS.

class MyMessage extends HTMLElement {
constructor() {
super();
// Створюємо Shadow DOM з відкритим доступом (можна отримати через element.shadowRoot)
this.attachShadow({ mode: ‘open’ });
this.shadowRoot.innerHTML = `
<p>${this.getAttribute(‘text’) || ‘Привіт!’}</p>
`;
}

static get observedAttributes() {
    return ['text']; // Слідкуємо за змінами атрибуту "text"
}

attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'text') {
        this.shadowRoot.querySelector('p').textContent = newValue;
    }
} }

customElements.define(‘my-message’, MyMessage);

Lit, Stencil або Hybrids бібліотеки спрощують синтаксис, додають реактивність і оптимізують створення Web Components для великих проєктів.