Требования к Frontend разработчику

От frontend разработчика требуется следующее:

• Посещение ежедневных встреч по проекту

• Посещение встреч с frontend разработчиками

Технические требования

В текстовом описании ниже перечислены некоторые требования, которые необходимо знать и исполнять разработчику. Также в тексте ниже могут встречаться знаки-звездочки - " * ", которые сигнализируют о том, что требованием пренебрегать не стоит

1. Знание HTML5 / CSS3, Sass, Tailwind;

В каком случае необходимо использовать svg/картинку/webp

семантика в HTML (main, section, aside, footer, etc.)

вёрстка с использованием grid, flexbox

*Знание абсолютно всех html тегов не требуется, важно знать теги для нумерованных, буквенных списков, семантические теги и прочие основные теги.

2. Знание JS, TypeScript

JS:

Основы js

*Примитивные типы данных:

• number;

• string;

• boolean;

• null;

• undefined;

• object;

• symbol;

• bigint

*Операторы сравнения/присваивания

*Условия (if) switch, тернарный оператор

*Циклы for, for in, for of, while, do while, выход из цикла, операторы break и continue.

Функции: классификация, анонимные, именованные, замыкание, callback функции, setTimeout/clearTimeout

ООП, классовый подход

Динамическая типизация

Методы массивов:

every;

fill;

*filter;

*find;

findIndex;

findLast;

flat;

forEach;

includes;

indexOf;

join;

*length;

*map;

*pop;

*push;

reduce;

reverse;

shift;

*slice;

*some;

sort;

splice;

toReversed;

toString;

unshift;

from;

Работа со страницей

*Получение элементов

*События (всплытие/погружение, делегирование , объект события (основные св-ва event), цикл событий)

*Обработчики событий

*Отмена стандартных событий браузера

Параметры глобальных объектов: window, document, screen

Js параметры элементов страницы

Работа скриптов с течением времени

Регулярные выражения (для чего нужны)

JS в работе

this, контекст вызова

Конструкторы

*Формат передачи данных JSON

*Общение с сервером, fetch-запросы

Инкапсуляция данных внутри класса

*Перехват серверных ошибок try/catch

*Promise.race(), promise.all()

*работа с LocalStorage, sessionStorage, cookie

Стандарт ES6

*Переменные let/const

*Стрелочные функции

*Интерполяция (конкатенация строк)

Promise +reject, fullfilled, pending

*Деструктурирование const [one, two, three] = foo

*Spread {...obj}, Rest (остаточные параметры, (a, b, …restParams) )

Понимание работы JS

call stack

event loop

Стандарт ES7, ES8…

Оператор возведения в степень **

*async/await

Array.prototype.includes

Strict Mode

JSON.parse, JSON.stringify

*Object.keys,

*Object.values(),

Object.entries()

Object.prototype.hasOwnProperty()

TS:

*type,

*interface

отличие type, interface

*generic

Utility Types:

Partial, Pick, *Omit, Record, Required,

3. Умение работать в Git

Понимание/умение использовать git pull, git merge, git commit, git push, git clone, git branch, git checkout, знание того, как производится разрешение конфликтов

4. Знание React, Next.js.

React:

Компоненты

*JSX

*useState

*Рендер по условию

*Декомпозиция, компонентный подход, модульность

*Функциональные компоненты, отличие от классовых

Рендеринг

*Жизненный цикл компонента

*Списки и ключи

*Пропсы

Рефы (createRef, useRef)

События

HOC’и (компоненты высшего порядка)

Хуки

useState, useEffect, useLayoutEffect, useCallback, useRef, useMemo, useReducer, useContext, кастомные хуки

Роутинг

React router

Suspense

Portal

Nextjs:

*понимание технологии SSR

*server components

*client components

различие серверных и клиентских компонентов

middleware.ts

dynamic import

5. Работа с REST Api (CRUD)

Необходимо понимать как осуществляется взаимодействие с сервером, как информация отправляется на бэкенд - в каком случае с помощью body или querystring параметров, также понимание для чего используются методы для запросов ниже:

*post,

*get,

*patch/put +отличие

*delete

знание основных error status codes - успешные/ошибочные/непредвиденные

Написание запросов с помощью библиотеки swr

6. *Для чего требуется стейт менеджер; Знание Zustand - хранение/изменение данных

7. Валидация

React Hook Form - *умение валидировать формы, валидация динамических форм

8. *Использование установленной архитектуры (структуры) папки frontend

Как осуществляется проверка ваших знаний:

В формате встречи в дискорде;

Для проверки знаний установленной архитектуры проекта необходимо предоставить ссылку на ваш проект на гитхабе/гитлабе, который повторяет установленную архитектуру.