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

Компания: Лантан. 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 (
    <div>
      {/* Отобразить дерево */}
    </div>
  )
}

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 }) => (
  <li>
    {node.name}
    {node.children.length > 0 && (
      <ul>
        {node.children.map((child) => (
          <TreeNode key={child.id} node={child} />
        ))}
      </ul>
    )}
  </li>
);

const FileStructure = () => (
  <ul>
    {exampleFiles.map((node) => (
      <TreeNode key={node.id} node={node} />
    ))}
  </ul>
);

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

1️⃣7️⃣ Виртуализация списков — зачем нужна и как реализуется?

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

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