Frontend

Aké statické metódy Promise poznáš? Porozprávaj mi o nich.

Middle+

IT One

Napíšte funkciu getUserProfile, ktorá prijíma userId ako argument a načíta profil používateľa z API endpointu "[link]". Funkcia by mala zaznamenať profil používateľa, ak je fetch úspešný, a zaznamenať chybové hlásenie, ak fetch zlyhá.

Middle+

IT One

import React, { useState, useEffect, useLayoutEffect } from 'react'; export default () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("každé renderování 1")); console.log("každé renderování 2"); useEffect(() => console.log("každé renderování 3")); return ( <button onClick={() => setCount((prevProps) => ++prevProps)}> Zvětši </button> ); } // montáž -> každé renderování 2, každé renderování 1, každé renderování 3 // aktualizace -> každé renderování 2, každé renderování 1, každé renderování 3 // odmontování 4

Middle+

IT One

Čo je Set? Čo môžeme odovzdať pri volaní new Set ako argument?

Middle+

IT One

const S = { id: 1, meno: "Ivan", vek: "39", tel: [phone] }; function getParam(obj, key) { return obj[key]; } getParam(S, "tel"); getParam(S, "job");

Middle+

IT One

Vystupujú let a const (hoisting)? Čo sa deje pri ich prístupe pred deklaráciou?

Middle+

IT One

Napíšte abstraktnú implementáciu komponentu Child s memoizáciou cez React.memo. Aký je druhý argument, ktorý React.memo prijíma?

Middle+

IT One

Napíšte, čo sa stane pri prvom renderovaní — v akom poradí sa zobrazia console.logy. Čo sa stane po kliknutí?

Middle+

IT One

Čo je WeakSet?

Middle+

IT One

import React, { useState, useEffect, useRef, useContext, useReducer, useMemo } from 'react'; const someFunc = (arr) => { return [...arr].sort((a, b) => a - b); }; const LazyInit = (props) => { const [arr, setArr] = useState(() => someFunc(props.arr)); const onClick = () => { setArr((prev) => prev.concat(prev.length + 1)) } return ( <> <button onClick={onClick}> Zvýšiť </button> <ul> {arr.map((n, index) => <li key={index}>{n}</li>)} </ul> </> ) } export default () => <LazyInit arr={[1, 2, 3]} />; --- Diskusia na pravej strane sa zaoberá: - Používaním TypeScriptu s generikami: "<T extends object, K extends keyof T>" - Kontrolou, či sú údaje reťazec, pomocou typu strážca: "isString(data: unknown): data is string { ... }" - Používaním useState s funkciou, aby sa zabránilo opakovaniu pri každom renderovaní: ``` const [state, setState] = useState(getComplexData); // alebo const [state, setState] = useState(() => getComplexData()); ``` - Funkcia odovzdaná do useState sa vykoná iba raz pri načítaní komponentu. - Upozornenie na priame mutovanie stavu na riadku 11 s prev.concat. --- Technická úloha je analyzovať a prípadne opraviť alebo optimalizovať kód React komponentu, pričom sa zameriava na: - Správnu lazy inicializáciu stavu pomocou useState. - Vyhnúť sa priamej mutácii stavu. - Pochopenie generík TypeScriptu a typových strážcov. - Zabezpečiť, aby komponent správne aktualizoval stav pri kliknutí na tlačidlo.

Middle+

IT One

Čo je to uzáver?

Middle+

IT One

Existujú tri zdroje údajov, ktoré vracajú rovnaké informácie. Ako získať odpoveď od najrýchlejšieho?

Middle+

IT One

Aký je rozdiel medzi Map a WeakMap?

Middle+

IT One

Porozprávaj mi o hooku useState v React.

Middle+

IT One

Ako sa v JavaScripte vytvárajú funkcie? Aké sú spôsoby vytvárania funkcií a v čom sa líšia?

Middle+

IT One

Prečo nie je možné s šípkovými funkciami pracovať s konštruktorom new?

Middle+

IT One

Aké utilitárne typy TypeScript používaš pri práci? Hovor o Record, Pick, Omit, Partial, Required, Parameters, Exclude, Extract.

Middle+

IT One