#вопросы_с_собеседований

Компания: Лантан. React. Грейд middle/middle+. ЗП - 250к.

Продолжаем делиться полным списком вопросов и задач на разные позиции в разных компаниях. На сколько вопросов легко бы ответили?)

По моему мнению собеседование довольно стандарное, может только задача будет сложной, если до этого не решали похожих.

1️⃣ Что такое специфичность в CSS?

2️⃣ Расскажи про SCSS-миксины для медиа-запросов

3️⃣ Использовал сложные функции в SCSS и полифилы?

4️⃣ Как обеспечивается кросс-браузерная поддержка CSS?

5️⃣ Какие архитектуры CSS знаешь и какая нравится больше?

6️⃣ Чем отличаются способы объявления переменных в JS?

7️⃣ Какие способы копирования объекта в JS?

8️⃣ Как организована работа с асинхронным кодом в JS?

9️⃣ Какие браузерные хранилища существуют?

1️⃣0️⃣ Какие уязвимости знаешь и как с ними борешься?

1️⃣1️⃣ Как защититься от XSS?

1️⃣2️⃣ Какими React-хуками пользуешься чаще всего?

1️⃣3️⃣ Чем отличаются useMemo и useCallback?

1️⃣4️⃣ Что такое дженерики в TypeScript?

1️⃣5️⃣ Чем отличаются interface и type в TypeScript?

1️⃣6️⃣ Найди ошибки и реализуй компонент для отображения древовидной структуры:

import React from "react";

const exampleFiles = [
{
id: 1,
name: 'src',
children: {
{
id: 2, name: 'components', children: [
{ id: 3, name: 'Button.tsx', children: [] }
],
},
{ id: 4, name: 'index.ts', children: [] }
}
},
{
id: 5,
name: 'README.md',
children: []
}
];

const FileStructure = () => {
return (

{/* Отобразить дерево */}

)
}

export default FileStructure;

*********** Решение: ***********

const exampleFiles = [
{
id: 1,
name: "src",
children: [
{
id: 2,
name: "components",
children: [{ id: 3, name: "Button.tsx", children: [] }],
},
{ id: 4, name: "index.ts", children: [] },
],
},
{ id: 5, name: "README.md", children: [] },
];

const TreeNode = ({ node }) => (

{node.name}
{node.children.length > 0 && (

{node.children.map((child) => (

))}

)}

);

const FileStructure = () => (

{exampleFiles.map((node) => (

))}

);

export default FileStructure;
******************** Разбор ********************
1. TreeNode — рекурсивный компонент: вызывает сам себя для каждого дочернего узла
​2. Базовый случай рекурсии (условие остановки) — children.length > 0
​3. Не забываем про key

1️⃣7️⃣ Виртуализация списков — зачем нужна и как реализуется?
Если нужно разобрать ответы на вопросы с этого собеседования — ставь 🔥, а также пиши в комментарии какой вопрос или задача были интереснее всего.

Уже 66 разработчиков в группе устроились на классные позиции, если хочешь подготовиться с нами к интервью в крупную компанию — велком @codepunks_bro)