👨‍💻 Собеседование frontend junior+ разработчика (CSS, HTML, JS, React, Typescript, Redux)

Транскрипция видео:

• Всем привет Сегодня мы проводим Моё первое собеседование на этом канале сегодня у нас в гостях Саша Александр будем собеседовать его на позицию джун джн плюс даже сказал бы Мидл минуси то есть вопросы будут уже не совсем простые где-то где-то будет чуть сложные план у нас какой у меня есть перечень вопроси ков Мы про ним сверху вниз идём будет чуть-чуть кода и задани не уровня там ловких с подвохами далет Я считаю реальные задачи на своём опыте проходил Я считаю очень важно какие-то практичные практические знания спрашивать у

  00:00:02 - 00:01:10

• кандидата вот Саш тебе слово давай начнём с того что ты расскажешь о себе о своём опыте про работу возможно кто работал возможно про прок Привет зовут Меня Саша мне 21 сейчас по опыту могу рассказать то что я учился в университете там вот собственно я с ве Бом и столкнулся там же у меня и появилась первая работа не буду рассказывать как я на неё попал Но в общем работал я верстальщиком и работал я верстальщиком в районе 10 месяцев когда я попал на работу я вообще не знал ни htm ни сисса Ничего абсолютно ни джеса Полный ноль

  00:00:36 - 00:02:10

• был вот понемногу для меня был ментором вот он мне рассказывал что к чему довольно быстро во всё это вкатился и после полугода как я работал в верста я встретился короче чисто случайно нашёл там в ютубери по реакту начал его изучать очень активно и уже начал искать работу как к девелопера попал я Ну потом я уже ул с этого места работы когда Ну с верстальщика и попал на тройни в одну компанию я там 2 месяца просидел там нам видосики всякие короче показывали дали нам под проект такой Ну я бы не сказал что

  00:01:24 - 00:03:11

• сложный но на то время когда я всё это только начала изучать Для меня он был реально сложный там был по Client nextjs typescript а тогда я только на дсе писал и ничего кроме А Ире не использовал и было реально сложно проект там заключался в том что надо было выводить статистику есть приложение где там люди заходят кликают куда-то и эта вся статистика сохраняется на сервере А нам надо было выводить графики и таблицы что куда каждый пользователь нажал и ско Раз вот А после тройни э Я уже попал на ту

  00:02:20 - 00:03:49

• работу на которой сейчас нахожусь работаю там уже чуть больше года э год и оди месяц вот а в основной стек - это typescript react а nextjs э игра в ql один раз только использовал Наверное это не можно не считать как мой действительный сейчас стек Red даже был redx Tool Kit один раз один проект вот в принципе принципе вся история побу Ну слушай Вот ты говоришь что у тебя был опыт Да см слом а вот с работал вообще то есть плюс там ста Да работа просто вот с рестом Это основная часть всего Да с А да мы же использовали

  00:03:06 - 00:04:49

• там использовали в двух проектах Слушай вот ты мне когда писал ещё в телеграме Я уже считал что просто ты чуть-чуть занижает свой уровень Мне кажется зря я всё-таки нап сделал очень большой У тебя опыт на самом деле Ну то есть типа Посмотрим как ты будешь сегодня отвечать на вопросы потому что мне кажется для тебя это будет очень легко если Ну посмотрим посмотрим в принципе так могу сказать опыт довольно обширно Прикольно вот кстати у меня на стриме последнее спрашивали вот насколько было вва сложно в знаю Вот

  00:03:59 - 00:04:57

• только получается абсолютно ничего сложного нету ну что там там есть Папочка просто для страниц просто весь код генерируется там на сервере и отправляется на клиент там пробуешь пропсы там есть статические пропсы или нет пробрасывается ВМ ничего сложного Я не увидел когда первый раз с ним столкнулся пол соглашусь что как бы как Нет очень много плюшек но вот основная вот озвучил что генерируется на сервере и я как под Люка знаешь собесе буду ловить тебя на твоих словах А для чего вообще нужен Так ну рендер сервера

  00:04:27 - 00:05:54

• или для чего од из осно при для его причина использования неста это в тех приложениях в которых которые зависят от SEO то есть важно то где именно находится сайт в поиске когда ты в Гугле его гуглишь короче как он высоко там находится Как хорошо боты читают код Потому что когда мы простое ре приложение создаём И если мы правой кнопкой класним вот в браузере на про и посмотрим напишем какой-то код и посмотрим там инспектировать Я не помню ик а не View page Source нажимаем и тогда у нас выведется получается та

  00:05:22 - 00:06:49

• HTML на которая в па лежит получается у нас при первой загрузке страницы будет пустой HTML просто будет ну будет B и внутри Body будет просто div Root а весь код который мы написали он не появится то же самое увидят и боты которые зайдут на страницу они увидят пустой HTML и собственно ничего не поймут что на самом деле происходит на самой странице А если мы используем nextjs то получается вся разведка уже отрендерить на сервере и присылается уже на клиент готовая разметка где боты могут понять что к чему Вот ну это была основная

  00:06:09 - 00:07:37

• причина зачем мы использовали для оптимизации не сказала да то есть когда мы просто юзаем обычный react да онти вставляет потом весь Код да соответственно рендерит его вставляет в HTML а сервер на сервере происходит рендер всего Кода да мы получаем готовую htm Всё правильно сказал ну что ж давай это был такой вопрос э вне плана Давай пройдёмся по базе в принципе по базе Вот расскажи в принципе как можешь углубляясь можешь Нет как мы вообще в принципе получаем веб-страницу Какие вот механизмы происходят я не требую от тебя прям типа

  00:06:54 - 00:08:03

• знаешь какие там пошагово как это происходит Просто своими словами вот как происходит получение веб-страницы что используется и как как как как всё-таки вот мы получаем вот этот вот красивый HTML Это очень хороший вопрос на который мне довольно будет сложно ответить потому что я не сильно это знаю но ладно А ну по идее там же несколько запросов происходит когда страница появляется получается у нас есть именно пустой HTML который запрашивается а внутри Хеда и внутри боди есть тех которые отвечают

  00:07:28 - 00:08:43

• за то какие будут стили у нас и какие будут скрипты получается какой JS будет подгружается какой-то JS в тегах я не помню как тег для сисса называется там ну мы там пишем путь собственно к нашему C и он весь грузится первым первым загружается HTML потом собственно по htm идёт и смотрит какие есть теги для загрузки дальше контента вот собственно загружается CSS загружается скрипты там же для Я тоже не помню как называется там настройки тега для скриптов там вроде бы Def или как-то так там пишется это мы выбираем Как

  00:08:05 - 00:09:41

• именно нужно чтобы в какой именно момент времени нужно чтобы скрипт загрузился после всей загрузки страницы или нет вот как-то так наверное это всё что могу сказать по этому поводу сечас попытаюсь тебе подсказать конкретно которы хотел получить CSS кстати через я тебе напомню получает про Всё правильно сказал смотри а вот где ты можешь наблюдать Какие ресурсы мы получаем вот в браузере где ты можешь это посмотреть а вот в Нетворк что мы обычно видим то есть туда смотришь когда вот работаешь в приложении как мы это

  00:08:59 - 00:10:13

• называем что я обычно вижу запросы вижу Ну Абсолютно верно CP запросы правильно Да да которые идут у нас по какой архитектуре архитектуре http Ну да и это есть как бы оно А - это архитектура http - Это протокол точно стно хотел на это тебя вывести Но вот давай поговорим чуть-чуть про растапи в принципе ты всё правильно сказал но чуть-чуть надо базу знать Ты должен понимать это То есть ты как инженер то есть понятное дело мы программисты но мы должны быть чуть-чуть инженерами ты должен чуть-чуть понятное

  00:09:38 - 00:10:49

• дело ты можешь не пересказать мне там знаешь я забыл уже сам на самом деле Между какими слоями это происходит Да там ДНС сервер ищем айпишник и так далее но вот базу хотя бы что да что у нас есть http протокол Да который по которому получаем HTML соответственно Да И вот есть архитектура пи которая согласует что вот как выглядят вообще вот рест запросы что в них есть Расскажи вот вкратце Ну раз запросы они происходят по http протоколу собственно э у нас есть в http протоколе есть какие-то хедеры и есть какой-то лоуд

  00:10:14 - 00:11:39

• получается боди наш в зависимости от того какой-то есть запрос вот есть несколько запросов там Get Post Put delite Ну это такие самые популярные которые используются Вот и например в гед запросах мы используем там uri параметры в пост запросы мы используем боди для того чтобы передать какую-то информацию а вот Т Это вроде бы для обновления Delete для удаления А и собственно хедеры нужны для того чтобы описать А сам запрос добавить например для какой-то Ну если на сервере есть там какие-то Мидл Веры для авторизации э там корсы мы

  00:10:56 - 00:12:58

• прокиды нужные хедеры для запроса и прикиды и через боди или через памс нужную информацию для запроса Вот наверное пока что всё что могу сказать Слушай забыл ещё одну маленькую важную часть ре запросов как мы понимаем что всё хорошо или нехорошо прошло а хорошо или нехорошо прошло это ну нам приходит ошибка в респонс вот тогда мы понимаем Ну Есть ещё такие такой запрос Вроде бы он называется фй перед тем как я тебя оста очень простая вещь Ты просто действительно про не забыл я тебе напомню статусы статусы коды Точно точно

  00:11:57 - 00:13:25

• статус коды Ну статус коды Там они от 200 до или от 100 до 500 200 статус это ЕС о статус 201 - это статус остальные наверное не назову 00 - это дирек какой-то произошёл РСО - это по-моему там B requ это какая-то ошибка псо - это серверная ошибка вроде бы ну смотри если псо - это серверная ошибка тосо - это клиентская ошибка Т Да а вотка Вот всегда ли гарантирует что Ошибка именно произошла со стороны клиента думаю что нет ну 400 - это B requ значит что-то либо отправился данные как-то как-то не так типа не та структура

  00:12:45 - 00:14:45

• данных которую ты отправляешь А если серверной Роны отвечено это не знаю Ну ладно давай попробуем по-другому а вот двухсотый статус коз гарантирует что всё прошло успешно Нет ну ладно ну ээ сам код нам отправляет сервер типа это ж в зависимости от того как там прописали э это всё на сервере э типа статус код ничего не гарантирует Ну мы просто можем примерно знать всё ли О'кей или всё ли не о'кей всё Абсолютно верно да то есть пи - это просто договорённость между разработчиками Да чтобы общаться

  00:13:50 - 00:15:13

• получается да ээ всё отлично вообще саже давай продолжим дальше мы затронем вообще HTML cgs Расскажи мне э вот вкратце вообще что это за звери и зачем они нам нужны вообще в вебе Ну HTML - это сама разметка страницы получается HTML - это скелет самой страницы а в нём есть определённые теги которые отвечают за определённые блоки вот CSS это именно стили получается то она отвечает за то как будет визуально выглядеть страница голы HTML может например вывести только текст и ты с ним больше ничего не

  00:14:34 - 00:16:07

• сможешь сделать или просто поставить блок И ты ничего с ним не сможешь сделать он будет одного и того же размера мы можем поменять определённые правила того как как он будет выглядеть как будет выглядеть текст на страницы и собственно за весь визуал отвечает CSS за то что за весь контент который на странице отвечает HTML J в этом же плане добавляет на страницу интерактива например там можно JS можно добавлять убирать какие-то HTML теги добавлять определённые классы к собственно этим самым меняя CSS какие-то

  00:15:21 - 00:16:53

• свойства добавляя классы через JS в HTML вот э получается да JS меняет интерактив CSS - это Визуальная составляющая страницы HTML - это это скелет то как то какой контент сейчас в данный момент находится на странице Всё верно Давай поговорим теперь про каждое в отдельности в принципе вот HTML ты сказал ранее Что состоит из тегов да Но зачем эти теги вообще люди используют Какие вот основные ты знаешь то есть что они за собой несут Вот такой у меня вопрос основные которые я использую это естественно это простой блок без

  00:16:10 - 00:17:40

• стилей се для определённой секции блока п параграф - Это для вывода текста Спан Ну Спан использую например Когда в параграфе надо выделить какой-то определённый кусочек текста р тер это семантические теги или для вывода списков получается в htm есть свои собственные заготовки для того чтобы выводить определённые Ну это тоже как бы это тоже как договорённость это было создано Вот например есть списки и те же самые боты на Они будут смотреть и вот они увидят х допустим и дальше идут лишки это уже они

  00:16:54 - 00:18:39

• понимают что это какой-то список если этот список там через SE как-то описать то боты Будут понимать что собственно в нём внутри находится вот собственно для этого Важно писать всё время не один и тот же самый тех и его стили а знать какие собственно существуют теги и для чего они нужны вот чтобы ну это всё взаимосвязано короче грубо говоря поддерживать как раз семантику так сказать грамотность твоего H как раз хотел спросить у тебя Но ты уже ответил э почему я вместо хедера футера не могу использовать там секшен

  00:17:56 - 00:19:12

• использовать div просто Но ты уже Молодец ответил А да но расскажи мне тогда про Вторую такую часть HTML которая очень важна это доступность да Или accessibility или а A1 там 11 Да вот вот это вот всё А ну вот с этим как раз у меня особого опыта не было А я знаю что это существует Потому что если мы даже зайдём сейчас в Google там э напишем там Рандомный запрос и начнём нажимать Tab то у нас под лого Гугла начнёт появляться dropdown менюшка Вот это и есть accessibility это собственно Как мы можем использовать

  00:18:34 - 00:19:56

• страницу допустим если у нас нету мышки Мы можем по ней сёрфить только используя клавиатуру Вот для этого нужно прописывать Access для того чтобы люди которые не имеют определённого девайса или ещё чего-то могли всё-таки сёрфить страницу они остановиться просто на неё загрузке И ничего с ней не могут сделать вот Вот для этого используется Shift Tab T и стрелочки вот Ну клавиатура Слушай а вот абилити только на клавиатуре заканчивается или есть ещё какой-то Аспект я 100% уверен что ты видел на многих сайтах этот ещё момент который в

  00:19:14 - 00:20:40

• абилити тоже входит на самом деле Ну наверное всё что я могу сказать это не только клавиатура а ещё абилити нужен для людей там которые там ограничены в чём-то Надеюсь ты понял о ЧМ наме Не ну слушай например зрение Как тебе Да да например зрение это наверное самое главное Да но я на самом деле не могу сейчас вспомнить ни одного примера с этим Ну слушай а я вот не знаю обычно на всяких официальных сайтах как раз по регламенту делают знаешь вот версии для слабовидящих для дальтоников может видел когда-нибудь как

  00:19:57 - 00:21:08

• раз для увеличения шрифта есть там вот такие штуки Это тоже на самом деле абилити видел но я не не юзал не я тоже Я на своей практике сам такое даже и не делал и тоже не использую но просто чтобы ты как раз знал что это тоже на самом деле не только я имел в виду когда не только тура Я имел в виду что ещё вот да ты правильно сказал есть ограничение людей и Иногда люди не видят твой сайт То есть это тоже надо поддержать контрастность да то есть например слишком яркую кнопку делаешь Это тоже на самом деле доступность ладно ptm в

  00:20:40 - 00:21:34

• принципе всё отлично давай по CSS перейдём Вот смотри Ты знаешь как расшифровывается вообще HTML ой HTML CSS конечно же CSS а нет но я уверен что одна из букв S - это Styles Ну там не помню что первое означает Кадин КАД да Я вот как раз вот У меня вопрос что вообще значит Каскад о Каскад наверное не отвечу на этот вопрос но у меня есть какая-то идея в голове но думаю она ошибочна Ну ладно мы на самом деле ты сможешь ответить на этот вопрос далее э сейчас подведём а Слушай вот все сессии Существует ли

  00:21:07 - 00:22:24

• наследование стилей вообще Э да да существует А как оно вот Ну реализовано вот на Ну такой пример маленький Расскажи например если мы для родительского блока укажем какой-то фн Сай то в в дочернем блоке этот нй тоже будет ввязаться если я хочу перекрыть эти стили Какие у меня возможности Есть Как я могу это сделать в дочернем блоке это Ну если это не примени тогда я просто издаю отличны знак это перекрывает полностью стиль ещё это можно перекрыть тем что ну это наверное в реакте такое не юзает но если мы

  00:21:48 - 00:23:36

• просто используем голы HTML CSS то можно заюзал и ещё есть стили которые селектор через именно тех Мы например используем ланей и через именно тех по идее там ещё выше приоритет Да я Абсолютно верно по-моему если сам правильно помню это называется или нене не не вспомню Ну короче более конкретно задать селектор на самом-то деле более больше описать селектор Вот и на самом деле Каскад э если опять же не дать мне соврать это как раз имеется в виду что CSS это да у нас таблица стилей и все стили идут сверху вниз то есть стили которые

  00:22:47 - 00:24:07

• последние они главнее правильно Если опять же не указывать не переопределять вот что такое Каскад Вот хорошо давай поговорим тогда про CSS слышал ли ты о Mobile First да методологии такой который сейчас очень популя что ты можеь сза есть у нас приложение например или просто страница в которой Обязательно должно быть адаптив к мобильным устройствам то Mobile First Это значит что мы будем создавать сначала мобильную версию а потом уже от неё идти к десктоп версии тобто то есть адаптировать её сначала от мобилки

  00:23:34 - 00:24:59

• до десктоп Всё правильно то есть приоритет У нас меняется вот расска вообще про адаптив есть Что такое адаптивная вёрстка и как её реализовать я всё время использу Ну я Mobile ни разу не использовал это это да это не про Mobile First это в принципе вот вопро я понимаю да Ну ну я всё время использую такую штуку как собачка медия наверное все это используют это собственно это которая проверяет какой данный момент точнее ширина вьюпорта или высота вьюпорта и в зависимости от этого она меняет стили для определённых

  00:24:22 - 00:25:56

• селекторов ну а сама адаптивная вёрстка что подразумевается под этим понятием адаптивная вёрстка подразумевается то что у нас контент будет корректно отображаться на любом размере экрана понятие отзывчивая вёрстка по-моему адаптивная вёрстка я могу сейчас Конечно неправильно сказать но когда мы например нажимаем сейчас как она называется секунду когда мы responsive нажимаем вза у нас появляются такие пауки это Можно будет увидеть например мы тянем за край экрана и у нас плавно там увеличивается перепрыгивают короче

  00:25:11 - 00:27:00

• элементы вот когда responsive правильно responsive вёрстка то у нас есть определённые брейкпоинты именно на этих брейд поинтах у нас как бы страница начнёт там прыгать короче полностью меняться например там под десктоп одно под таблет другое под Mile третье и вот у нас есть определённые вот эти два брейк поинта уменьшаем страниц один бкпо Оно бац сжалось второй брейкпоинт бац сжалось меняется вёрстка Ну я так себе это представляю ну но только наоборот адаптивное как раз то что ты сейчас описывал То есть у нас под каждый Под

  00:26:05 - 00:27:13

• каждый экран есть своя версия грубо говоря да CSS Ну то есть опять же Media quy который мы описываем А отзывчивое это как раз да Обычно реализовывается знаешь там делая у контейнерах Да да да чтобы контент просто сужа да то есть у нас чу-чуть уменьшался и ещё называют его резинка на самом деле там ну типа знаешь у Да да да э был вопрос про селекторы но ты опять же молодец заранее ответил что типа я понимаю что ты понимаешь что такое селекторы не буду тебя спрашивать Какие ты знаешь потому что ну всегда можно

  00:26:40 - 00:27:39

• загуглить перейдём к самому сочном это ДС Да давай начнём от самых простых вопросов к самым сложным вот типа данных каких ты Какие типы данных Ты знаешь а я это даже я говорил что я не буду готовиться А я их вот подзабыл а что у нас есть э строки э string Number undef N символ и наверное ссылочный объект наверное это тоже объект наверное это всё что я сейчас скажу больше ничего давай давай я тебе подскажу ещё ты забыл на самом деле очень важный тип данных вот когда какое-то условие У нас есть Блин я сам слу Я на пальцах считал Давай

  00:27:09 - 00:28:38

• е [музыка] хо ВС Абсолютно верно и вот у меня следующий вопрос ма какой ти да Это наверно Я думаю либо либо вроде бы должно быть или Или скажи Но вообще по-моему если сделать от функции там будет Но все мы тут понимаем что под капотом у джеса ВС объект правильно Поэтому да Слушай вот такое понятие в джее есть преобразование типов понима м яво за механизм такой да если мы напишем ко Log строка в кавычках 10 + 1 мы получим 101 А это потому что JavaScript а у него нет такого но если мы в другом бы языке написали у нас бы вылезла бы

  00:28:04 - 00:29:54

• ошибка типа мы к одному типу добавляем совсем другой а JS приводит всё к одному общему типу вот в этом случае которым описал он приводит к стринге всё Угу Слушай а вот э как быть со сравнением когда вот у нас разные типы мы можем преобразовывать их вот как как мне сравнивать вообще значение Ну если мы используем двойное равно то мы э сравниваем именно значение которое есть а если мы используем тройное равно то мы сравниваем и значение и тип ещё Угу а ВС верно Слушай ну вот я вот новенький в два скрипте ко Зачем так

  00:29:18 - 00:30:49

• много в ЧМ Разница вообще когда что использовать Это старая до es6 синтаксис варом обозначали переменные Вот но у неё по-моему был у Вара другой Другая область видимости имет имет блочную область видимости Вась но я примерно понимаю в ЧМ отличие вернёмся к Ну мы просто обозначаем какую-то переменную имы можем её менять потом используя const мы не сможем потом допустим если мы дадим Ко и поставим какой-то Number то мы не сможем потом этой же переменной число присвоить а но это так не работает с обк Вот потому что ладно просто не

  00:30:03 - 00:31:54

• работает почему Ну вот заговорил А почему так не работает с обк чем отличается не примитивный тип данного тип данных Да потому что обк ну они тоже от обв это ссылочные типы данных и собственно когда мы пишем Con R равно какой-то в в этой переменной R не лежит сам объект там лежит ссылка на объект Вот и поэтому ссылка не меняется когда мы добавляем например новый элемент в массив ссылка не меняется она остаётся прежней поэтому конста не вается на это Слушай а как мне тогда создать новую переменную объект Да от

  00:30:59 - 00:32:29

• Старо Ну какого-то другого объекта если я не могу просто вот сделать присвоение Да потому что будет ссылка Повтори е раз вопрос вотт обе сво этот объект то у меня формально будет просто ссылка на один и тот же объект правильно А я бы хотел два одинаковых объекта иметь То есть как бы чтобы две разные ссылки были как мне это сделать Ну в основном используют Ну мы берём этот объект и Короче делаем ему J stringify и пас потом и получается у нас создаётся копия этого же объекта только уже с новой ссылкой

  00:31:44 - 00:33:08

• Слушай Как вариант Но есть ещё два способа один это через объект object можно сделать создать если опять же правильно помню А второй спре оператор можно а да но спред оператор если допустим есть ещё какой-то объект внутри этого объекта то оно так Не сработает по идее я понял о чём-то да да ну то есть надо чтобы обект оы сде Я только один способ знаю Ну хорош самые любимые вопроса два сейчас пойдут Давай нач с первого замыкание насколько для тебя это сложная вещь потому что на самом деле очень много люди Ну то есть на каждом

  00:32:30 - 00:34:01

• собеседовании я вижу что это спрашивают но на самом-то деле как счита Я считаю что концепция ВС пытаться понимать Мне это казалось очень сложным сейчас я даже сам ещё не знаю правильно я понимаю замыкание или нет Я кстати сейчас могу написать наверно мне так будет чуть проще Да кстати у меня как раз написано Так давай Да вот здесь ниже Сейчас секунду у меня во Да всё можеш соответственно писать допустим у нас есть какая-то функция и она возвращает другую [музыка] функцию собственно вот это вот и есть

  00:33:17 - 00:34:35

• замыкание когда одна функция вызывает другую функцию и переменные которые внутри её допустим вот конст а ра 0 и допустим когда мы вызовем первую функцию вот это вот а переменная получается будет замкнута Вот в этой Вот области видимости Вот её можно будет использовать во второй функции вот и это А в данный момент сейчас лежит в памяти до тех пор пока мы не вызовем вторую функцию получается она сейчас замкнута а когда мы вызываем вторую функцию только тогда она выходит с памяти Когда у нас одна функция возвращает

  00:34:09 - 00:35:35

• другой другую функцию и мы просто замыкаем да Как какие-то значения и потом у нас Функция которую мы вернули может обращаться к этим значениям Да в этом скопе да Дада соответственно нет всё всё верно можно было ещё знаешь скидывать А В первую функцию но во второю использовать во вторую функцию тоже мо может скинуть но я вижу что ты понимаешь концепт Слушай вот ты использовал только что стрелочные функции Почему стрелочные а не там function declaration Или да Или Почему почему вобще особого Ну особой разницы не будет от

  00:34:59 - 00:36:12

• того что я использую просто ш или же стреч функцию анонимную или не анонимную Вот от этого наверное разницы не будет но я Ну я знаю чем отличается простые функции от стрелочных в томных функци контекста и Стрелочная функции Бут обращаться если мы обратимся к контексту к тому контексту который был над ним Точнее там где они были вызваны Да Абсолютно верно то есть как бы то есть она берёт контекст родителя если прямо одним предложением Слушай а ты застал классовые компоненты в реакте А я как раз тогда только его начинал учить вот

  00:35:35 - 00:37:07

• первое приложение моё было написано на классовых ты уже методы писал с стрелочными функциями или ты застал момент когда в конструкторе надо было Bind прописывать контекст прокиды или нет уже Я очень очень смутно помню но я про Да делал такое там бан Да прокиды контекст Да но это было получается полтора или 2 года назад Это уже очень смутно помню не Ну да хуков да это вообще уже не правда И никто так не делает но я просто к тому что вот представляешь как раньше было То есть как бы относительно полезно было понимать такие вещи То есть

  00:36:25 - 00:37:35

• я имею в виду сейчас на самом деле если дополнять то вот ты в проектах реакта используешь какой тип Функции там declaration Expression или всегда Я вот тоже использую меня вот как-то на стриме тоже спросили А что неш там компонент и так далее на самом деле сейчас всё сводится к конвенциям сечас вообще Почти разницы никакой нет Ну да это просто намного быстрее пишется да и всё Слушай ну и по Хипстер выглядит давай согласимся как молодёжно по Джесс Ладно последний вопрос по Джес готов я я думаю из примеров ты уже всё понял это Event

  00:37:00 - 00:38:21

• loop наш любимый э опять же что блин я вопросики спалил в видосе Ну ладно это неважно что вообще Вот вот смотри есть пример у нас Да как как он вызовет опять же не посматривая в консоль потому что он тут работает уже какой последо что вызове И что ты вообще знаешь про Event опять же може своими словами я не буду докапываться до терминологии вот Event loop Собственно как у нас в жес происходит вызов всего и обработка вызова функций и остального ну у нас есть собственно Event loop JS идёт по коду вызывает

  00:37:39 - 00:39:06

• функции получается он сам однопоточный и поэтому он может выполнять только одну операцию в определённый момент времени А вот допустим мы вызываем функции и наши функции попадают в стек вызовов и собственно в этом стеке Потом они начинают выполняться по очереди Вот и собственно ещё в жес есть асинхронно она выполняется через wep по-моему она называется э собственно всякие асинхронные таски они попадают не в сам стек сразу же а они сначала попадают в где собственно происходит вот этот лей синхронный И после этого они попадают в

  00:38:22 - 00:39:59

• очередь задач аэ О как только JS выполнил все синхронные функции и стек вызвав стал пуст а он начинает по очереди брать э каждую задачу из тех э из той очереди которые пришли с асинхронного получается вот мы выполнили асинхронную функцию оно закинуло с в веб А вы ну выполнило с делей прошёл оно попадает в очередь и ждёт того момента пока стек вызовов не не опустеет как только стек вызовов Опустел они по очереди начинают выполняться аэ вот принципе и всё всё что могу добавить это ещё в жесе есть микро и

  00:39:13 - 00:40:39

• макро таски это вот собственно синхронные таски и в зависимости от того Микро это или макро таска это будет зависеть её очередь выполнения Ну кто первее выполнится получается сначала выполняется микро таски потом идут макро микро из примеров могу назвать только промис а макро - это тайм всякие сайд эффекты Маус ивенты Клик ивенты что ещё и как там есть тай есть ещё один интервал интервал Вот вот в принципе всё что могу про рассказать слушай ну всё верно рассказал вообще ну то есть типа я думаю человек который не знал что такое

  00:39:56 - 00:41:40

• по твоему определению сможет понять что это такое но вот теперь расскажи Вот ты рассказал даже про микромакро таски да то есть Иногда люди даже это упускают просто говорят то есть бы что у на получается Всё падает потом в очередь Да и потом опять в Кок выполняется Вот ты даже это упомянул Вот теперь давай посмотрим на пример и я думаю ты спокойно ответишь что выведется то есть в каком порядке сначала выведется вот это первым Вот это выведется вторым Вот это выведется третьим Вот это выведется четвёртым так А по поводу первого Ты

  00:40:48 - 00:42:08

• уверен а нет не уверен Вот блин ты не увидел да да да не ничего ничего пере играем Давай заново Давай заново сейчас я тогда тогда мне надо сейчас немного подумать так тогда это должно вывести с первым нет Вот это выведется первым это выведется вторым потом выведется это третьим А это выведется четвёртым всё Абсолютно верно если ты консоль откроешь Я надеюсь ты не подсматривал но как бы как её Открыть а справа там в сабок под браузером там консоль вот problems консоль не знаю у тебя нету справа вот здесь Всё

  00:41:27 - 00:42:55

• нашёл Да вот там как бы оно есть создание промиса идёт поначалу Да потому что ну это просто как бы задача Да в Кок который попадает Блин я из-за того что что-то писал у меня теперь тут вся консоль забита и тем не не понимаю Где начало и где конец Ну последние четыре смотри просто сверху снизу вверх то есть создание Всё верно потому что ну это просто таска в правильно потом конец скрипта это консоль наш потом как ты говорил в начале выполняются микро Да поэтому выйдет обработка про Ну и потом соответственно нет всё я могу объяснить

  00:42:12 - 00:43:19

• почему так происходит самым первым должны выполня синхрон то тут но ещ У нас есть само тело промеса тело промеса тоже оно как синхронна синхронная таска именно только то что уже в самом рисове это уже выходит асинхронно а именно само тело промиса оно выполняется синхронно получается Поэтому когда мы идём сверху вниз мы видим тело промеса оно выполнится первым потом мы видим вызова он уходит в обрабатываться потом сразу выполняется Ну давай с самого начала тогда давай идм с самого начала вот мы видим Он улетел

  00:42:45 - 00:44:15

• выполняться потом мы видим промис видим его тело выполняем всё тело получается Поэтому это выводится первым потом идёт сам промис получается мы его тоже отправили в выполня у нас по очередям получается из-за того что промис микро таска он выполнится с первее чем Set Тай поэтому он идёт в выполнение в коск а и потом когда он выполняется коск снова пуст идётся Тайт Не идеально Я могу только похлопать как бы в вообще без вопросов и понимания есть ты мне писал ты ты меня обманул ты писал что ты не в микро и макро тах не

  00:43:38 - 00:44:58

• разбираешься а тут оказывается полный Фло знаешь и нет ВС отлично давай дальше тогда по вопросам в принципе с базой Мы закончили дальше вопросы идут по Тап скрипту очень важная вещь в наше время и почти вакансии все включают скрипт потому что вот как раз мы ты ранее говорил что в Дже есть такая вещь она называется динамическая типизация Да когда у нас нету ошибок потому что у нас не компилируемый язык находу понимат с этим делает принимает решение соответственно Как ты говорил слогом пример Но вот добавляет статическую

  00:44:23 - 00:45:33

• типизацию Да и почему мы вообще как разработчики хотим использовать ТС и вот Какие Вот ты мог бы концептуальные моменты между ТМ им выделить Вот это очень хороший вопрос для меня Потому что моё понимание тайп скрипта очень такое поверхностное Ну из плюсов того что я вижу в что нам не нужно вот когда мы описали всему даём типы всего всё описываем И когда мы вот вытягиваем какой-то объект мы уже сразу знаем какие там есть поля мы нажимаем точку и уже сразу знаем какие там есть поля и какие у него типы например ещё очень хороший

  00:45:02 - 00:46:26

• плюс когда мы знаем то что придёт с сервера мы изначально прописываем для него Тип и когда ещё мы данные не получили мы уже можем знать какие есть поля там и как к ним обращаться вот следующее если проект очень большой там очень много кода очень разные данные появляется какой-то Хаос в нём и именно ty скрипт вот помогает хоть немного этот хаос разр и понять что к чему там происходит какой-то один разработчик там пишет так-то код другой так-то И если мы не опишем типы мы просто там зата и он именно нам поможет разобраться что к

  00:45:44 - 00:47:17

• чему Мы вот берём чу чужую функцию там какую-то которая написал другой человек она там возвращает какой-то объект и нам не надо лезть в код смотреть А что ж там этот объект возвращает А как эта функция работает мы просто берём там нажимаем точку и уже видим то тот результат который мы получим пос её вызова вот ну такой Вот пример Давай подытожим то есть смотри это поддержка IDE да то есть вот как ты говорил да подсветка что в объектах находится Ну поддержка Да интерфейсов тапов вдшка потом это соответственно

  00:46:30 - 00:47:44

• простота читабельность кода Ну и определённые конвенции потому что ну ты задаёшь интерфейсы Да и как бы работаешь с ними То есть тебе становится легче работать Ты понимаешь что происходит с какими сущностями Ты можешь работать ну и третье Вот ты также выделил это вот очень удобно с сервером взаимодействовать это на самом деле я тоже выношу в отдельный плюс особенно когда сервер знаешь тебе ещ гери все эти интерфейсы и тайпы И вообще отлично самому ничего делать не надо вот это было прекрасно Да Слушай вот ты

  00:47:08 - 00:48:13

• см работал и вот что я тебе хочу сказать если будешь дальше работать есть плагин который ты же знаешь что на сервера серверах с лом есть ГРАУ где ты можешь все кри посмотреть мутации инте с только работал на тройни проекте где за нас написали все реквесты А ну там была команда Типа все были тройни четыре человека и за нас написали все реквесты потому что они знали что мы знаем только react они нам дали TS Next Apollo Вот и поэтому я типа А особо не помню что там А ну я просто имею такое очень узкое

  00:47:40 - 00:49:00

• общее представление Что такое AP Client типа и самые вот эти вот запросы а именно так я последнее время не работал с ним поэто не Ну я понял Ну просто держи в голове что именно для Ало Не знаю возможно кстати знаешь свар знаешь что такое Ну ему подобное да дадада вот возможно есть готовые плагины которые просто по ссылке смогут тебе всё сгенерировать потому что ну если в сре конечно всё описано просто ну Гра который я те сказал он автоматически Всё это делает а свар человек заполняет Хотя по-моему можно опять же его настроить

  00:48:20 - 00:49:21

• чтобы он сам делал но там надо именно в код добавлять Ну ладно это так между слов есть такая в Несте Там просто добавляешь на каждый запрос Как там это декоратор называется и он сам Для этого ну в Ты же понимаешь почему кстати так легко происходит изза скрипта потому что описываешь интерфейсы и декоратор спокойно просто берёт это всё и сам описывает как раз кстати вот ещ один плюс скрипта да то есть это описание докуро кода Слушай вот раз такая для тебя ты вывел плюсы ТС Но вот Возможно они будут как бы совпадать Да

  00:48:51 - 00:50:09

• вот различия Но вот что бы ты выделил именно ты вот Чем это для тебя для тебя да отличается TS и GS отличается Ну да давай я вот так скажу когда лучше использовать typescript А когда лучше использовать просто JS э вот например есть у нас какое-то маленькое приложение которое а м ну маленькое приложение которое там ты сделал там оно не будет дальше поддерживаться никем другим а что-то не очень сложно можно использовать JS и это наоборот тебе сэкономит времени потому что тебе не нужно все эти фичи тайп

  00:49:31 - 00:50:56

• скрипта ты например там сам разрабатывает это приложение оно маленькое ты его быстро сделал А И всё в принципе на этом но если у тебя какое-то большое приложение то мне кажется что ну особенно если там несколько человек работает то мне кажется что ТС необходим из-за простого ДСА там будет хаос А если что-то маленькое то наоборот JS лучше это сэкономит тебе время тебе не надо будет описывать эти типы Слушай отсюда вопрос как tyt вообще в браузере работает Как он выполняется Ну typescript в браузере

  00:50:14 - 00:51:22

• никак не работает браузере работает JavaScript вот А как так получается что шем тайп скрипте а он не работает а ну насколько я помню там нода под капотом транспит да это же не компиляция это транспирация он транспит а typescript в JavaScript и уже этот JavaScript он выполняется А ты уверен что трансляция а не компиляция помоему поему Да транспирация - это преобразование одного кода в другой а компиляция - Это вроде бы преобразование простого кода машины Угу верно А слушай а какие языки ещё ну то есть

  00:50:49 - 00:52:26

• Какой код на каком языке код ещё можно в браузере выполнить В каком языке можно выполнить код браузера Ого Это мощный вопрос м затрудняюсь ответить думаю только JavaScript он понимает браузер Ну ты правильно ты уже до этого сказал это просто опять же я пытаюсь тебя расшатать Понимаешь твою лодку уверенности чучуть Ой слушай в тайп скрипте вот есть такие понятия как Union и этот иек Да вот что это такое скрипте Union Inter Да наверное я не отвечу потому что мне кажется что это первыйраз слышу Слушай

  00:51:41 - 00:53:12

• Возможно ты слышишь именно на английском это первый раз вот тайп скрипте Как нам объединить два типа как нам объединить два типа да какие у нас варианты есть Ну по-моему если мы пишем если мы это не через интерфейс объявляем как Type то мы просто пишем одинаковое имя им там тип А1 такие-то поля и тип А1 ещё раз и такие-то поля оно объединится в один а если она в одном файли находится Угу Слушай давай в коде А я вот так могу написать в теории то есть смотри сейчас там Animal равно Dog да Или Всё я понял о чём

  00:52:28 - 00:54:22

• ты Ну да ээ походу вот это вот походу Union и есть это получается что Anal у нас будет либо дог либо КТ А если мы так сделаем то мы и то и то объединяем угу вот всё верно то есть ты как бы знал просто я говорю ты наверняка просто не слышал Слушай а вот смотри сейчас будет задача по Тап скрипту вот снизу в принципе есть сейчас я её сформулирую задача довольно простая нам надо с тобой реализовать метод by K смотри у нас есть массив сверху и функция должна принимать первым аргументом массив а вторым ключ и

  00:53:25 - 00:54:51

• возвращать просто массив значений этих ключей То есть например видишь вот я написал Л lael 1 id1 Первый параметр Ну это наш массив Да и вторым параметром lael и А ну тут только массив возвращается так сделан и то есть вернулся как ты видишь массив с одним объектом где остался только л о то есть грубо говоря мы выбираем ключ Да из объекта нашего и возвращается массив только с этим ключом в объект вот надо окей да надо реализовать йп скриптом йп скриптом можеш как бы вначале можешь вначале его просто реализовать и

  00:54:11 - 00:55:37

• потом мы с тобой рип сделаем Окей давай сейчас сейчас я ещё немного подумаю потому что не совсем понял сейчас это получается вот этот мы будем юзать да да да вот это и вывод у нас Какой должен быть Ну смотри например для этого массива если я напишу вторым параметром функцию то у меня выведется массив только объектов с лейбла то есть 2 ну и так далее То есть не будет в объектах ID Ирина да Значит мы передаём сюда Ray и Ke и у нас потом будет Ray возвращаться с объектами только с тем ки которые ну

  00:54:55 - 00:56:29

• ну короче я понял окей H опять же снизу сразу нето написал чтобы мы смотрели результат Да вот а о только Да надо добавить так Ну смотри сама функция работает да то есть если в консоль ты сойдёшь вот у нас получился массив но теперь нам добавить ф скрипта чуть-чуть чтобы это работало О'кей аэ О'кей А я могу вот тут Рей сам писать э делай вот как как знаешь как хочешь я соответственно если вопросы будут Задавай то есть в начале Вот пока ты не упрётся я не знаю я не хотел бы тебе помогать мне кажется я собью тебя в

  00:55:46 - 00:57:18

• смысле Поэтому просто делай как как как видишь как чувствуешь м что тебя смущает Меня смущает то что тут могут быть абсолютно любые ки абсолютно любые а нене не зафиксируем сейчас что именно только эти три а всё Ой да то есть только эти три тогда вопросов не имеется [музыка] давай его О ну наверное тут сейчас за Костыль э блин на самом деле я запарился Я не знаю как это фикса так Ну давай смотреть то есть он тебя что ругается Element implicity ty number ty р Type Угу А так произошло Потому что почему как

  00:57:56 - 00:59:46

• считаешь на самом деле я не знаю почему так произошло потому что элемент а потому что тип не указан не знаю потому что смотри у тебя же ключи в тайпе твоём они не string они ID и Окей то есть по факту Понятное дело что ключ у тебя ринг Но для тайп скрипта это давай вот сейчас я поправлю то есть здесь смотри мы можем написать опять же л Да например ну только я л напишу видишь проблема решается ну и соответственно здесь ты можешь ещё Дописать все остальные ключи понимаешь да ну чтобы это работало Да я понял я понял то есть

  01:00:36 - 01:02:07

• вот таким образом вот слушай тогда у меня к тебе Ну давай мы допи вот этот вариант как у меня вот давай допи этот вариант он рабочий всё классно Круто до того момента А что если тебе скажу что я функцию вот эту хочу кидать любой массив который я захочу а не только вот этот я об этом сразу думал когда начинал это писать вот в этом-то и загвоздка потому что я же говорю мои знания ПТА очень поверхностные И вот я это стырил вот так вот а я уверен что есть какой-то очень лёгкий инструмент для того чтобы

  01:01:24 - 01:02:43

• прописать а под любой А по-моему есть такая штука как по-моему она вот так вот пишется Но это дженерик есть который ты у меня спрашивал Поэтому да ладно давай тогда поговорим по поводу того что ты сделал Я тебе покажу как можно было это реализовать смотри давай начнём с первого Type R Type знаешь перед интерфейсами тоже бывает и пишут Ну типа там и говорится что это как бы интерфейс на самом деле лично моё мнение Ну опять же это конвенции какие-то и так далее Мне кажется это ушло уже какая-то ушла

  01:02:03 - 01:03:06

• Эпоха и то есть Type не должен добавляться к нему слово Type или ну ты понял или интерфейс и буква Это то же самое что ты бы в константу писал бы не Ray А Con понимаешь да О чём я вот ну то есть поэтому давай начнём ещё момент ты написал Но разве это тип всего массива Нет это Ну опять же толь соответственно и Да можно написать в принципе давай про дженерики поговорим теперь смотри вот наше строчке ты используешь это жене правильно То есть он как раз и говорит что любой массив вот сюда соответственно смотри как можно

  01:02:36 - 01:03:48

• было реализовать эту задачу давай начнём с того что поим вот эту часть ключом первое что ты мог сделать это добавить ключевое слово от твоего тайпа и теперь смотри когда ты снизу вот здесь будешь писать Попро Я не знаю подсвечивается У тебя что у меня выпал ти или нет то есть у тебя видно да что можно выбрать ID или да Вот соответственно То есть если я сейчас сюда добавлю ключ например любой Да какой-нибудь там тест И очае когда я это сделаю да да вот если он будет необязательный то он соответственно здесь автоматически

  01:03:18 - 01:04:29

• появится понимаешь да то есть уже вот так можно Но это ещё не всё да то есть мы не решили основную проблему как это всё сделать И ты правильно подметил То есть можно сказать что функция будет принимать у нас некий Т Да тип т и смотри что мы можем сделать мы просто можем сделать соответственно здесь вот так сказать что Т вот здесь и делать от этого Т Вот соответственно здесь мы уберём вот это И теперь мы можем кидать любой массив И теперь смотри попробуй написать просто вот опять же вместо Лейла Ну вот сюда угодно и по-моему там

  01:03:53 - 01:05:00

• ну должно подсветить правильно но я имею в виду что должно работать Да вот то есть и Давай мы например ну ты понял же То есть сейчас любой массив который ты вставишь он будет работать и у меня как раз спрашивал и ты и много людей спрашивает про дженерики и вот иногда вот в таких Вот как раз задачах они нужны Когда вам надо шаблони Зро Да например функции или какие-то обёртки вот как й да это же тоже обёртка вот да соответственно Вот тебе и решение кстати Ну согласись довольно легко и выглядит то есть

  01:04:26 - 01:05:42

• вот да довольно легко Я думал это будет намного сложнее Нет есть сложные вещи знаешь как перегрузки некоторых функций возможно слышал об этом ВП скрипте перегрузка когда у тебя функция может принимать Три разных вида аргументов например и ты типа пишешь описание для не три раза то есть перегружает быть несколько вариантов и вот там бывают сложности но в зачастую Вот как я говорил ранее тест не сложен И 95% что вы делаете на та скрипте очень просто там вплоть до написания тапов интерфейсов И всё да а 5% - это реально

  01:05:03 - 01:06:15

• сложные вещи который сталкиваетесь и Тесь вот в принципе не в принципе ты решил задачу да Тогда не буду тебя спрашивать но вот смотри вот есть ключевое слово да вот такое есть ты знаеш А вот смотри вот есть готовые е получается ошибиться но давай назовём это конструкциями по-моему это какое-то прям слово есть я забыл его вот такие как о или или какие ещё ты знаешь вотрите какими пользовался готовыми блин как он назывался Type есть вроде бы такая конструкция на самом деле я их использовал даже вот это вот год

  01:05:40 - 01:07:10

• разработки на тайп скрипте Я даже Их использовал несколько раз но мне кажется вот это как раз и проблема вот я себя сейчас позиционирую как джун И на самом деле я знаю что они есть да но я знаю что есть такой инструмент но я просто этот инструмент не могу использовать просто не понимая где именно его нужно использовать вот думаю Именно для этого нужны как раз менторы или весь такой контент которая покажет где и когда нужно использовать подобные инструменты А вот а я собственно использовал это пару раз очень давно и

  01:06:26 - 01:07:40

• вот из того что запомнил это R Return Type И omet на самом деле я даже не помню что они делает Ну R Time возвращает тайп от чего-то А омет уже не помню вот омет из сейчас я Я сам сейчас не забуду он удаляет ключи короче из из типа А есть ещ пик он берёт ключи ещё есть для Union типа как раз excl и incl Ну то есть что входит и от чего там избавиться в Юни Да в объединении Ну слушай само самое главное что ты понимаешь что тебе нужно куда расти дальше Короче по скрипту в принципе всё да Посмотрю что у нас там

  01:07:04 - 01:08:24

• дальше по-моему дальше у нас рек наконец Мы дошли до реакта Я надеюсь ты не сильно устал это последний блок здесь ещё будет пару вопросов пода но они опять же до ку в принципе первый вопрос Чем ты работал в принципе сказал про библиотеки рассказал поэтому Давай перейдём сразу уже к части где Ты где Я буду тебя мучить техническими вопросами Virtual дом зачем эта штука вообще нужна Зачем дн Абрамов и его команда добавили эту тему Почему нельзя было просто с обычным домом работать Это отличный вопрос а не уверен

  01:07:44 - 01:08:45

• что я корректно на него отвечу но в моём представлении это Виртуал дом нужен только для того чтобы избавиться от лишних рендеров и из-за того что работа напрямую с домом это очень трудоёмкий процесс очень затратный а поэтому строится сначала туал дом там происходят все манипуляции меняются там удаляются добавляются какие-то объекты и когда уже все манипуляции собственно закончились у нас уже есть результат работы Нашего Нашего реак рендера уже когда всё полностью закончилось тогда оно уже берёт

  01:08:14 - 01:09:40

• И монтирует это всё в HTML это типа некий пример типа де баланса Вот вот в моём представлении для этого нужен он то есть для оптимизации работы на самом-то деле Да потому что правильно Ты сказал дом может быть огромным Прикинь типа с ним полностью взаимодействовать ты правильно сказал это тяжеловесного у нас есть Vir дом в котором мы делаем какие-то операции в принципе ты рассказал плюс-минус как рек работает да то есть он в Виртуал доме делает свои вещи сравнивает потом Да и вставляет уже в наш дом и все изменения

  01:08:56 - 01:10:10

• Слушай тут у меня вопрос но я в начале другой вопрос спрошу вот Раз ты затронул тем более это ещё так когда учился а какая мотивация Не используй сейчас классовые компоненты Почему я сейчас не могу прийти и просто начать писать всё на классовых компонентах какие причины конкретно ты видишь в этом ещ один прекрасный вопрос Ну на самом деле я знаю что на это ответить а классовые компоненты мне кажутся довольно громоздкими там надо писать много лишнего кода э и ещё как мне кажется я не выживу это особого смысла потому что даже в самом

  01:09:34 - 01:10:55

• самом джаваскрипт классы - Это всего лишь э настройка над функциями если я не ошибаюсь класс - это и есть функция Просто это семантический сахар как говори вот поэтому Какой смысл писать намного больше кода если мы можем это всё тоже самое сделать в функциональной компоненте намного легче и проще вот в принципе и всё Слушай а как ты вообще относишься вот к оп Ну это чисто такой вопрос не по теме просто твоё мнение я отношусь очень хорошо Если бы я бы его знал Проблема в том что я с ним очень плохо дружу И даже в институте У

  01:10:14 - 01:11:41

• нас была два и короче что-то мне с ней не очень сложилось и сейчас я жалею что я её не учил потому что начал тыкать njs и сейчас в шоке Короче от того насколько я много всего не знаю В этом плане Мне кажется это очень ну это очень полезно Это Вообще крутая типа как это назвать технология подход вот ти интересно сделано типа наследование всего но это тоже есть в жава скрипте только в жава скрипте используется наследование по-моему через прототипы там в каждом объекте есть прота там есть прото и собственно

  01:10:58 - 01:12:24

• там и описаны все те методы которые мы можем использовать Вот например в строке мы можем использовать не в намы можем использовать или там в других объектах эти все методы как раз прописано вот так что в жесе тоже есть наследование вот оно работает через прототип поэтому это очень важно знать всё это все эти подходы Не ну ты правильно подметил что вот в Несе как раз хотел у тебя спросить там же вообще полная УП причём такая архитектура из коробки Я бы назвал как в Лере Вот соответственно и вот тот

  01:11:41 - 01:12:50

• же Лер Да тоже полностью опш и поэтому ты правильно подметил что это важно знать то есть Просто есть люди которые Ну даже основ не знают и во фронтенде это тоже нужно на самом-то деле Да вот А по поводу Слушай вот ты ещё сказал что да класс - это функция по факту Ну то есть Типа если прям упрощать и а функция - это у нас объект Да по факту у нас всё объекты То есть как бы и твой довод по поводу того что это просто сложнее писать На классах он абсолютно верен То есть как бы тебе надо во-первых значи ключевое слово Это я у тебя ещё не

  01:12:16 - 01:13:26

• спрашивал что это за Монстр я сес не спрашиваю я имею в виду просто в принципе да то есть мым на функциях и вот вместо классов Да его Лайла Да там СМИ апдейта нам пришла такая технология как вообще Вот расскажи какие ки бывают когда их использовать вот такой вопрос хуков такое ж по-моему их там два а все хуки начинаются со слова use и э хуки можно использовать только в теле компоненты нельзя использовать никаких других вроде бы блоках не в условных там и элсе не в циклах только в теле са самой компоненты

  01:12:51 - 01:14:29

• А из хуков которые я чаще всего использую это State use очень редко использую ре это добавляй каждому хуку просто знаешь типа ещё чуть-чуть описание чтобы я понимал насколько Да давай это хук для управления состоянием он возвращает массив в котором первый элемент ние второй это функция чтобы это состояние поменять вот use Effect это который заменяет comp M comp Mount он принимает внутри себя ко который выполняется в онное время компоненты параметрам принимает депс в зависимости в которы из которых он

  01:13:51 - 01:15:59

• вызове в следующий раз собственно если помесь поменялся какой-то deps вызове на тот же самый compd вроде бы вот и вот а component Mount это если мы внутри колка который передали в use Effect вызовем и передаём туда тоже внутри этого будет код выполнится Когда произойдет кстати сейчас назвал ещё одну причину почему классовые компоненты сошли на нет потому что в их Вот только сказал что у нас один хук заменяет три метода Да класса соответственно и зачастую что подмечает сама документация реакта в

  01:15:04 - 01:16:34

• классе приб прикидывать Ну или вставлять Да неважно одну и ту же функцию Ну да и update бы очень часто бы дублировались потому что у них в основном похожая логика Вот и последний хук который я юзаю это ну из самого реакта получается с коробки это ре это получается ссылка на какой-то именно элемент в самом доме потому что как мы говорили выше react работает не с самим домом а он работает с Как как ты говорил Shadow нет не туаль да Vir дом Он с ним работает поэтому у него у самого реакта нету прямого прямой ссылки на сам элемент в

  01:15:48 - 01:17:44

• доме вот вообще же типа этот jsx он на самом деле это ж не HTML поэтому там нету прямой ссылки на какой-то именно элемент в доме поэтому надо использовать usf чтобы её получить Слушай а вот ты сказал что G6 Да это не HTML я сразу скажу что это J да как это вообще работает Ну если мы используем как мы просто создадим голую страницу и там типа скриптом под элементы мы будем создавать по-моему там такой синтак такой-то элемент и перем передаём внутрь там в скобках какой-то элемент и так далее Вот и J он

  01:16:50 - 01:18:31

• спарти как раз в такой вот код чтото на самом деле он спар в JS код вот такой вот Эмен такой-то и добавление всяких ивентов тоже навеси то есть G - это просто объект с набором функций которые потом генера уже HTML Слушай а вот наблюдал такую тему Что Ну не везде конечно сейчас мы об этом поговорим но иногда рек ругается и говорит что импорт реакта необходим Хотя ты не используешь них уки ничего зачем это интересный ругатся ко незу Ну да Ну смотри то есть у меня есть компонент например и у меня нету ипор реакта сверху и а при

  01:17:46 - 01:19:15

• этом он ругается и говорит что нужен То есть Добавь импорт Хотя я никакой там к не использую Да не достаю То есть мне это не нужно ни типы никакие не беру почему так происходит используешь Ага ВС абсолютно очень много фреймворков по дефолту впаке проставляют впа глобальным и то есть при получается да генерации кода он просто берёт это как бы ну из глобальной точки которую впа говорит и не нужно прописывать короче вот хотя есть до сих пор слин правила которые обязательно говорят что должен быть реакт Вот ну я

  01:18:35 - 01:19:50

• проверил шо что ты знаешь вот я к этому Слушай ещё какие хуки использовал Вот ты назвал только три да воз ты какие-то не использовал но ещё знаешь какие есть знаешь в ЧМ разница между мм я не скажу Это просто я могу только описать ситуацию где можно эту разницу давай это на практике же всегда виднее давай вот допустим темо мы создаём компоненту в компоненте создаём ди даём ему высоту допустим 200 пикселей потом мы берём реф на этот элемент и вытаскиваем с рефа собственно высоту этого блока и в use

  01:19:17 - 01:20:52

• эффекте выводим эту высоту и если мы обновим страницу мы Ну и собственно выводим ещё в HTML высоту и получается у нас будет блок и рядом с ним будет написано его высота цифра и собственно когда мы обновим страницу то мы сразу же увидим цифру 200 без какого-либо промежуточного значения Ну допустим если 200 пикселей да А если мы используем ле эфект то тогда если мы в эффекте будем сетать эту высоту то тогда мы сначала увидим ноль а потом увидим 200 вот в ЧМ разница и е он работает не один в один как component

  01:20:12 - 01:21:43

• Dead Mount вот а use layout Effect он работает один в один идентично component Mount Вот это всё что я могу про это сказать Не ну в принципе на самом деле достаточно То есть как бы ты знаешь кейс Слушай а вот eders когда-нибудь ты использовал use reducer Нет не использовал но наверное даже особо не объясню Ну он наверное работает так же само как редакторский редсер как-то там связан с состояние меняет как-то состояние глобальное всё тоже самое на самом деле он также создаёт просто редсер по той же

  01:20:57 - 01:22:14

• логике с экшена и так далее просто короче есть теория что это когда Ден Абрамов пришёл в команду реак он же создатель редакса Он просто сказал давайте сделаем для того чтобы людям было удобнее мигрировать с редакса то есть вот такая история Слушай а вот хук Вот как раз ещ один хук есть который ты не упомянул А но он очень важен на самом деле в реакте И вот вопрос Вообще у меня к тебе вот перейдём к редакс пару вопросов какую проблему решает redx вообще да есть проблема Когда у нас там начинает расти приложение И если мы не

  01:21:36 - 01:22:51

• будем использовать какой-то глобальный стейт а будем использовать локальные стейт внутри компонент появится Проблема в том что у нас большая вложенность и нам надо перекидывать какой-то стейт Через несколько компонент допустим у нас есть одна какая-то родительская компонента через три компоненты вниз Ещё есть одна в которой Понадобился стейт из верхней и нам надо через всю эту цепочку компонентов прокинуть этот стейт проп сами чтобы получить её в той компоненте которая нам нужно вот поэтому было

  01:22:14 - 01:23:26

• принято решение по ходу сделать какой-то глобальный стейт для всего приложения с возможностью получать данные в любом э в любом абсолютно компоненте А и так же само и сетать его тоже в любом компоненте Угу Слушай а вот вот у нас нет альтернатив для реакта только КС Какие альтернативы Ты знаешь есть контекст ректорский Ну вот да это как раз тот хук который ты не сказал use контекст а use контек точно а но я я на самом деле не использовал я работал там на проекте где использовали только контекст без редакса но эта логика уже была до

  01:22:51 - 01:24:25

• меня прописана я сильно Ну не вник Как оно там именно работает поэтому сам именно ручками не писал с нуля логику которая на контексте работает всё что я знаю это мы кидаем провайдер контекста оборачиваем всё приложение Вот и собственно там прописываем какие-то Поля для контекста и потом можем в любом любой компоненте вытащить эти поля через use контекст вот слушай а вот он для ректа был создан нет это просто менеджер он для разных приложений может использоваться не только для вот можеь быстренько вот я вот Нови

  01:23:39 - 01:25:04

• базу прок как это вообще выглядит как работает там какие-то плюсы минусы вот просто ну какое-то своё мнение как бы ты описал Что нужно чтобы это работало вот ну редак менеджер он работает по такому принципу У нас есть какой-то inal State начальный для определённого Скопа задач мы его описываем Потом мы описываем Юр это функция чистая которая в зависимости от того какой мы прикинем ключ ей в экшен про экшен потом скажу какой мы покинем ей ключ в экшены такую логику она должна и выполнить собственно

  01:24:25 - 01:26:09

• мы кидаем один ключ она выполняет определённую логику меняет йт Так как нам нужно прокиды другой ключ она меняет логику по другому принципу меняет собственно стейт так как мы ей прописали ня ну тригери редсер по определённому экшен экшн - это объект в котором как минимум есть поле Type А и также Ну можно просто Полетай кидать для каких-то лёгких задач А есть ещ такое что мы можем ещ прокинуть какой-то ну от того как описана логика также для удобства создаётся Action creat это функция которая возвращает

  01:25:17 - 01:26:48

• э и одна из самых главных функций собственно это чч - это функция которая как раз триггерит у нас выполнение редьюс и изменение какого-то какого-то поля в нашем глобальном те и поэтому эше в редьюс как раз и поменяется какая-то дата все данные у нас лежат в сторе и в сторе У нас есть два два параметра это или не параметры два Поля Поля Да это это объект в нём два поля Get State это весь глобальный стейт который у нас есть в приложении и дич функция которая триггерит изменение стейта вот на функциональных компонентах

  01:26:02 - 01:27:59

• мы можем использовать ки это use dispatch для того чтобы изменить й и use селекто для того чтобы взять из стейта определённую определённую информацию которая нам нужно вот нет всё Абсолютно верно как раз хотел ещё добавить что Да ты то упомянул про редьюс Action Action тайпы Но вот не сказа р но не сказал про что существуют ещё селекторы но всё в принципе ты всё сказал что да селектор - Это просто функция которая стоит Она Да мы с помощью ни Ну я говорил про Лектор Ну Лектор работает по такому принципу что

  01:27:03 - 01:28:23

• он получает коллбэк в котором мы прокиды йт и ретом то что мы можем то что нам нужно вытянуть из стейта у Слушай вот ты буквально сказал что в редьюс Да там ну свич кейк да и у нас там чистые функции Что за чистая функция такая кто её моет чистая функция - это функция которая не имеет никаких сайд эффектов и она выполняет только определённый скоп задач которые для которого она и создана получается в идеале это должна быть функция где её имя обозначает то что она и выполнит мы всегда можем запретить то что она зат получается в

  01:27:42 - 01:29:22

• любой момент времени мы всегда знаем то что она будет нить при определённых инпута Ну при определённых данных которые мне передали Ну и самый важный Сай эффект это конечно же отсутствие мутации должно быть в ней отсутствие мутации тоже Ну как было поняти просто опять тени будет я понимаю как работат те понимаю что ты работал в реакте с ним слушай затянулся Уже собек поэтому наверное Давай быстрый вопрос ещё по реакту и перейдём к последнему Такому я бы сказал даже клёво заданию расслабиться последний вопрос как мне

  01:28:33 - 01:29:52

• реализовать без библиотек ч запрос Ну Запроси нак вообще Вот как это мне сделать вот у меня компонент я чубы у меня при инициализации запросил данные как как как ты это сделаешь вот просто вот опять же быстро словами накидай вот как компоненте или нет да да в компоненте в компоненте Ну я бы сделал самое просто самый простой способ это написать use эфект в use эффекте внутри его в колке написать асинхронную функцию э там допустим asn Get Data внутри её написать прокинуть URL в параметрах там прокинуть

  01:29:14 - 01:30:36

• какое-то из какой-то запрос Возможно хедеры там добавить после того как мы зали Н сделать в Рене и потом в этом же use эффекте в этом же колке вызвать эту функцию потому что он не может получать асинхрон асинхронную функцию Вот и таким образом можно сделать запрос Слушай а состояние Ну типа для пользователя Да давай позаботимся ещё вложи в твоё в твоё объяснение ещё чуть-чуть U А ну самое легко Это просто взять состояние Ну сделать типа constate ой Data и Set Data А как дел прокинуть State N и когда мы зали дату

  01:30:00 - 01:31:58

• Уже именно зали внутри КТА сделать Set дата наша respa и допустим там в HTML просто для того чтобы посмотреть работает оно или нет там сделать эту дей J Ну я вообще говорил про знаешь ошибки иудин состояния но я думаю ты прекрасно понимаешь что задачу как раз без всяких библиотек надо было ть дату и Я там создал к и вот там как раз было тоже состояние динга это получается Перед тем как мы сразу делаем состояние тру как только мы отве тогда уже Мы ставим Дин ВС Да всё верно Давай перейдём тогда к последнему на самом деле такому

  01:30:59 - 01:32:43

• творческому заданию я бы сказал смотри Я на самом деле я сделаю вывод но я уже могу сказать что у тебя очень обширно и много-много много-много много знаний где-то надо их углубить конечно но я подведу потом итог Но я считаю что наверно уже выше чемп потом ещё с тобой после уже поговорим так уже будет ну ты понял в выводе короче момент но смотри перед тобой есть код в КСЕ Заходи в него если ещё не зашёл а код написан ну скажем каким-нибудь джином например условно вот поэтому мы сейчас с тобой э должны его

  01:32:05 - 01:33:22

• подремлешь что ты бы изменил Ну и изменишь соответственно что тут нужно улучшить чтобы было Вот идеально такое творческое задание ээ чтобы посмотреть вот конкретно как ты мыслишь и возможно если ты что-то не увидишь я как раз тебе смогу подсказать Сразу скажу что не надо прямо у парова например в тот же абилити какой-то да то есть тут такие базовые вещи Давай о'кей и получается Если тут буду Ага О'кей А ну в первую очередь я бы добавил есть такой хук э можно его типа самому написать там где-то в инете найти Я знаю

  01:32:49 - 01:34:08

• как он работает use The Bounce для инпута это если мы посмотрим мы сразу нажимаем и у нас сразу же появляется собственно ответ если например тут будет в будущем какой-то запрос для того чтобы подгружать все эти элементы и для того чтобы поиск получать мы будем на каждое изменение прокиды за это очень плохо если допустим там человек одновременно сидит на сайте они там что-то печатают в поиск эти все запросы летят одновременно на сервер то он может упасть поэтому надо да да Слушай извини я просто Дума ты закончил

  01:33:28 - 01:34:54

• ещ реша проблему отрисовки да Потому что если Ну сейчас Давай не будем добавлять я во думал что ты об этом подумаешь но Ях при е решает проблему что смотри на каждый символ у вас будет перерисовка если элементов будет там 1000 плюс это будет подлагивает как раз вот эту маленькую задержку В конкурентном режиме где-то там это всё делает и потом нам результат Уже показывает да то есть да то есть ещё это проблема Ну и с деусом Да ты абсолютно верен верно говориш что если решать задачу такую до этого как бы

  01:34:11 - 01:35:10

• у нас приходилось руками de сделать там опять же de из использовать если ты видел так далее вот да но давай не будем пока здесь это трогать пройдёмся по другим моментам Ну что бы я ещё сделал это он CH пута вынес бы в отдельный хендлер а не знаю наверное что ещё добавить тут всё довольно так простенько сделано и супер какой-то э А как там е супер какие-то изменения тут делать Э не вижу Пока Ну вынес бы хендлер добавил бы The Bounce а State to do's А я бы не добавлял бы to do list в State я бы просто вот тут бы ну из-за

  01:34:42 - 01:36:23

• того что это у нас этот э просто как объект Я бы сразу бы его вот тут бы и использовал я вот так это бы убрал Ну да с учётом что мы с ним вообще никак не работаем хорошо Да не пойдёт наверно наверное пока что на данный момент это всё что я могу сказать ладно Давай я тебе буду чуть-чуть помогать давай начнём с банального Что за колок Ну ладно да ко да да то есть его нужно удалить знаешь такая мелочь но Ну ты же наверное делаешь компании код RW соответственно То есть это как бы всё равно описать дальше момент смотри

  01:35:51 - 01:37:12

• же на самом деле дальше мы будем с тобой говорить как раз про вот эти вещи которые ты не заметил но они на самом деле важны Посмотри как написан лист кейсом через нижнее подчёркивание да то есть мы используем Snake Case константы обычно пишется А кейсом ну или да Или как ты сейчас написал кал кейсом короче тут предъява жёсткая к неймингу потому что человек его совершенно не соблюдает То есть ты можешь увидеть Set Search то есть вообще без всякого какого-то вида Ну то есть просто написано не выделяя

  01:36:42 - 01:37:45

• никак соответственно также человек Чейн написал Data Хотя всегда приходит ивент правильно и обычно делают или е или ивент и знаешь это такие мелочи Я тепер понял понял Я вообще на это не обратил внимания я думал типа какой-то что-то более глобальное что-то более тяжёлое я тогда на нейминг вообще не обратил внимания я с тобой абсолютно согласен надо всегда поддерживаться какой-то определённой концепции во всём приложении потому что иначе если мы этого не будем делать у нас будет полнейший Хаос в каждой компоненте всё

  01:37:16 - 01:38:18

• написано по-своему и будет не совсем ну будет не читабельно и непонятно например другому человеку Именно для этого используют там притиры и всё остальное для того чтобы у нас всегда код выглядел локальний и выглядел одинаково на в любой любом файле вот Хорошо смотри также подмету в дцать третья строчка д четвёртый фильтре туду два четвёртый L да типа там ну сокращённый элемент также на самом деле ещё один такой момент но он тут не Явный но ты мог об этом сказать что возможно ИМТ стоит вынести сразу в отдельный

  01:37:47 - 01:38:58

• компонент Да как бы он тут Объясню почему не Явный потому что он не два раза используется а один и как бы Бог с ним Ну так просто знаешь типа тоже как как вариант потому что туду вынесены вдруг мы будем масштабировать приложение а про листа мы сказали что тоже как бы по-хорошему придерживаться или Знаешь такого стандарта Я не знаю он по-моему идёт ещё со времён когда Веба не существовало что константы аке и между ними скес да или там вот э как ты кейсо написал То есть единый Да формат смотри есть ещё какой-то ворнинг в консоли что

  01:38:23 - 01:39:24

• это за за У меня написано Def But Never Слушай значит не этот вон Короче ладно я тебе скажу бросить Да слушай расскажи что за ки такой Зачем он нужен Ну когда когда мы мам какой-то лист нам надо пробрасывается именно нужно для реакта чтобы он мог А как это сказать Э идентифицировать Каждый элемент это именно нужно для для того чтобы корректно отрисовывать каждый лист элемент Потому что если мы очень много где используем ки аэ например Одинаковый да э вот мы будем например использовать а индекс индекс

  01:38:53 - 01:40:37

• каждого элемента массива при каждой отрисовке то у нас может происходить лишние Рендеры где-то Вот либо вообще не рендерится что-то давай про индекс сейчас отдельно ключ он нужен для оптимизации перерисовки Да списков Да да да Вот я помогу тебе сформулировать конечную мысль Спасибо большое всегда пожалуйста короче ну смотри вот ты говоришь про индексы что индексы нельзя использовать А правда ли это может вс-таки можно в написать идек из мапа взяв Ну это не рекомендуется Ну я просто такое слышал это не рекомендуется потому

  01:39:52 - 01:41:10

• что например вот мы один тут лист отрисовать с ки индексом и ещё один отрис суем и у и у каждого из этих элементов по очереди будет одинаковый ки А разве Подожди А если у меня будет два списка и у них будет дишни ну цифровые у одного списка будет 1 2 3 4 и у второго списка 1 2 3 4 Будет ли такая проблема Ну на самом деле я не сильно углублённо для оптимизации и то что туда лучше не прикидывать индексы и всегда ки должен быть должен быть уникальным для каждого элемента Ну короче смотри ключ для каждого списка Ну я имею в виду

  01:40:31 - 01:41:47

• списки не пересекаются то есть для одного списка Короче если ключ в одном списке единичка и во втором это нормально ничего плохого сри какая ситуация Почему не рекомендует использовать индекс на самом деле можно его использовать в нашем случае даже можно его взять Сейчас объясню почему смотри Почему нельзя использовать индекс предположим мы взяли индекс у нас элементы получается 1 2 3 4 5 А теперь представим что Мы удалим третий элемент Что произойдёт ре проверит что 1Д не изменилось А все остальные элементы

  01:41:14 - 01:42:13

• после тройки у них сместится ну на орку вниз понимаешь использовать это ID дада да но если мы смотри со списком вообще никак не манипулирую Господи Уже заговаривать то мы не удаляем элемент или не переставляем элемент то индекс он не изменится он всегда будет 1 2 3 4 5 понимаешь да то есть последовательность не изменится и никакой проблем это на самом деле не будет то есть индекс нельзя использовать то есть Я бы даже сказал Не рекомендую нельзя использовать Когда какие-то будет взаимодействие с

  01:41:43 - 01:42:41

• листом то есть его там знаешь манипуляция итема то есть переставить удалить и так далее вот а так в принципе ты правильные вещи говоришь Э так ну в принципе по апу Наверно всё то есть мы какие-то вот прям моменты увидели Давай перейдём в туду есть ещё у нас компоненти туду давай его тоже посмотрим маленький компоненти ничем Ну ничего такого но вот что тут ты увидишь вот теперь когда ты получил чуть опыт предыдущего Да компонента вот что бы ты тут сказал что не так здесь ну для начала я бы убрал это во-первых тут

  01:42:18 - 01:43:26

• юзает ни что сводит на нет всё что даёт нам typescript а О точно если мы о тайп скрипте у нас же тут тоже ТС есть надо тогда прописать типы э для листа А вот а и прописать типы для самого компонента to do Ну прописать ему интерфейс Я бы тут сделал Она вроде называется деструкторы зация Я бы вытащил туду вот таким образом [музыка] вот прописал бы тип для Ду Ну тут просто вот так напишу ty [музыка] так тогда тут нету смысла использовать если она такая простая нету смысла использовать можно и О я бы так написал

  01:42:52 - 01:44:44

• Con [музыка] равно и тут Душки экспорт дефолт останется а Наверное вот так Ну то есть ты бы добавил тип переписал бы на стрелою функцию Да и не убирал бы дефолт Смотри вот то что ты не убрал дефолт это правильно давам в и посмотрим как описан здесь компонент То есть как ты видишь он сделан не через речную функцию понимаешь да значит Е надо тоже переписать на стрелою мы должны поддерживаться одного и того же концепта да Но человек получается который написал такой код он был изначально прав получается да то есть он

  01:43:59 - 01:45:20

• сделал компонент на если тут мы юзаем функцию Ну допустим мы попадаем на какой-то проект который уже писали до нас и все тут пишут Вот так мы тоже должны писать Вот так да надо было тогда тут оставить function declaration опять же есть да Опять же есть правила которые даже какие пишет Какие разрешаются компоненты писать какие нет А так в принципе да то есть такой момент на самом деле меня на собеса тоже ловили такой штукой Я помню пришёл Прикинь на Собес А у человека как раз на react Create Element всё написано

  01:44:43 - 01:45:46

• то есть G ноль в нашем привычном виде и я начал писать новые компоненты G что он сказал мне что очень большая ошибка что ты не соблюдаешь конвенцию проекта который уже выстроена до тебя вот поэтому это тоже нужно учитывать так в принципе спред ты сделал тут сложно сказать потому что опять же как делается смотря надо смотреть как в других компонентах делается но в принципе ничего плохого в этом не вижу Потому что если прос везде понимаешь что как бы тоже среди не нужно или есть правила обычно проектах делают

  01:45:22 - 01:46:19

• знаешь спрем Если два надо доста Еме больше то уже не спрем потому что такая линейка получатся деструктуризация Дай да я заговорил с Я уже знаешь я уже стал что будет Запятая тока то про Я уже деструктуризация конечно же вот да но я всегда использую даже если один элемент так просто удобнее мне и всё не я понимаю это от конвенции зависит Просто представь у тебя будет пропсов конечно это странно и наверно ГТО с проектированием накосячил ЕС получилось у кого-то 10 про их все дееь Иногда люди как я говорю

  01:45:51 - 01:46:58

• договариваются такие Блин если больше трх то просто пропс А так в принципе да Ну вот такое задание для этого вот так сделать пропс Ну а если ты всё используешь да и закинуть это вот так не я имею в виду А что если ты используешь прос тебе не надо его Да я понимаю да если они где-то в теле используются то да Ну тогда можно да сделать как это как просто просы вытягивать нужное через про же это просто о конвенциях то есть это какие-то не какие-то стопроцентные правила Слушай в принципе то всё э на самом деле у меня давай просто в

  01:46:25 - 01:47:40

• последнем блоке так сказать поговорим Смотри э ты считаешь что ты джун хотя на самом деле вот по собеседованию скажу что у тебя прям очень хорошая база Я не спрашивал ничего Сверхъестественного по типу там знаешь в редакс про флагс и так далее или прям подкапотные или где-то до терминологии докапываюсь Потому что во-первых я не вижу в этом смысла какого-то то есть То есть это как-то странно э у нас не супе инженерное такое собеседование у фронтенде но в принципе ты на все вопросы ответил То есть

  01:47:02 - 01:47:59

• единственной но я думаю ты сам знаешь тайпскрипт то есть есть чуть-чуть недочёты а так в принципе у тебя ээ большой опыт понимание Ты знаешь ванилу на хорошем уровне опять же есть какие-то моменты где просто надо потянуть инженерию То есть просто как как браузер работает да возможно безопасность э какие-то такие вещи то есть банально Как как с одной стороны знаешь кажется что ты вот как раз из университета Но с другой стороны это нужно это нужно то есть это это нужно знать не выучить А знать и вот так по реакту мне всё

  01:47:31 - 01:48:45

• понравилось по остальным То есть как бы как я говорю только и то ты на самом деле справился опять же да то есть просто ты решил не самым лучшим вариантом То есть как бы нельзя сза зада гори раньше ранее нужны менторы Да люди которые будут следить которые направят которые подскажут также смотри у метла на самом деле есть ещё одна важная черта э это уже брать на себя больше ответственности в работе да то есть это уже не просто печатная машинка что ты задачу берёшь ходишь это возможно там проектирование чуть-чуть чуть-чуть уже

  01:48:08 - 01:49:20

• аналитики описание понимаешь да документация курирование очень важная часть И вот я хотел у тебя спросить сталкивался ли ты с этим вообще или ещё на твоём так сказать it пути не было таких понятий Ну мне кажется ты сам понимаешь то что вот у меня реакта оди год опыта и даже если ты попадёшь в какую-то хорошую компанию а тебя всё равно даже заказчик не захочет тебя соло ставить на какой-то проект А где ты стуля что-то будешь писать из моего опыта Это от самый свежий проект который я неделю назад начал он там довольно

  01:48:47 - 01:50:05

• маленький но я его пишу с нуля сам а на без йп скрипта ну там типа на неделю делов я могу в принципе описать В чём там я Я понял просто я же не говорил именно знаешь про проектирование целого проекта потому что даже иногда В задачах мы сталкиваемся с тем что надо что-то спроектировать какую-то знаешь часть проекта которая потом будет Возможно даже из проекта в проект переходить то есть то есть не всегда это новый прямо супер проект Да ну из проектирования что можно Ну в реакте можно вытащить такие

  01:49:26 - 01:50:32

• вот элементы как вот например тут inp мы можем какой-то инпут написать свой который можно перетаскивать с проекта проект так же само как и buton какой-то вот я видел ты там использовал ty где мы прокиды какой-то компонент точнее имя тега и эм самым описываем там какой-то текст вот вот такие вот подходы можно перетаскивать спокойно с проекта в проект просто меняя стили то есть всё что меняется только стили а именно логика сама она остаётся прежней на любом проекте приходилось ли тебе решать моменты какие библиотеки тащить Какие не

  01:49:59 - 01:51:30

• тащить анализировать и файловая структура наме этоже тоже на самом де такой важный Аспект Потому это порядок есть да у тебя в проекте показывает насколько ты качественно относишься Да к этому всему да было Вот как раз прошлый проект точнее тот который котором я сейчас нахожусь а там все решения принимал только я вот и да структура папок там очень важна Ты должен понимать а называя папку Ты должен сразу иметь в виду что ты будешь писать там то что напрямую связано с этим названием Допустим впи мы должны хранить только

  01:50:45 - 01:52:13

• опиш ную дату никакую другую там в папке й должн находиться й всё это должно раз должно быть разбито на папке также очень важно например там использовать в каждой там компоненте и папке индекс для того чтобы у нас лаконично выглядел импорт и экспорт компонент чтобы это не превращалось кашу где там очень много точка точ СШ Тото СШ потом типа выходила такая длинная строка вот да бы были такие моменты когда вот я вот понимал что приложение будет несложная а нету вот смысла Ну я об этом уже говорил нету смысла вот использовать

  01:51:28 - 01:53:00

• ty Script потому что я потрачу больше времени на написание типов а особо не заюзал мне не надо использовать там redx в определённых элементах Лучше там ну в определённых кейсах лучше использовать контекст потому что я там буду долго настраивать redx а кейс там небольшой там какой-то сделать Запроси вывести данные Зачем тащить там большую библиотеку ради этого А вот и у меня есть такое небольшое Понимание где надо использовать там тяжёлые библиотеки ээ где надо где можно обойтись ээ простым там Джем где думаю ты уловил ход мои Да я

  01:52:14 - 01:53:40

• уловил Слушай вот ты говорил что проект когу мне как бы сама бизнес сцена сегодня очень интересна мне интересно вот поэтому заказчику очень была важна скорость выполнения я понял я я в принципе услышал тебя Слушай а вот Сам ты настраивал когда-нибудь слин притир один раз один раз это было месяц назад и как раз я настраивал это по собственно по твоему стриму а сам лично чтобы прям копаться гуглить как это всё настроить таким таким я не занимался не жаль конечно ну я не скажу что жаль потому что на самом

  01:52:57 - 01:54:19

• деле я сво Ну типа если ты у меня спросишь знаю ли я как прям с нуля это знаешь такая вещь конфигурация Что ты делаешь Это один раз и потом через годик ещё раз то есть я имею в виду это не вот наверно только такой человек как я Стример да то есть который проекты меняет каждый месяц то есть я буду сталкиваться с этим постоянно но в принципе такая задача которая я не скажу что её надо заучить вот просто так сказал что блин что я не углубился по факту Ты же понимаешь концепт Ты же понимаешь как это ну сделать на самом

  01:53:59 - 01:54:55

• деле это я понимаю как это сделать И понимаю для чего это нужно вот да а это самое главное потому что я говорю я приводил всегда пример что вот м мы сварщики Да программисты А вот сварочный аппарат очки костюм - это вот наш как раз инструменты это наши вот эти крутые библиотеки и так далее но если ты не знаешь как варить то нет смысла от этого Поэтому такие вещи просто надо знать понимать пробовать когда-то надо просто возобновлять памяти да то есть попробовать ещё раз А так в принципе твой опыт известен последний вопрос по

  01:54:27 - 01:55:31

• всей этой истории Слушай вот мене такое ощущение сложилось пока ты расскажешь что ты работаешь один что у тебя нет команды нету какой-то Тим н такой было меня вот допустим самый первый проект который я уже в прот который пошёл меня поставили там ну он под Нда Но я могу в принципе д сло Да не может про проекты не рассказывать опять же просто вот про Команду Ну короче меня поставили типа самого вот там был очень большой проект прямо здоровы которые делали там по-моему года три До меня А он писался изначально на классовых

  01:54:59 - 01:56:15

• компонентах потом это всё начали потроху переписывать на функциональные и короче там была лютая каша там 70% - это классовая компоненты и 30 - это функциональные и это был самый первый Мой проект Нарек И когда я сел Я там тупо офигел Я не знал типа куда двигаться что делать Не мог найти даже место где писать но ну короче разобрался не слушай опыт рефакторинга это очень полезный опыт Я сам в такой ситуации был То есть я пришёл У меня всё На классах и как раз вышли хуки И я также переписывал Ну то есть мне кажется

  01:55:37 - 01:56:52

• много кто с этим столкнулся наверно те которые вот после то когда начали в двадцать первом году если начали учить react то думаю может и нет ну если кто-то успел проекты все переписать на работе так вот а про Команду то есть вот как я по один ты дел да а да вот этот проект был один а все остальные всегда был Ещё один постарше Ну это либо Мидл либо сеньор всегда был со мной Вот ну он да Там типа был такой небольшой менторинг плюс у меня ещё там в компании закреплён мой ментор к которому Я обращаюсь там По всем

  01:56:15 - 01:57:31

• вопросам Так что да всегда я был в компании в какой-то каком-то короче коллективе коллективе Слушай а ты учил в итоге кого-нибудь сам Ну типа я имею в виду как я понимаю код ревю Ты смотришь Ну я думаю это практика есть такая у вас на самом деле Ну мой код смотрит Я я чей-то код не смотрю вот слушай это полезная вещь Я бы на тво месте начал бы смотреть что это вот ты же смотришь мои стримы формально Это тот же самый код ревью Да я соглашусь и ты же видишь как это полезно когда я реквест Ну когда я пулю

  01:56:56 - 01:58:03

• себе код чужой то тогда смотрю Но типа я никакие комменты типа не оставляю Да я просматриваю то что написали там другие люди а но ну ты понимаешь там я комменты на ме квестах там не ставлю и всё такое Я понял но у тебя получается небольшая команда просто знаешь вот у меня например у меня изначально было тоже два разраба сейчас в команде разв и так как я технический Элит мне приходится всем этим заниматься и я тебе могу по своему опыту сказать и я же получается тоже кого-то учу да то есть специалистов пытаюсь делать как как могу

  01:57:28 - 01:58:41

• как получается и вроде как получается и кодре - это очень важная тема пото что ты как раз знаешь тем более одно дело знаешь смотреть какого там стримера который там в чатике ответит не ответит А это пря твои со командний Дискус начать То есть блин дава Будем так делать то есть совместный опыт получать понимаешь обмен компетенциями это прикольно Ну понимаешь ты ну ты там скорее всего в своей команде один из самых там сильных Но к моему мнению чаще всего не прислушивается вот даже если я его и говорю поэтому Ну Поэтому я всегда

  01:58:05 - 01:59:19

• просто делаю то что мне говорят мне говорят дела Это я делаю Это Поня вот ста Вот это такой момент Ну короче я бы я скажу что это не совсем правильный подход вот я бы выделил То есть то что они не прислушиваются своё мнение это не факт что ты не можешь его высказывать А вообще например вот чтобы ты понял у меня ситуация Какая если джун приходит я всегда выслушаю и одно дело знаешь типа сказать может я просто может те не правильно понял Смотри одна ситуация когда ты приходишь и говорит да давайте сделаем так и тебе говорят нет

  01:58:43 - 01:59:38

• мы не будем делать как ты говоришь А второй вариант тебе объяснят почему мы не будем так делать это же тоже опыт то есть Представь у тебя есть идея ты хочешь реализовать ты подходишь и говоришь у меня есть идея давайте сделаем так и тебе говорят Саш так не потому что потому что вот какой вариант первый или второй у тебя меня был такой вариант я говорю давайте сделаем так А мне сказали нет Мы так делать не будем всё ну блин тут видишь тут я бы сказал не твой косяк короче вот а после и я бы тебе больше сказал я бы не сдавался на

  01:59:12 - 02:00:05

• этой теме Ну то есть я имею в виду я всё равно бы развивался и предлагал бы идеи потому что я считаю это тоже важно потому что Ну вот как раз сидеть и нути просто дела Что те говорят же понимаешь это тоже не развива Вот это свой навык я бы сказал даже аналитики и проектирования потому что ну получается ты всё что ты предлага не ты даже не будешь думать о том что ты можешь что-то предложить Ну ладно мы растянули тему В принципе я понял есть моменты которые как бы медлу нужны Вот как раз это вот как раз уже

  01:59:38 - 02:00:38

• знаешь мышление не просто вот то что мне дают делать А как раз обдумывать предлагать но я вижу ты ты стараешься на самом деле это делать то есть я по твоему Ну диалогу нашему понял что ты не просто пишешь код вот желательно конечно уже начать кого-то мерить Но я также понимаю что это от компании может зависеть типа у тебя просто нету человека которого ты можешь мерить то есть да Ну я думаю что возможно в компании есть слабее меня разработчики но думаю там два-три человека максимум наберётся Ну а так в

  02:00:07 - 02:01:15

• принципе вот вот давай так если бы у нас был сейчас реальный Собес Да предположим в компанию мою компанию я создал компанию делать Я бы на вакансию тебя п взял бы и от того как бы ты справился в испытательном сроке Я бы даже наверное Ну дал бы старшего с потому что я Ну вот такой момент знаешь у меня был бывший руководитель он не просто собеседован ещё пытался зацепиться за потенциал То есть например и Понятное дело что тебя можно оставить на джуне но я бы дал медла с расчётом того что это тебя ещё

  02:00:41 - 02:01:50

• больше за мотивирует Да и Ну через После испытательного и опять же смотря как ты закончишь испытательный чтобы за тебя ещ больше замотивировать и возможно там бы потом был в районе пол там год и больше интервал до того же там midle п старшего это опять же от того зависит как ты будешь развиваться Но вот я бы попытался замотивировать и раскрыть дальше потенциал то есть потому что в принципе как я говорю я вижу что ты заинтересован я вижу что ты разбираешься ты смотришь читаешь а это очень важно на самом-то

  02:01:16 - 02:02:11

• деле Вот и на самом деле так как я тоже учусь собеседовать Яша собеседование Расскажи понравилось не понравилось что ты считаешь где я тебя угнетай изменил чтобы я в следующие собесы когда делал возможно что-то улучшил Ну давай я про себя скажу а я был не очень хорош конечно на этом собеседовании прямо чувствовалось что я проседают по HTML сссу я такой так сильно тормозил вспоминал что там короче всё-таки надо было что-то повторить подготовиться но я лично хотел узнать мой текущий уровень э без подготовки на

  02:01:44 - 02:03:10

• что я способен сейчас вот если прямо сейчас бы меня отвели на Собес А чтобы я мог ответить вот а ну мне просто кажется что то что ты вот выучил перед собеседованием это ну оно превращается в такое типа делается иллюзия того что ты знаешь больше чем на самом деле потому что вот ты выучил там какие-то определённые моменты ты их на собесе на собеседовани отговорил А через неделю Ты это уже забудешь и это оказались не настоящие твои знания в текущий момент Слушай но поэтому как бы есть собеседуем а вот прям чтобы посмотреть

  02:02:27 - 02:03:46

• насколько ты компетентен например вот этот пример последний Да чтобы посмотреть как ты вот смотришь на код и так далее То есть мне кажется это как раз задача собеседуем что вот твой уровень Я бы ну я не знаю даже какой тестовой дать потому что примерно я понимаю твой уровень и как раз бы я за там испытательный срок он в среднем 3 месяца я бы посмотрел как ты именно пишешь код и потому что я ещё понимаешь что из-за того что тебе очень интересно и ты хочешь развиваться хорошей команде ты вот как раз сильно бы развился и я

  02:03:16 - 02:04:13

• думаю после испытательного получил бы старшего то есть 3 месяца чтобы знаешь апнуться посмотреть там поговорить и так далее вот поэтому вот как раз тот момент что мне кажется беседую должен раскрыть насколько ты заучи и насколько ты реально знаешь вот Извини что перебил ничего страшного Да было очень интересно Да я вот ну я чувствую типа запал себе И когда я чувствую что я запарился не развиваюсь я просто там нахи какой-то новый проект создаю начинаю его делать Вот собственно так и произошло Правда я очень часто забиваю

  02:03:53 - 02:05:05

• на это хочется себе по голове насту Кать за такое вот Но короче как-то пытаюсь развиваться двигаться дальше когда чувствую что вот я стал на месте например месяц и у меня ничего там нового не происходит в плане разработки типа всё одно и то же самое тогда надо просто идти и какую-то новую технологию взять потрогать её для того чтобы просто это даже не для того чтобы там расширить там твой стек а для того чтобы у тебя там мозги не засыхал в чём-то новом каком-то контексте вот А по поводу самого собеса

  02:04:28 - 02:05:41

• было очень интересно А по поводу вопросов было не очень сложно было намного сложнее у меня пару со бесов Вот Но тоже типа ну уровень как мне кажется довольно высокий э как для Джуна Вот но мне он показался не очень сложным беседа такая лёгкое не знаю всё очень открыто всё очень интересно было Слушай а что спрашивали у тебя Вот давай поделимся с подписчиками спрашивали меня по тайп скрипту Ну давай с самого начала Ну начинают как всегда HTML CSS там спрашивали функции конструкторы классов там что там например Значит

  02:05:06 - 02:06:51

• супер в когда ты как это называется когда ты от одного класса на следуешь Что значит супер внутри конструктора декораторы потом поту тамри Вот это момен чтом отличается тип от интерфейса а потом ну это очень давно было конечно но я пытаюсь вспомнить сейчас а по гиту спрашивали там какие есть Ну как вообще ХТ там работает э какие есть возможности там слить изменения Ну это имеется в виду merch rebase там чере пики потом спрашивали по ноде Что означает там собачка в версиях Что означает там птичка вот эта Вверх а я не

  02:06:00 - 02:07:56

• помню как она называется а Душка дошок или как-то так а потом спрашивали Вот например есть там версия 1.1 там 111 да Через точку что как называется каждая из секций перед точкой там последняя пач Да да да вот это а не а не подожди Лиз версия и пач по-моему или я могу ошибаться но вообще на самом деле я не помню на самом деле Слушай вопросы такие специфичные я бы сказал оные То есть походу Там оп да было Ну так или иначе ла Ну ещё были эти Мидл веры Я кстати думал что ты про них спросишь ты не с слушай ну мы frend Я

  02:07:01 - 02:08:32

• про вообще не собирался спрашивать никак есть в редакции а ну ты ну блин ну это просто обработка данных Ну и всё типа Ну я имею в виду в плане я думал ты не по редакцию Я не собирался прям сильно спрашивать главное мне Главное было понять Знаешь ли ты концепты и всё как бы я могу там знаешь Давайте вспомним MPS Connect Давайте ещё FL Так давай посмотрим что за слайс такой ну и так далее но я не знаю это короче просто моё видение такое вообще в принципе что человек если он прям разбирается хочет разбираться то в

  02:07:46 - 02:09:08

• принципе э библиотеке это инструменты и их несложно выучить и понять есть концепции основные которые вот нужно знать потому что это база э которая ну типа без базы Ну ты не построишь вообще ничего да А так в принципе не Ну слушай м Я ра что тебе понравилось как тебе Вот мне интересно как тебе последнее задание я просто ни у кого не видел Вот такое типа знаешь обычно как или Исправьте ошибки код не работает или какой-то Напишите код прямо в Реал тайме Ну у нас тоже такое было но вот такой вот Вот

  02:08:27 - 02:09:23

• пример где ты просто так размышляешь чтобы ты улучшил и так далее Как тебе вообще это было прикольно но я не сразу словил короче нужную задачу потому что как ты и говорил это всё время спрашиваю там исправ Тото исправ что-то ты такой мыслишь более так глобально и ты смотришь именно функциональность как бы понять функциональность А тут имелось в виду именно и же са детали название переменных и так далее Ну да это интересно прикольно тоже первый раз такое типа встречаю чтобы так именно Фактори глубоко можно так сказать слушай

  02:08:56 - 02:10:12

• знаешь что я забыл короче в тушке ещ можно было юзать потому что если шек будет много там опять же за сся но я думаю ты понимаешь как работают гува собеседовании тоже сказали типа задача лай кодинг надо было отрисовать две кнопки и между ними Циферки короче Кнопка - это инкремент и декремент понял И это должно быть каждая компонента отдельно отдельно плюс отдельно минус кнопка и отдельно вывод текста и весь йт должен быть в родительской компоненте надо было сделать так чтобы по нажать на плюс или же на

  02:09:34 - 02:10:52

• минус у нас не редери кнопки чтобы они только один раз ренде и всё Ну тот же Мемо и Ну и всё ме только там ещё был прикол в том что в сейте надо было написать функцию там где прев Ну Дада чтобы он брал не нынешний А предыдущий прибавлял к нему дада да Ну слушай неплохая тоже такая Задачка Ну у такая я бы сказал Она очень простая и показывает что человек встречался не встречался на самом деле Ну ладно Саш мы очень долго говорим Не знаю возможно я запишу себе что возможно надо покороче делать но я надеюсь я тебя сильно не

  02:10:17 - 02:11:30

• задержал вот и нене не Если что можешь обрезать что-нибудь не нене мне мне всё понравилось ничего обрезать не собираюсь прям очень всё классно позитивно как ты сказал открыто Спасибо что пришёл получается да на собеседование как говорю всё отлично продолжай заниматься Я думаю какие-то моменты ты подметил после этого собеседования которые тебе надо усилить Я думаю пару проекти ков у тебя на гите снова появится в которых ты будешь тренироваться и кстати я очень хотел ещё сказать тебе вот ты сказал про

  02:10:53 - 02:11:47

• проекты на самом деле очень прикольная тоже тема и очень классно что ты делаешь проекты потому что вот например меня взяли на работу а мне не дали тестовое потому что я показал свой проект и этого было достаточно понимаешь да то есть как бы э там понимаешь особенно на гитхабе видно же как ты комитек да какая у тебя там Грамматика В гите опять же как ты пишешь коммиты как ты там Всё это объединяет мёрз Да соответственно То есть это тоже учти то есть в дальнейшем возможно тебе это поможет Да я согласен Ну я же использую там как

  02:11:22 - 02:12:31

• я не помню конвенция коммитов там типа фича это там пишешь фи две точки фикс фикс две точки и название я понимаю да некоторые просто вообще ничего не пишут и просто хорошие привычки короче вредная привычка заработать проще чем потом от неё её заменить на полезную привычку не знаю ко хорошую привычку вот всё не буду теб больше задерживать Спасибо опять же что пришёл классное собеседование всем понравилось что я могу сказать ребят пишите э комментарии по поводу что что вам понравилось что не понравилось что

  02:11:56 - 02:13:05

• мне улучшить э Я уже вижу как Уменьши Собес на час комментарий вот э также хочу сказать чтобы вы написали Саша Какой он молодец Возможно где он не молодец и мы это вместе обсудим Саша я думаю тоже сможет Обсудить с вами да возможно где-то поспорим где-то что-то нет Вот поэтому Всё Всем спасибо кто досмотрел до это ставим лайк и следующее собеседование Ну может быть уже не за горами Всё Всем пока

  02:12:31 - 02:13:17