Q&A para Entrevistas

Frontend e Backend

Este é um questionário direto do Plano de Estudos voltado para engenheiros Full-Stack e Front-end, cobrindo React, Node.js, TypeScript e DevOps.

1. Padrões TypeScript

Os padrões em TypeScript combinam Design Patterns clássicos com recursos da própria linguagem:

• Padrões Clássicos (GoF): Factory, Singleton, Observer, Decorator (amplamente usado com classes em Angular/NestJS).
• Tipos Utilitários: O uso de Partial<T>, Omit<T, K>, Pick<T, K> para manipular tipos dinamicamente sem repetição.
• Tipos Genéricos (Generics): Componentes ou funções reutilizáveis (function useFetch<T>(url: string)).
• União Discriminada (Discriminated Unions): Usar uma propriedade literal comum (como type: 'SUCCESS' | 'ERROR') para estreitar o tipo (type narrowing) de forma segura no switch, comum em Redux e State Machines.

2. Code-Splitting em React SaaS

Para reduzir o bundle inicial e aumentar a performance:

• Por Rota: Uso de React.lazy() e Suspense. O código da página de “Configurações” só é baixado se o usuário acessar essa rota.
• Nível de Componente: Lazy loading de componentes pesados que não aparecem de imediato (ex: modais complexos, gráficos).
• Por Utilidade: Usar import() dinâmico para carregar bibliotecas pesadas de cálculo ou exportação de PDF apenas quando a ação ocorre.
• Vendor Chunking: Configurar Webpack/Vite para separar node_modules do código da aplicação, melhorando o cache do navegador.

3. Versionando uma Biblioteca de Componentes

Para garantir adoção segura em micro-frontends:

• SemVer (Semantic Versioning): Respeitar estritamente (MAJOR.MINOR.PATCH).
• Peer Dependencies: React e ReactDOM devem ser peerDependencies para evitar múltiplas instâncias do React rodando em paralelo, o que quebra a aplicação.
• Ferramentas: Lerna, Turborepo ou Bit para gerenciar versões e changelogs num monorepo.
• Formatos de Saída: Fazer build gerando formatos ESM e CJS, exportando as tipagens TypeScript (.d.ts).

4. Pipeline CI/CD com Azure DevOps

Estrutura básica de um azure-pipelines.yml:

1. Instalação: npm ci para instalar dependências fielmente ao lockfile.
2. Qualidade: Scripts de linting (npm run lint).
3. Testes: Executar testes (npm test) configurados para gerar relatórios Cobertura/JaCoCo.
4. Gates (Relatórios): Tarefas PublishTestResults@2 e PublishCodeCoverageResults@1. Usar Branch Policies para barrar PRs com cobertura abaixo da meta.
5. Build e Artefatos: npm run build e publicar usando PublishBuildArtifacts@1.
6. Deploy: Pipelines de release com aprovações manuais antes de enviar para Produção.

5. Ordem de Middlewares no Express

A ordem de execução é sequencial e crítica:

1. Globais/Segurança: helmet(), cors(), e parsers do body (express.json()).
2. Rate Limiting: Barrar abusos ou ataques DDoS cedo.
3. Autenticação: Extrair e validar o JWT (se falhar, 401 Unauthorized).
4. Validação (Zod/Joi): Validar req.body e parâmetros. Se falhar, retorna 400 Bad Request antes de bater no banco.
5. Controlador: Lógica de negócio e acesso a dados.
6. Handler Global de Erros: O middleware (err, req, res, next) obrigatoriamente no final para capturar crashes e retornar erro 500 formatado.

6. Testando Data Fetching no React no Mount

Uso do React Testing Library (RTL) e Mock Service Worker (MSW).

1. Mocking com MSW: Em vez de mockar o Axios ou Fetch, intercepta-se a rede diretamente (ex: retornando status 200 com mock data).
2. Loading State: Usa-se expect(screen.getByTestId('spinner')).toBeInTheDocument() na primeira renderização.
3. Success State: Usa-se query assíncrona (await screen.findByText('Dado Mockado')) para aguardar a resolução e verificar a UI.
4. Error State: Força-se o MSW a retornar um erro 500 no escopo do teste, garantindo que a mensagem de erro (ex: await screen.findByText('Falha ao carregar')) aparece na tela.

7. Alta Concorrência no Node.js (Sem Bloquear o Event Loop)

• I/O Assíncrono: Nunca usar métodos como fs.readFileSync em rotas (bloqueiam toda a thread principal).
• Tarefas de CPU Intensivas: Mover cálculos pesados (criptografia, exportação de CSV/PDF) para Worker Threads ou enviar para Message Queues (ex: Redis + BullMQ) sendo processado por um microsserviço à parte.
• Connection Pooling: Otimizar as conexões de banco de dados.
• Caching: Usar Redis para servir dados quase-estáticos, poupando CPU e chamadas ao banco.

Relacionadas: Plano de Estudos · react-code-splitting · express-middleware-chain