Perguntas de entrevista para desenvolvedor full stack júnior
Milad Bonakdar
Autor
Prepare-se para entrevistas full stack júnior com perguntas práticas sobre HTML, CSS, JavaScript, React, Node.js, APIs, SQL, Git e depuração.
Comece pelos fundamentos full stack
Uma entrevista para full stack júnior costuma verificar se você consegue explicar como uma aplicação web simples funciona do navegador até o banco de dados: HTML e CSS estruturam a página, JavaScript adiciona comportamento, React gerencia o estado da interface, Node.js executa a lógica do servidor, APIs conectam as camadas, SQL armazena dados e Git mantém o trabalho revisável.
Use este guia para praticar primeiro respostas curtas e claras. Depois, conecte cada resposta a um projeto pequeno que você construiu. Em nível júnior, raramente esperam arquitetura avançada, mas esperam fundamentos claros, bons hábitos de depuração e explicações honestas sobre trade-offs.
Como se preparar
- Saiba explicar um projeto desde um evento de UI até uma chamada de API e uma consulta no banco.
- Fale sobre bugs que você corrigiu, não apenas sobre funcionalidades entregues.
- Mantenha as respostas práticas: defina o conceito, dê um exemplo pequeno e cite um erro comum.
HTML & CSS
1. Explique o Box Model em CSS.
Resposta: O Box Model CSS é a base do layout na web. Cada elemento é representado como uma caixa retangular.
- Conteúdo: O texto ou imagem real.
- Padding: Área transparente ao redor do conteúdo (dentro da borda).
- Border: Uma borda que circunda o padding e o conteúdo.
- Margin: Área transparente fora da borda (cria espaço entre os elementos).
Frequência: Muito Comum Dificuldade: Fácil
2. Qual é a diferença entre display: block, inline e inline-block?
Resposta:
- Block: Começa em uma nova linha e ocupa toda a largura disponível (por exemplo,
<div>,<p>). - Inline: Não começa em uma nova linha e ocupa apenas a largura necessária. As propriedades
widtheheightnão têm efeito (por exemplo,<span>,<a>). - Inline-block: Semelhante aos elementos inline, mas você pode definir
widtheheight. Útil para grids ou menus de navegação.
Frequência: Comum Dificuldade: Fácil
3. O que é HTML Semântico e por que é importante?
Resposta: HTML Semântico significa usar tags que transmitem o significado do conteúdo, não apenas sua aparência.
- Exemplos:
<header>,<nav>,<article>,<footer>em vez de apenas<div>s. - Importância:
- Acessibilidade: Leitores de tela usam essas tags para ajudar usuários com deficiência visual a navegar.
- SEO: Mecanismos de busca entendem melhor a estrutura e a importância do conteúdo.
- Legibilidade: O código é mais fácil para os desenvolvedores entenderem.
Frequência: Comum Dificuldade: Fácil
4. Explique Flexbox vs. CSS Grid.
Resposta:
- Flexbox: Um modelo de layout unidimensional (linha OU coluna). Melhor para alinhar itens dentro de um contêiner ou distribuir espaço (por exemplo, uma barra de navegação).
- CSS Grid: Um modelo de layout bidimensional (linhas E colunas). Melhor para definir o layout geral de uma página (por exemplo, cabeçalho, barra lateral, conteúdo principal, rodapé).
Frequência: Comum Dificuldade: Média
JavaScript
5. Qual é a diferença entre var, let e const?
Resposta:
var: Escopo de função (ou escopo global). Pode ser redeclarada e atualizada. Elevada (hoisted) para o topo de seu escopo.let: Escopo de bloco (só existe dentro de{}). Pode ser atualizada, mas não redeclarada no mesmo escopo.const: Escopo de bloco. Não pode ser atualizada ou redeclarada. Deve ser inicializada durante a declaração. Use esta por padrão, a menos que precise reatribuir.
Frequência: Muito Comum Dificuldade: Fácil
6. Explique async e await.
Resposta:
async e await (introduzidos no ES2017) fazem com que o código assíncrono pareça e se comporte mais como código síncrono.
async: Colocado antes de uma função, garante que a função retorne uma Promise.await: Usado dentro de uma funçãoasync, pausa a execução até que a Promise seja resolvida.- Benefício: Mais limpo e legível do que encadear
.then()e.catch().
Frequência: Comum Dificuldade: Média
7. O que é o DOM?
Resposta: O DOM (Document Object Model) é uma interface de programação para documentos web. Ele representa a página para que os programas (JavaScript) possam alterar a estrutura, o estilo e o conteúdo do documento. O DOM representa o documento como nós e objetos.
Frequência: Comum Dificuldade: Fácil
8. Qual é a diferença entre == e ===?
Resposta:
==(Igualdade Solta): Compara valores após fazer coerção de tipo (convertendo-os para um tipo comum). Por exemplo,5 == "5"étrue.===(Igualdade Estrita): Compara tanto o valor quanto o tipo. Sem coerção de tipo. Por exemplo,5 === "5"éfalse.- Melhor Prática: Sempre use
===para evitar bugs inesperados.
Frequência: Comum Dificuldade: Fácil
React
9. O que é o Virtual DOM?
Resposta: O Virtual DOM é uma cópia leve do DOM real mantida na memória.
- Processo: Quando o estado muda, o React atualiza o Virtual DOM primeiro. Em seguida, compara o novo Virtual DOM com o anterior (diffing) e calcula a maneira mais eficiente de atualizar o DOM real (reconciliação).
- Benefício: Minimiza a manipulação direta do lento DOM real, melhorando o desempenho.
Frequência: Comum Dificuldade: Média
10. O que são Props e State?
Resposta:
- Props (Properties - Propriedades): Dados somente leitura passados de um componente pai para um componente filho. Permitem que os componentes sejam reutilizáveis e dinâmicos.
- State (Estado): Dados gerenciados dentro do componente. Pode mudar ao longo do tempo (por exemplo, entrada do usuário, resposta da API). Quando o estado muda, o componente é renderizado novamente.
Frequência: Muito Comum Dificuldade: Fácil
11. O que são React Hooks? Cite alguns comuns.
Resposta: Hooks são funções que permitem que componentes funcionais usem recursos do React como estado, contexto, refs e efeitos.
useState: Guarda estado local do componente, como valor de formulário ou aba selecionada.useEffect: Sincroniza um componente com algo fora do React, como busca de dados ou inscrição em evento. Não deve ser usado para qualquer cálculo.useContext: Lê um contexto compartilhado sem passar props manualmente por todos os níveis.- Dica de entrevista: Mencione as Rules of Hooks: chame hooks no nível superior de um componente React ou custom hook, não dentro de loops ou condições.
Frequência: Comum Dificuldade: Média
Node.js & Backend
12. O que é Node.js e por que ele é single-threaded?
Resposta: Node.js é um runtime JavaScript construído sobre o motor V8. Ele executa JavaScript em uma thread principal, mas consegue lidar com muitas tarefas de I/O porque o event loop coordena o trabalho assíncrono.
- Thread principal: Executa seus callbacks JavaScript.
- I/O não bloqueante: Operações de arquivo, rede e banco de dados podem ser delegadas ao sistema operacional ou à libuv e retomadas quando o resultado estiver pronto.
- Limite importante: JavaScript pesado em CPU ainda pode bloquear o event loop. Para trabalho caro, use worker threads, fila de jobs ou tire isso do caminho da requisição.
- Bom exemplo: Um servidor de API que espera muitas chamadas de banco ou rede.
Frequência: Comum Dificuldade: Média
13. O que é NPM e package.json?
Resposta:
- NPM (Node Package Manager): O gerenciador de pacotes padrão para Node.js. Permite instalar e gerenciar bibliotecas (dependências).
package.json: O arquivo de manifesto para um projeto Node.js. Lista metadados (nome, versão) e dependências (bibliotecas necessárias para executar o aplicativo).
Frequência: Comum Dificuldade: Fácil
14. Explique a diferença entre GET e POST.
Resposta:
- GET: Recupera um recurso. Deve ser seguro, ou seja, não alterar intencionalmente o estado do servidor, e idempotente, de modo que repetir a mesma requisição tenha o mesmo efeito.
- POST: Envia dados para o servidor processar, geralmente para criar um recurso ou disparar uma ação. Não há garantia de idempotência, então repetir um POST pode criar trabalho duplicado se a API não se proteger.
- Exemplo prático: Use GET para carregar uma lista de produtos; use POST para enviar um pedido ou criar um comentário.
Frequência: Comum Dificuldade: Fácil
Banco de Dados (SQL)
15. O que é uma Primary Key e uma Foreign Key?
Resposta:
- Primary Key (Chave Primária): Uma coluna (ou conjunto de colunas) que identifica exclusivamente cada linha em uma tabela. Não pode ser
NULL. - Foreign Key (Chave Estrangeira): Uma coluna que se liga à Primary Key de outra tabela. Estabelece uma relação entre duas tabelas.
Frequência: Comum Dificuldade: Fácil
16. Explique a diferença entre INNER JOIN e LEFT JOIN.
Resposta:
- INNER JOIN: Retorna registros que têm valores correspondentes em ambas as tabelas.
- LEFT JOIN (ou LEFT OUTER JOIN): Retorna todos os registros da tabela da esquerda e os registros correspondentes da tabela da direita. Se não houver correspondência, o resultado é
NULLno lado direito.
Frequência: Muito Comum Dificuldade: Média
17. O que é Normalização?
Resposta: Normalização é o processo de organizar os dados em um banco de dados para reduzir a redundância e melhorar a integridade dos dados.
- Objetivo: Dividir tabelas maiores em tabelas menores e vinculá-las usando relacionamentos.
- Formas: 1NF, 2NF, 3NF (A Terceira Forma Normal geralmente é suficiente para a maioria das aplicações).
Frequência: Incomum (para Juniores) Dificuldade: Média
Geral
18. O que é Git e por que o usamos?
Resposta: Git é um sistema de controle de versão distribuído.
- Uso: Ele rastreia as mudanças no código-fonte durante o desenvolvimento de software.
- Benefícios: Permite que vários desenvolvedores trabalhem juntos (colaboração), mantém um histórico de mudanças (versionamento) e permite reverter para estados anteriores se algo quebrar.
Frequência: Comum Dificuldade: Fácil
19. O que é uma API?
Resposta: API significa Application Programming Interface (Interface de Programação de Aplicações). É um conjunto de regras que permite que diferentes aplicações de software se comuniquem entre si. No desenvolvimento web, geralmente se refere a uma API REST onde um frontend (Cliente) solicita dados de um backend (Servidor).
Frequência: Comum Dificuldade: Fácil
20. Como você depura uma aplicação web?
Resposta: Comece reproduzindo o problema e reduzindo o escopo: navegador, requisição de rede, handler do backend ou banco de dados.
- Frontend: Use DevTools do navegador: Console para erros, Network para status e payloads de API, Elements para HTML/CSS e React DevTools quando fizer sentido.
- Backend: Verifique logs estruturados, IDs de requisição, stack traces, variáveis de ambiente e consultas ao banco. Use um depurador quando o fluxo não estiver claro.
- Boa resposta: Explique um bug real que você corrigiu, o que verificou primeiro e como confirmou a correção.
Frequência: Comum Dificuldade: Fácil
