Вводная: что с ИТ?
Эта статья дополняет и расширяет для статью за вопросы для Frontend middle за 2024 год.
Давайте откровенно, обложка это статьи ярко отображает суть собеседований на Senior Fullstack-разработчика и поиска работы последний год (а возможно и несколько лет).
Абсолютно все события с 2020 года привели нас в точку, где рынок переполнен, инструменты HR специалистов координально изменились, а сервисы типо ХэХэ внедрили просто убийственные штуки в виде фильтров (по задумке они должны разгрузить HR от обработки большого числа резюме, но я думаю эти инструменты просто убьют принцип найма и всем это аукнется через пару лет).
Большое кол-во ит-шников из медиа пространство уже просто кричат о том, что сейчас нереально не то что устроиться на работу, а просто дойди до собеседования, которые зачастую вообще неадекватные. Это действительно так, уже не только джунам, но и middle с senior разработчиками сложно найти работу (я не говорю про сарафан или персональные приглашения).
На протяжении нескольких месяцев я не сильно активно ищу работу и мониторю рынок на позицию Senior Fullstack-developer. Ниже личный опыт поиска на протяжении 4 недель, самое важное что вам нужно знать, 90% отказов приходят через 2-5 минут после отклика (работают автофильтры и автоотказы, ни один HR даже не просмотреть отклик).
Но, если вы все таки дойдете до собеседования, то ниже свежая информация (еще раз, все основы не изменились с прошлого года и описаны подробно в этой статей, тут я лишь буду дополнять) из вопросов и практических задач, которые были у меня.
Набор скилов
- Javascript
- Typescript
- React / Angular / Vue ( или любой другой frontend фреймворк | библиотека )
- Styled-component, css-inline, Sass, tailwind
- Redux / Redux-toolkit / Redux-Saga
- RTK Query
- Git ( или опыт с любым другим удаленным репозиторием )
- Архитектура: FSD, миркросервисы и т.д
- Yarn / Npm
- Next.js | Vite.js / Nuxt.js
- Webpack / Rollup / Vite
- Css + Html ( верстка, семантика, адаптация, базовая оптимизация )
- Scss, Less ( и любые другие препроцессоры )
- CI/CD
- Scum / Agile
- Node.js | Express
- Figma
- Swagger
- Redis
- Jest / React Testing Library / Cypress
- Docker
- Nest.JS
- PostgreSQL / MySql / MongoDB
Общие вопросы
На senior позицию все меньше стали гонять по базовой базе, что спрашивали за последние 4 собеседования:
- SOLID. Да, классика, но уже не заставляют слово в слово рассказывать что это такое и приводить примеры (видимо ИИ уже все научились пользоваться и собеседующие наконец-то перестали задрачивать), достаточно в общих черта рассказать про принципы которых вы придерживаетесь.
- Utility-типы. Если вы работаете/планируете работать с Typescript, то важно знать что это такое. Если кратко, то utility-типы помогают работать с интерфейсами и описанием данных: выбирать нужные поля, удалять ненужные, описывать отдельные, делать обязательноми/не обязательными. Основные: Record, Omit, Partial, Pick, Required, Readonly, Exclude, Extract
- Generics(Дженерики). Они помогают гибко описывать переиспользуемый код (параметры, объекты, данные, как вам больше нравится). Если не знаете или знаете плохо — стоит подтянуть.
- Ref. Был пример: в компоненте использовался useRef с каким-то значением, был метод доторый в current переприсваивал значение, вот вопрос, что будет при выводе. Спойлер: Ничего! останется первое значение заданое при инициализации useRef. Стоит повторить если:
- не знаете как работает этот хук
- как задавать ему значения если значение ref не изменяется при ререндере компонента
- Базовая оптимизация. Обновите знания о хуках useMemo, useCallback и библиотеках для оптимизации и кеширования.
- Redis, RTQ. Базовая оптимизация и кеширование кол-ва запросов.
- Архитектура. FSD, Flux / Redux Architecture, Atomic Design. И хотя бы понимание сути микросервисной архитектуры.
В основном из теории все, вскольз спрашивали пару мелочей вроде: сколько очередений в event-loop и назвать не примитивные типы данных в JS, но дальше уже общались по конкретных задачам.
Практика
Написать хук useDelayedLoading
Есть компонент:
import "./styles.css";
import { useState, useEffect } from "react";
function useDelayedLoading(isLoading: boolean): boolean {
}
export default function App() {
const [loading, setLoading] = useState(false);
const delayedLoading = useDelayedLoading(loading);
const shortLoading = () => {
setLoading(true);
setTimeout(() => setLoading(false), 300);
};
const longLoading = () => {
setLoading(true);
setTimeout(() => setLoading(false), 2000);
};
return (
<div className="App">
<div style={{ display: "flex", gap: "5px" }}>
<button onClick={shortLoading}>Short loading</button>
<button onClick={longLoading}>Long loading</button>
</div>
<div style={{ marginTop: "5px" }}>
{delayedLoading ? "Loading..." : "Loaded"}
</div>
</div>
);
}
Задача:
Написать хук useDelayedLoading, который будет отложенно отображать статус загрузки.
Суть:
Иногда данные которые мы фетчим могут приходить с мизерной задержкой из-за чего появляется «мерцание», то есть по сути загрузки не происходит, но на миг мы видим прелоадер. Вот эту проблему мы должны устранить.
Решение специально не прикрепляю, попробуйте решить самостоятельно, на крайний случай GPT вам в помощь.
Поправить код
Задача:
По необходимости поправить код и объяснить свое решение
interface IWorker {
work(): void;
eat(): void;
}
class Human implements IWorker {
work() {
console.log('Human is working');
}
eat() {
console.log('Human is eating');
}
}
class Robot implements IWorker {
work() {
console.log('Robot is working');
}
eat() {
throw new Error('❌ Method "eat" is not supported by Robot.');
}
}Определить порядок выполнения кода
Задача:
Определите порядок выполнения кода, что будет выведено в консоли.
Комментарий автора:
Попробуйте сами сначала определить порядок, а потом можете прям в консоле выполнить код и проверить себя.
function syncTask(message) {
console.log(message);
}
function asyncTask(success) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (success) {
resolve('Async Task Success');
} else {
reject('Async Task Failed');
}
}, 1000);
});
}
console.log('Start');
syncTask('First sync task executed');
asyncTask(true)
.then(result => {
console.log(result);
return asyncTask(true);
})
.then(result => {
console.log(result);
return asyncTask(false);
})
.then(result => {
console.log(result);
})
.catch(error => {
console.error('Error caught:', error);
});
syncTask('Second sync task executed');
asyncTask(true)
.then(result => {
console.log(result); // Async Task Success
});
console.log('End');
Написать Controller NestJS
Задача:
Вам показывают код сервиса (максимальной простой для примера), вам нужно под него написать controller.
Комментарий автора:
В целом это простая задача, скорее просто на «дурака», который сказал что работает с NestJs, и выучил основную теорию.
Если быть откровенным, я немного был в затруднении, потому что никогда не писал полностью ни контроллер, ни сервис, ведь все уже автоматизировано и новый тип данных можно добавить просто через nest g resource some_resource. Так что, все эти copilot, ИИ, декораторы и автозаполнения заставляют нас немного деградировать)
import { Injectable } from '@nestjs/common'
import { CreateVisitDto } from './dto/create-visit.dto'
import { UpdateVisitDto } from './dto/update-visit.dto'
import { fetchClient } from 'src/service/client'
@Injectable()
export class UserService {
async create(createVisitDto: CreateVisitDto) {
return fetchClient.create(createVisitDto)
}
async findAll() {
return fetchClient.get()
}
async findOne(id: string) {
return fetchClient.get(id)
}
async update(id: string, updateVisitDto: UpdateVisitDto) {
return fetchClient.patch(id).set(updateVisitDto).commit()
}
async remove(id: string) {
return fetchClient.delete(id)
}
}Было еще пару простых вопросов, по типу: «что не так с кодом?», с классическими проблемами:
- небыло key ключей при map
- неправильно передавались зависимости в useMemo или useEffect
- просьба отрефакторить код, визуально сократить (типо: () => { return someFunction()} до () => someFunction()) и так далее
Вывод
На рынке сейчас очень тяжело. Самое сложное это пробиться через все фильтры, барьеры и HR слепоту. Отшивают просто 90% откликов в течении 5 минут, остальные ще делятся пополам примерно тех кто ответил и тех, кто проигнорировал.
Также из-за всего этого стало много неадекватных предложение и коммуникаций. Несколько раз мне просто писали «на отвали», либо писали: «Привет, нас заинтересовало твое резюме. Вот ссылка, забукай созвон.» 🤷♂️. Без представления. Ни кто вы, что вы, чем занимаетесь (если скидывали вакансию, то там были битые ссылки на компанию, непонятные условия и т.д.).
Если вы только начинаете, большой вопрос — стоит ли продолжать?!) А так, — успехов, не сдавайтесь и все получится)
