Դու գիտե՞ս, ինչ է FCP (First Contentful Paint) մետրիկը: Ենթադրենք, որ ունենք React հավելված — սոցիալական ցանց, որը սերվերային ռենդերինգով է, և կա խնդիր. երբ օգտվողը ուղղակի մուտք է գործում մեկի պրոֆիլ, երկար ժամանակ սպիտակ էկրան է մնում: Կարո՞ղ ես նկարագրել քայլերը — ինչ է տեղի ունենում այն պահից, երբ օգտվողը սեղմում է Enter, մինչև առաջին բովանդակության հայտնվելը:
Frontend
Ինչպե՞ս կկիրառեիր հաճախորդի կողմի պահեստավորումը։
Ինչպես է աշխատում ռեսուրսների կեշավորումը բրաուզերում — ինչպես է բրաուզերը հասկանում, պետք է վերցնի այն կեշից կամ նորից բեռնի, և ինչպես կառավարել դա: Ինչպիսի՞ եղանակներ կան կեշավորման, այդ թվում՝ Service Worker:
Նոր SignupSuccess կոմպոնենտի իրականացում։ Այն պետք է ցուցադրվի գրանցման հաջողության դեպքում գրանցման ձևի փոխարեն։
Կարճ պատմիր քեզ մասին, ինչ հետաքրքրություն ունես ծրագրավորման մեջ, վերջին փորձառությունդ, գուցե ինչ-որ բարդ բան էիր արել.
Կոդ կա — պետք է հասկանալ, թե ինչ է անում, կատարել կոդի վերանայում՝ ի՞նչ խնդիրներ կան և ինչ կարելի է բարելավել։
console.log(1) setTimeout(() => { console.log(2) }, 10) setTimeout(() => { Promise.resolve().then(() => console.log(3)) }, 0); setTimeout(() => { console.log(4) }, 0); new Promise((_, reject) => { console.log(5) reject(6) console.log(7) }).then(() => console.log(8)) .catch(() => console.log(9)) .then(() => console.log(10)) .catch(() => console.log(11)) .then(() => console.log(12)) .then(console.log) .finally(() => console.log(13)) console.log(14)
Խնդրի բարդությունը with memoize: ապահովել, որ memoize ֆունկցիան որպես երկրորդ արգումենտ ստանա կեշի կյանքի ժամանակը միլիսեկունդներում, որի ավարտից հետո կեշը անվավեր է դառնում։
Դու սիրեցիր աշխատել Redux-ով որպես վիճակի կառավարիչ բարդ ձևանմուշների համար:
Դու լսել ես այն մասին, որ վերջերս JavaScript-ում հայտնվել է helper Promise.withResolvers։ Դու պետք է գրես դրա համարժեքը երկրորդ տողի փոխարեն։
Կարող եք նշել Redux-ի մի քանի առավելություններ և թերություններ?
Ինչ կարծիք ունես FSD (Feature-Sliced Design) մեթոդաբանության մասին։
Եր էջում կա 5000 ապրանքների ցանկ, էջը շատ դանդաղ է աշխատում: Բիզնեսը խնդրում է ինչ-որ բան անել դրա հետ: Ինչ առաջարկես?
Պատմեք ձեր նախորդ աշխատանքային վայրերի մասին — ինչ հետաքրքիր եք արել?
Ի՞նչ կլինի, եթե ավելացնենք async ատրիբուտը head-ում գտնվող սցրիպտին: Ինչ տարբերություն կա async և defer-ի միջև։
Դուստրերի էջում և մեսենջերում ցուցադրվում է օգտվողների նման տեղեկատվություն: Երկու տարբերակ կա՝ օգտագործել օգտվողներին տեղական slices-ներում կամ գլոբալ store-ում պահելու։ Այս դեպքում, ինչ առավելություններ և թերություններ ունի գլոբալ store-ը։
Ի՞նչ այլընտրանքներ գիտեք Redux-ի և ինչու նրանք չունեն նրա առավելությունները: Ինչու Redux-ը լավ է փորձարկվում, իսկ կոնտեքստները՝ ոչ?
Ինչպե՞ս կարելի է ստանալ տվյալներ այլ ֆունկցիայի slice-ից (օրինակ, users slice) կոնկրետ օգտվողի էջում, առանց մոդուլների միջև սահմանները խախտելու և ավելորդ հարցումներ չկատարելու։
#React գրանցման ձևանմուշ 1. բացատրեք, թե ինչպես է աշխատում StateProvider-ը, կիսվեք ձեր մտքերով հետ հարցազրուցավարի հետ: 2. նայեք /src/api/mock-ին, բացատրեք, թե ինչպես է այն աշխատում: 3. ստուգեք SubmitButton-ի գույնը և ուղղեք այն: 4. իրականացնել հաճախորդի ձևի վավերացում Signup կոմպոնենտում: (\*\*) հիշեք առաջադրանքի թիվ 9-ը: Կանոններ: - Օգտանուն, Էլ.փոստ, Գաղտնաբառ և Հետևյալ Գաղտնաբառ դաշտերը պետք է ունենան առնվազն 6 նիշ; - Գաղտնաբառը պետք է համապատասխանի Հետևյալ Գաղտնաբառին; - Վավերացումը պետք է կատարվի "Sign Up" կոճակին սեղմելու ժամանակ; - Անվավեր արժեքներ ունեցող դաշտերը պետք է նշվեն (error և helperText props); 6. API-ի պատասխանն կարող է ունենալ սխալ, որը պետք է ցուցադրվի օգտվողին համապատասխան դաշտի մոտ: 7. համոզվեք, որ UserName կոմպոնենտը ցույց է տալիս նոր օգտանունը հաջող ուղարկումից հետո: 8. իրականացնել նոր SignupSuccess կոմպոնենտը: Այն պետք է ցուցադրվի գրանցման ձևի փոխարեն: 9. իրականացնել սերվերի վավերացում համապատասխան դաշտերի համար:
Կարող ես կարճ խոսել քո վերջին փորձի մասին և ինչ ես սպասում նոր աշխատանքից, ինչ ես փնտրում նոր դիրքում?