Frontend

Фронтендте қай бағыттарды өз күшті жақтарыңыз деп санайсыз?

Класс компоненттерінде componentWillUnmount әдісі бар. Функционалды компонентте ұқсас әдісті қалай жүзеге асыруға болады?

Middle

СБЕР

React не үшін керек, және неге таза JavaScript-те қолданба жазбаймыз?

import React, { useMemo } from 'react'; import { Button, Table, Tag } from 'antd'; import { useAppDispatch, useAppSelector } from '../hooks/redux'; import { Product } from '../types'; import { deleteProduct } from '../store/productSlice'; const categoryColors: Record<string, string> = { Electronics: 'blue', Accessories: 'green', Tools: 'orange', }; export const ProductList: React.FC = () => { const allProducts = useAppSelector((state) => state.products.items); const products = useMemo(() => [...allProducts], [allProducts]); const dispatch = useAppDispatch(); const handleDelete = (id: string) => { dispatch(deleteProduct(id)); }; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Sales', dataIndex: 'sales', key: 'sales', sorter: (a: Product, b: Product) => a.sales - b.sales, render: (v: number) => v.toLocaleString(), }, { title: 'Category', dataIndex: 'category', key: 'category', render: (category: string) => ( <Tag color={categoryColors[category]}>{category}</Tag> ), }, { title: 'Action', key: 'action', render: (_: any, record: Product) => ( <Button danger onClick={() => handleDelete(record.id)}> Delete </Button> ), }, ]; return <Table dataSource={products} columns={columns} rowKey="id" />; };

Мысалы, жаңа жауап түрі (мысалы, видео) енгізілсе — оны біз құрған деректер құрылымында қалай ескеру керек?

Middle+

Okko

Жоба үшін GraphQL неге таңдалды?

Егер NgRx болмаса, оның орнына не қолданар едіңіз?

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}> Increment </button> <ul> {arr.map((n, index) => <li key={index}>{n}</li>)} </ul> </> ) } export default () => <LazyInit arr={[1, 2, 3]} />; --- Оң жақтағы әңгімеде талқыланатындар: - TypeScript-те генериктерді пайдалану: "<T extends object, K extends keyof T>" - Деректердің жол екенін тексеру үшін тип қорғаушыны пайдалану: "isString(data: unknown): data is string { ... }" - useState-ті функциямен пайдалану арқылы әр рендер кезінде қайта іске қосылуын болдырмау: ``` const [state, setState] = useState(getComplexData); // немесе const [state, setState] = useState(() => getComplexData()); ``` - useState-ке берілген функция тек бір рет компонент жүктелгенде орындалады. - 11-ші жолда prev.concat арқылы күйді тікелей өзгерту туралы ескерту. --- Техникалық тапсырма — React компонентінің кодын талдау және мүмкін болса түзету немесе оңтайландыру, әсіресе: - useState-ті дұрыс ленив инициализациялау. - Күйді тікелей өзгертуінен аулақ болу. - TypeScript генериктері мен тип қорғаушыларды түсіну. - Батырма басылғанда күйді дұрыс жаңарту.

Middle+

IT One

Сервер сұраудан кейін браузерге не қайтарады, соның ішінде бет те?

Өзіңіз туралы, тәжірибеңіз және неге фронтенд-әзірлеуді таңдағаныңыз туралы айтыңыз.

Қазіргі уақытта қай қаладасыз? Гибридті жұмыс форматы туралы не ойлайсыз (аптасына бір рет офиске бару)?

Микрофронтенд жинақталған бандлдары қайда орналастырылған?

Автоматтандырылған тесттер жазасыз ба? Тест жазу тәжірибеңіз бар ма?

Event Loop туралы айтыңыз: синхронды код, микротаскалар және макротаскалар қандай тәртіппен орындалады?

Middle+

Лига Цифровой Экономики

Деректер қорына бірнеше сұрауды бір уақытта жіберу керек және барлық сұрауларды алғаннан кейін ғана орындауды жалғастыру керек, олар шешілсе де, қабылданбаса да. Қандай статикалық промис әдісін пайдалану керек?

WeakMap дегеніміз не?

Middle+

IT One

Келісімшарт форматын өзгерту мүмкін бе: дереу шексіз мерзіммен бастау немесе сынақ/уақытша кезеңін қысқарту?

Тірі кодтау: берілген кодты ашыңыз және барлық қателерді, визуалды қателерді және кемшіліктерді табыңыз (пайдаланылмайтын айнымалылар, useCallback, useEffect тәуелділіктері, useMemo және т.б.).

Rem мен em қалай ерекшеленеді?

Function.prototype.bind әдісін жүзеге асырыңыз — ол контекстті қабылдайтын және байланыстыруланған контекстпен жаңа функцияны қайтаратын функция.

Middle+

СБЕР