Frontend

Na czym opiera się reaktywność w Vue 3?

Proxy przechwytuje operacje na obiekcie, a mechanizm track/trigger śledzi odczyty i uruchamia aktualizacje - ref() i reactive() mają różne zastosowania.

Na czym opierała się reaktywność w Vue 2?

Na Object. defineProperty ustawianym per właściwość przy inicjalizacji.

Czego nie wykrywał Vue 2 bez Vue. set()?

Dodania nowej właściwości do obiektu po utworzeniu komponentu.

Dlaczego ref() wymaga. value, a reactive() nie?

reactive() opakowuje obiekt Proxy, ref() opakowuje dowolną wartość w obiekt z jedną właściwością. value.

Jaka jest pułapka destrukturyzacji reactive()?

Traci reaktywność - kopiuje wartości jako zwykłe prymitywy.

Jak bezpiecznie zdestrukturyzować reactive() zachowując reaktywność?

Przez toRefs() przed destrukturyzacją.

Kiedy computed jest lepszym wyborem niż watch?

computed liczy i cache'uje wartość pochodną zależną od innych reaktywnych danych, watch służy do side effectów przy zmianie wartości, np. request HTTP, zapis do localStorage albo reakcja na zmianę parametru.

Jaki realny problem mixinów rozwiązuje Composition API?

Kolizję nazw i niejasne źródło właściwości używanych w komponencie.

Co zwraca funkcja generyczna fetchResource<T>(url): Promise<ApiResponse<T>>?

Odpowiedź z pełnym typowaniem data zależnym od podanego typu T.

Co robi Omit<User, 'id'>?

Usuwa wskazane pole z typu.

Co robi Partial<T>?

Czyni wszystkie pola typu opcjonalnymi.

Jak discriminated union pozwala TypeScriptowi zawężać typ w if?

Przez wspólne pole o wartościach literalnych (discriminant), np. status.

Czym różni się interface od type w praktyce?

interface wspiera declaration merging (dwie deklaracje łączą się automatycznie) i dobrze opisuje kształt obiektu, type dodatkowo opisuje union/intersection i inne typy bardziej ogólne niż sam kształt obiektu.

Kiedy koniecznie trzeba użyć interface zamiast type?

Przy rozszerzaniu typu z zewnętrznej biblioteki przez augmentację.

Co włącza strictNullChecks w tsconfig?

Wymóg jawnej obsługi null/undefined - bez tego można przypisać je gdziekolwiek bez ostrzeżenia.

Dlaczego strict mode boli włączyć na końcu dużego projektu?

Ujawnia od razu setki miejsc, gdzie gwarancja braku null była cicho łamana.

Co to jest SPA?

Single Page Application - aplikacja ładuje się raz, dalsza nawigacja bez przeładowania strony.

Czym SPA różni się od MPA pod względem SEO?

MPA ma lepsze SEO domyślnie, SPA wymaga dodatkowych zabiegów.

Czym różni się CSR od SSR?

CSR renderuje w przeglądarce, SSR po stronie serwera.

Co poprawia SSR względem CSR?

SEO i czas do pierwszego bajtu (TTFB).

Co to jest Virtual DOM?

Reprezentacja struktury UI w pamięci - framework porównuje poprzedni i nowy VDOM (diffing) i na tej podstawie wykonuje potrzebne zmiany w realnym DOM.

Co oznacza reaktywność w kontekście frontendu?

Zmiana stanu danych automatycznie aktualizuje UI.

Po co znać cykl życia komponentu?

Pozwala pobierać dane, czyścić zasoby i optymalizować wydajność w odpowiednim momencie.

Jaka jest kolejność podstawowych hooków cyklu życia komponentu Vue?

beforeCreate, created, mounted, updated, unmounted.

Czym różnią się props od state?

Props to dane przekazywane z zewnątrz, state to stan lokalny komponentu.

Co oznacza one-way data flow?

Dane płyną w jednym kierunku, od rodzica do dziecka - ułatwia debugowanie.

Co to jest event bubbling?

Zdarzenia propagują się od elementu docelowego w górę do rodzica.

Co to jest event delegation i po co się go stosuje?

Obsługa zdarzeń na rodzicu zamiast na każdym dziecku - poprawia wydajność.

Kiedy potrzebny jest globalny store zarządzania stanem?

Gdy wiele komponentów współdzieli stan i props drilling staje się problemem.

Co to jest props drilling?

Przekazywanie propsów przez wiele poziomów komponentów, sygnalizujące potrzebę globalnego stanu.

Co to jest CORS?

Mechanizm bezpieczeństwa przeglądarki kontrolujący zapytania cross-origin.

Jak rozwiązać problem CORS?

Odpowiednie nagłówki po stronie serwera albo proxy/ta sama domena.

Czym różni się debounce od throttle?

Debounce wywołuje funkcję po przerwie, throttle ogranicza częstotliwość wywołań.

Co to jest lazy loading komponentów?

Ładowanie komponentów dopiero gdy są potrzebne, zmniejsza initial bundle.

Co to jest code splitting?

Podział kodu JS na mniejsze paczki, poprawia czas ładowania.

Jaką rolę pełni bundler (np. Vite, Webpack)?

Kompilacja, minifikacja, obsługa modułów i hot reload.

Jak sobie radzić z SEO w SPA?

SSR, pre-rendering i poprawne meta tagi.

Co to jest Progressive Web App (PWA)?

Aplikacja webowa działająca jak natywna - offline, powiadomienia push, instalacja.

Co obejmuje accessibility (a11y)?

Dostosowanie UI dla osób z niepełnosprawnościami - klawiatura, screen readery, kontrasty.

Jakie są najczęstsze błędy frontendowe na produkcji?

Brak obsługi błędów API, problemy z performance, memory leaki, race conditions.

Co jest kluczowe we współpracy backend-frontend jako fullstack developer?

Jasny kontrakt API, wspólna dokumentacja, testy kontraktowe.

Na czym opiera się reaktywność w Vue 3?

Proxy przechwytuje operacje na obiekcie, a mechanizm track/trigger śledzi odczyty i uruchamia aktualizacje - ref() i reactive() mają różne zastosowania.

Na czym opierała się reaktywność w Vue 2?

Na Object. defineProperty ustawianym per właściwość przy inicjalizacji.

Czego nie wykrywał Vue 2 bez Vue. set()?

Dodania nowej właściwości do obiektu po utworzeniu komponentu.

Dlaczego ref() wymaga. value, a reactive() nie?

reactive() opakowuje obiekt Proxy, ref() opakowuje dowolną wartość w obiekt z jedną właściwością. value.

Jaka jest pułapka destrukturyzacji reactive()?

Traci reaktywność - kopiuje wartości jako zwykłe prymitywy.

Jak bezpiecznie zdestrukturyzować reactive() zachowując reaktywność?

Przez toRefs() przed destrukturyzacją.

Kiedy computed jest lepszym wyborem niż watch?

computed liczy i cache'uje wartość pochodną zależną od innych reaktywnych danych, watch służy do side effectów przy zmianie wartości, np. request HTTP, zapis do localStorage albo reakcja na zmianę parametru.

Jaki realny problem mixinów rozwiązuje Composition API?

Kolizję nazw i niejasne źródło właściwości używanych w komponencie.

Co zwraca funkcja generyczna fetchResource<T>(url): Promise<ApiResponse<T>>?

Odpowiedź z pełnym typowaniem data zależnym od podanego typu T.

Co robi Omit<User, 'id'>?

Usuwa wskazane pole z typu.

Co robi Partial<T>?

Czyni wszystkie pola typu opcjonalnymi.

Jak discriminated union pozwala TypeScriptowi zawężać typ w if?

Przez wspólne pole o wartościach literalnych (discriminant), np. status.

Czym różni się interface od type w praktyce?

interface wspiera declaration merging (dwie deklaracje łączą się automatycznie) i dobrze opisuje kształt obiektu, type dodatkowo opisuje union/intersection i inne typy bardziej ogólne niż sam kształt obiektu.

Kiedy koniecznie trzeba użyć interface zamiast type?

Przy rozszerzaniu typu z zewnętrznej biblioteki przez augmentację.

Co włącza strictNullChecks w tsconfig?

Wymóg jawnej obsługi null/undefined - bez tego można przypisać je gdziekolwiek bez ostrzeżenia.

Dlaczego strict mode boli włączyć na końcu dużego projektu?

Ujawnia od razu setki miejsc, gdzie gwarancja braku null była cicho łamana.

Co to jest SPA?

Single Page Application - aplikacja ładuje się raz, dalsza nawigacja bez przeładowania strony.

Czym SPA różni się od MPA pod względem SEO?

MPA ma lepsze SEO domyślnie, SPA wymaga dodatkowych zabiegów.

Czym różni się CSR od SSR?

CSR renderuje w przeglądarce, SSR po stronie serwera.

Co poprawia SSR względem CSR?

SEO i czas do pierwszego bajtu (TTFB).

Co to jest Virtual DOM?

Reprezentacja struktury UI w pamięci - framework porównuje poprzedni i nowy VDOM (diffing) i na tej podstawie wykonuje potrzebne zmiany w realnym DOM.

Co oznacza reaktywność w kontekście frontendu?

Zmiana stanu danych automatycznie aktualizuje UI.

Po co znać cykl życia komponentu?

Pozwala pobierać dane, czyścić zasoby i optymalizować wydajność w odpowiednim momencie.

Jaka jest kolejność podstawowych hooków cyklu życia komponentu Vue?

beforeCreate, created, mounted, updated, unmounted.

Czym różnią się props od state?

Props to dane przekazywane z zewnątrz, state to stan lokalny komponentu.

Co oznacza one-way data flow?

Dane płyną w jednym kierunku, od rodzica do dziecka - ułatwia debugowanie.

Co to jest event bubbling?

Zdarzenia propagują się od elementu docelowego w górę do rodzica.

Co to jest event delegation i po co się go stosuje?

Obsługa zdarzeń na rodzicu zamiast na każdym dziecku - poprawia wydajność.

Kiedy potrzebny jest globalny store zarządzania stanem?

Gdy wiele komponentów współdzieli stan i props drilling staje się problemem.

Co to jest props drilling?

Przekazywanie propsów przez wiele poziomów komponentów, sygnalizujące potrzebę globalnego stanu.

Co to jest CORS?

Mechanizm bezpieczeństwa przeglądarki kontrolujący zapytania cross-origin.

Jak rozwiązać problem CORS?

Odpowiednie nagłówki po stronie serwera albo proxy/ta sama domena.

Czym różni się debounce od throttle?

Debounce wywołuje funkcję po przerwie, throttle ogranicza częstotliwość wywołań.

Co to jest lazy loading komponentów?

Ładowanie komponentów dopiero gdy są potrzebne, zmniejsza initial bundle.

Co to jest code splitting?

Podział kodu JS na mniejsze paczki, poprawia czas ładowania.

Jaką rolę pełni bundler (np. Vite, Webpack)?

Kompilacja, minifikacja, obsługa modułów i hot reload.

Jak sobie radzić z SEO w SPA?

SSR, pre-rendering i poprawne meta tagi.

Co to jest Progressive Web App (PWA)?

Aplikacja webowa działająca jak natywna - offline, powiadomienia push, instalacja.

Co obejmuje accessibility (a11y)?

Dostosowanie UI dla osób z niepełnosprawnościami - klawiatura, screen readery, kontrasty.

Jakie są najczęstsze błędy frontendowe na produkcji?

Brak obsługi błędów API, problemy z performance, memory leaki, race conditions.

Co jest kluczowe we współpracy backend-frontend jako fullstack developer?

Jasny kontrakt API, wspólna dokumentacja, testy kontraktowe.

Czym różni się var od let i const?

var ma zasięg funkcyjny i podlega hoistingowi z inicjalizacją undefined, let/const mają zasięg blokowy i trafiają do "temporal dead zone" przed deklaracją.

Co to jest hoisting w JS?

Deklaracje (var, function) są "przenoszone" na górę zasięgu podczas parsowania, dostępne przed miejscem zapisu w kodzie - ale bez przypisanej wartości.

Co to jest domknięcie (closure)?

Funkcja, która zapamiętuje dostęp do zmiennych ze swojego zewnętrznego zasięgu, nawet po zakończeniu działania funkcji zewnętrznej.

Czym różni się == od === w JS?

== porównuje po konwersji typów (coercion), === porównuje bez konwersji, sprawdzając też typ.

Co jest falsy w JS?

false, 0, ", null, undefined, NaN - wszystko inne jest truthy, w tym pusta tablica [] i pusty obiekt {}.

Czym różni się null od undefined?

undefined oznacza brak przypisanej wartości (np. niezainicjalizowana zmienna), null to świadomie przypisany "brak wartości".

Jak działa this w zwykłej funkcji a jak w arrow function?

Zwykła funkcja ma this zależne od sposobu wywołania (kto woła), arrow function nie ma własnego this - dziedziczy je leksykalnie z otaczającego zasięgu.

Do czego służą call(), apply() i bind()?

Pozwalają jawnie ustawić this dla funkcji - call/apply wywołują ją od razu (różnią się przekazywaniem argumentów), bind zwraca nową funkcję z na stałe związanym this.

Czym jest prototypowe dziedziczenie w JS?

Obiekty mają wewnętrzne odwołanie do prototypu, z którego dziedziczą właściwości/metody - łańcuch prototypów zamiast klasycznych klas.

Czym jest Promise i jakie ma stany?

Obiekt reprezentujący wynik operacji asynchronicznej - stany: pending, fulfilled, rejected.

Jak async/await upraszcza pracę z Promise?

Pozwala pisać kod asynchroniczny w stylu synchronicznym - await zatrzymuje wykonanie funkcji do rozstrzygnięcia Promise, bez zagnieżdżonych. then().

Czym różni się microtask queue od macrotask queue w event loop?

Microtaski (Promise. then, queueMicrotask) wykonują się w całości przed kolejnym macrotaskiem (setTimeout, event UI) - dlatego Promise "wyprzedza" setTimeout(0).

Dlaczego setTimeout(fn, 0) nie wykonuje się natychmiast?

Trafia do kolejki macrotasków i czeka aż stos wywołań (call stack) się opróżni oraz wykonają się wszystkie microtaski.

Co robi operator spread (...) na tablicy/obiekcie?

Rozwija elementy tablicy lub właściwości obiektu w miejscu, np. przy kopiowaniu lub łączeniu.

Czym różni się spread od rest, skoro obie używają "..."?

Spread rozwija wartości (np. w wywołaniu funkcji/literale), rest zbiera wiele argumentów/elementów w jedną tablicę (np. w parametrach funkcji).

Co robi destrukturyzacja tablicy/obiektu?

Wyciąga wartości do osobnych zmiennych w jednym przypisaniu, np. const {a, b} = obj albo const [x, y] = arr.

Do czego służy optional chaining (?.)?

Bezpieczny dostęp do zagnieżdżonej właściwości - zwraca undefined zamiast rzucać błąd, gdy pośredni obiekt jest null/undefined.

Czym różni się nullish coalescing (?) od operatora ||

?|? zwraca prawą stronę tylko gdy lewa to null/undefined, || zwraca prawą stronę dla każdej wartości falsy (np. 0 czy ").

Co robi JSON. stringify() i JSON. parse()?

stringify() zamienia obiekt/wartość JS na string JSON, parse() robi odwrotnie - string JSON na obiekt/wartość JS.

Czym różni się deep copy od shallow copy obiektu?

Shallow copy kopiuje tylko pierwszy poziom (zagnieżdżone obiekty nadal są współdzielone przez referencję), deep copy kopiuje rekurencyjnie wszystkie poziomy.

Co zwracają array. map(), array. filter() i array. reduce() w JS?

map() nową tablicę przekształconych elementów, filter() nową tablicę elementów spełniających warunek, reduce() pojedynczą zredukowaną wartość.