O Mapa Completo do Dev Web Moderno

## O Problema Real: Lacunas Invisíveis

Você sabe React. Talvez saiba Next.js. Consegue fazer um CRUD funcionar.

Mas quando alguém pergunta "como funciona o event loop?" ou "por que seu bundle tem 2MB?", o silêncio aparece. Essas lacunas são normais. Todo dev tem.

O problema é que elas se acumulam. E cobram caro na hora de debugar um bug em produção às 23h de uma sexta-feira.

Este post é um mapa. Vamos cobrir as lacunas mais comuns em quatro áreas: fundamentos web, JavaScript moderno, ferramentas de desenvolvimento e conceitos que todo iniciante pula rápido demais.

---

## Fundamentos Web que Você Pulou

### Como o Navegador Realmente Renderiza uma Página

Quando você digita uma URL, acontece muito mais do que "carregar o HTML". O processo segue uma sequência precisa.

1. **DNS Lookup** — resolve o domínio para um IP.
2. **TCP Handshake** — estabelece conexão com o servidor.
3. **TLS Negotiation** — se HTTPS, negocia criptografia.
4. **Request/Response** — envia HTTP request, recebe a resposta.
5. **Parsing** — HTML vira DOM, CSS vira CSSOM.
6. **Render Tree** — DOM + CSSOM combinados.
7. **Layout** — calcula posição e tamanho de cada elemento.
8. **Paint** — pinta pixels na tela.

Por que isso importa? Porque cada decisão sua impacta uma dessas etapas.

Um CSS enorme bloqueia o CSSOM. Um JavaScript síncrono bloqueia o parsing do DOM. Entender o pipeline é entender performance.

### HTTP na Prática

Muitos devs usam `fetch` sem entender o que acontece por baixo. Vamos desmistificar.

```javascript
// GET simples - o que realmente acontece
const response = await fetch('https://api.example.com/users', {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Authorization': 'Bearer seu-token-aqui'
  }
});

// Status codes que você PRECISA conhecer
console.log(response.status);
// 200 - OK
// 201 - Created (POST com sucesso)
// 204 - No Content (DELETE com sucesso)
// 301 - Moved Permanently (redirect)
// 304 - Not Modified (cache válido)
// 400 - Bad Request (erro seu)
// 401 - Unauthorized (sem autenticação)
// 403 - Forbidden (sem permissão)
// 404 - Not Found
// 429 - Too Many Requests (rate limit)
// 500 - Internal Server Error (erro do servidor)

// Headers importantes na resposta
console.log(response.headers.get('content-type'));
console.log(response.headers.get('cache-control'));
console.log(response.headers.get('x-ratelimit-remaining'));

A diferença entre 401 e 403 é sutil, mas crítica. O 401 significa "não sei quem você é". O 403 significa "sei quem você é, mas não pode acessar isso".

Cache: O Conceito Mais Ignorado

// Controlando cache no fetch
const freshData = await fetch('/api/data', {
  cache: 'no-store' // sempre busca do servidor
});

const cachedData = await fetch('/api/data', {
  cache: 'force-cache' // usa cache se disponível
});

// Cache com revalidação
const smartData = await fetch('/api/data', {
  next: { revalidate: 60 } // Next.js: revalida a cada 60s
});

Entender Cache-Control, ETag e Last-Modified separa o dev júnior do pleno. Não é glamuroso. Mas é o que faz sua aplicação voar.

---

JavaScript Moderno: O Que Realmente Importa

Event Loop — De Uma Vez Por Todas

JavaScript é single-threaded. Mas não é síncrono. Essa confusão gera bugs sutis.

console.log('1 - Síncrono');

setTimeout(() => {
  console.log('2 - Macro task');
}, 0);

Promise.resolve().then(() => {
  console.log('3 - Micro task');
});

queueMicrotask(() => {
  console.log('4 - Micro task via queueMicrotask');
});

console.log('5 - Síncrono');

// Saída:
// 1 - Síncrono
// 5 - Síncrono
// 3 - Micro task
// 4 - Micro task via queueMicrotask
// 2 - Macro task

A ordem de prioridade é: call stack → microtasks (Promises, queueMicrotask) → macrotasks (setTimeout, setInterval, I/O).

Microtasks sempre executam antes da próxima macrotask. Sempre.

Closures na Vida Real

Closures não são conceito acadêmico. Você usa todos os dias sem perc

---

Leia o artigo completo em https://vivodecodigo.com.br/carreira/mapa-completo-dev-web-moderno-ferramentas-javascript