Тех собес на middle-senior Frontend Разработчик в ****

Доступно с премиум-подпиской

Оформите премиум-подписку, чтобы получить доступ к:

  • Фильтрации по компаниям
  • Названиям компаний в интервью
  • Видеозаписям собеседований в категории Frontend Разработчик

Посмотреть видео в категории

(2025-01-30)

Задача 1: Обработка JSON данных

  • Спарсить два json файла users и posts и в каждого Юзера запихать его посты в поле posts.
import { Controller, Get, Header } from '@nestjs/common';
import { AppService } from './app.service';
import * as fs from 'fs/promises';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  async getHello(): Promise<any> {
    // Чтение и парсинг данных пользователей и постов
    const [usersData, postsData] = await Promise.all([
      fs.readFile('./src/users.json'),
      fs.readFile('./src/posts.json'),
    ]);

    const users = JSON.parse(usersData.toString());
    const posts = JSON.parse(postsData.toString());

    // Создаем Map для быстрого поиска постов по userId
    const postsByUser = posts.reduce((map, post) => {
      if (!map.has(post.userId)) {
        map.set(post.userId, []);
      }
      map.get(post.userId).push(post);
      return map;
    }, new Map<number, any[]>());

    // Преобразуем пользователей с добавлением их постов
    const enrichedUsers = users.map(user => ({
      ...user,
      posts: postsByUser.get(user.id) || [],
    }));

    return enrichedUsers;
  }
}
  • Обсуждение решения:
    • Что можно улучшить, оптимизировать?
    • Вопросы про алгоритмическую сложность.
    • Философствование насчет рефакторинга и оптимизации.

Задача 2: Вывод данных в React компоненте

  • Вывести пользователей по ссылке в реакт компоненте.
import { useState, useEffect } from 'react';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => setUsers(data))
      .catch(err => console.error(err));
  }, []);

  return (
    <ul>
      {users.length > 0 &&
        users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
    </ul>
  );
}

export default App;
  • Обсуждение решения:
    • Вопросы про useEffect.
    • Зачем нужны ключи?
    • Что будет, если принудительно поменять ключ?
    • Почему коллбэк в useEffect не надо делать асинхронным?