<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: pcgustavo7</title>
    <description>The latest articles on DEV Community by pcgustavo7 (@pcgustavo7).</description>
    <link>https://dev.to/pcgustavo7</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4138567%2F50afa261-0f9c-40ed-9918-ee14a141c80e.png</url>
      <title>DEV Community: pcgustavo7</title>
      <link>https://dev.to/pcgustavo7</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pcgustavo7"/>
    <language>en</language>
    <item>
      <title>Bibliotecas (Lib): entendendo o que são e como usamos no desenvolvimento</title>
      <dc:creator>pcgustavo7</dc:creator>
      <pubDate>Wed, 23 Sep 2026 20:58:44 +0000</pubDate>
      <link>https://dev.to/pcgustavo7/bibliotecas-lib-jfl</link>
      <guid>https://dev.to/pcgustavo7/bibliotecas-lib-jfl</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Afinal, o que é uma biblioteca? Por que usamos &lt;code&gt;npm install&lt;/code&gt;? E qual é a diferença entre uma biblioteca e um framework?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Se você está começando a programar, provavelmente já encontrou coisas como:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;axios
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;ou:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;import React from &lt;span class="s1"&gt;'react'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Talvez também já tenha visto alguém falando:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Essa aplicação utiliza algumas libs."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Mas o que exatamente significa isso?&lt;/p&gt;

&lt;p&gt;Neste artigo, vamos entender &lt;strong&gt;o que é uma biblioteca (library ou lib)&lt;/strong&gt;, por que ela existe, como podemos utilizá-la em nossos projetos e qual é a diferença entre uma biblioteca, um framework e um código que nós mesmos escrevemos.&lt;/p&gt;




&lt;h1&gt;
  
  
  1. O problema: precisamos reinventar tudo?
&lt;/h1&gt;

&lt;p&gt;Imagine que você esteja desenvolvendo um sistema.&lt;/p&gt;

&lt;p&gt;Em determinado momento, você precisa:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;formatar datas;&lt;/li&gt;
&lt;li&gt;fazer requisições HTTP;&lt;/li&gt;
&lt;li&gt;validar e-mails;&lt;/li&gt;
&lt;li&gt;criar gráficos;&lt;/li&gt;
&lt;li&gt;trabalhar com arquivos;&lt;/li&gt;
&lt;li&gt;gerar PDFs;&lt;/li&gt;
&lt;li&gt;criptografar informações;&lt;/li&gt;
&lt;li&gt;manipular imagens.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Uma possibilidade seria escrever tudo do zero.&lt;/p&gt;

&lt;p&gt;Mas será que isso faz sentido?&lt;/p&gt;

&lt;p&gt;Imagine precisar criar manualmente uma função de validação de e-mail:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;validarEmail&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// dezenas de regras...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Agora imagine que você precise implementar dezenas de outras funcionalidades.&lt;/p&gt;

&lt;p&gt;O projeto rapidamente ficaria enorme.&lt;/p&gt;

&lt;p&gt;É justamente nesse tipo de situação que as bibliotecas se tornam úteis.&lt;/p&gt;




&lt;h1&gt;
  
  
  2. Afinal, o que é uma biblioteca?
&lt;/h1&gt;

&lt;p&gt;Uma &lt;strong&gt;biblioteca (library ou lib)&lt;/strong&gt; é um conjunto de códigos reutilizáveis criado para resolver determinados problemas ou fornecer funcionalidades que podem ser utilizadas dentro de outros programas.&lt;/p&gt;

&lt;p&gt;Em vez de desenvolver determinada funcionalidade do zero, podemos utilizar algo que já foi implementado.&lt;/p&gt;

&lt;p&gt;Uma maneira simples de visualizar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                 NOSSO PROJETO
                      |
          +-----------+-----------+
          |           |           |
          v           v           v
       Código      Código       Código
       próprio     próprio      próprio
          |
          +----------------------+
                                 |
                                 v
                           BIBLIOTECA
                                 |
                     +-----------+-----------+
                     |           |           |
                     v           v           v
                  Função      Função      Função
                  pronta      pronta      pronta
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A biblioteca fornece "peças" que podemos utilizar para construir nossa aplicação.&lt;/p&gt;




&lt;h1&gt;
  
  
  3. Uma analogia simples
&lt;/h1&gt;

&lt;p&gt;Imagine que você queira construir um carro.&lt;/p&gt;

&lt;p&gt;Você poderia fabricar absolutamente tudo:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;rodas;&lt;/li&gt;
&lt;li&gt;pneus;&lt;/li&gt;
&lt;li&gt;parafusos;&lt;/li&gt;
&lt;li&gt;banco;&lt;/li&gt;
&lt;li&gt;volante;&lt;/li&gt;
&lt;li&gt;motor;&lt;/li&gt;
&lt;li&gt;vidro;&lt;/li&gt;
&lt;li&gt;sistema de freios.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Seria possível?&lt;/p&gt;

&lt;p&gt;Em teoria, sim.&lt;/p&gt;

&lt;p&gt;Mas seria extremamente trabalhoso.&lt;/p&gt;

&lt;p&gt;Na prática, você utiliza componentes que já foram produzidos.&lt;/p&gt;

&lt;p&gt;O desenvolvimento de software segue uma ideia parecida.&lt;/p&gt;

&lt;p&gt;Em vez de criar tudo do zero, podemos utilizar componentes e funcionalidades que já existem.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Uma biblioteca é como uma caixa de ferramentas pronta: você escolhe as ferramentas necessárias e utiliza dentro do seu próprio projeto.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  4. Biblioteca não é código mágico
&lt;/h1&gt;

&lt;p&gt;Uma coisa importante para quem está começando:&lt;/p&gt;

&lt;p&gt;Uma biblioteca não "faz tudo sozinha".&lt;/p&gt;

&lt;p&gt;Ela é apenas código.&lt;/p&gt;

&lt;p&gt;Código escrito por outras pessoas que foi organizado de forma que outros desenvolvedores possam reutilizá-lo.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;resultado&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;somar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A função &lt;code&gt;somar()&lt;/code&gt; poderia ter sido criada por nós:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;somar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ou poderia estar dentro de uma biblioteca.&lt;/p&gt;

&lt;p&gt;A grande vantagem da biblioteca é que funcionalidades mais complexas podem ser disponibilizadas sem que precisemos implementar toda a lógica internamente.&lt;/p&gt;




&lt;h1&gt;
  
  
  5. Biblioteca na prática
&lt;/h1&gt;

&lt;p&gt;Vamos imaginar que precisamos trabalhar com datas.&lt;/p&gt;

&lt;p&gt;Poderíamos escrever diversas funções para:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;converter datas;&lt;/li&gt;
&lt;li&gt;comparar datas;&lt;/li&gt;
&lt;li&gt;adicionar dias;&lt;/li&gt;
&lt;li&gt;calcular diferenças;&lt;/li&gt;
&lt;li&gt;formatar datas.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Mas existem bibliotecas especializadas nisso.&lt;/p&gt;

&lt;p&gt;Por exemplo, uma biblioteca conhecida no ecossistema JavaScript é o &lt;strong&gt;date-fns&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Depois de instalar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;date-fns
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;podemos utilizar funções fornecidas pela biblioteca:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;format&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;date-fns&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dd/MM/yyyy&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Em vez de implementar toda a lógica de formatação de datas, utilizamos uma função já disponível.&lt;/p&gt;




&lt;h1&gt;
  
  
  6. O que acontece quando fazemos &lt;code&gt;npm install&lt;/code&gt;?
&lt;/h1&gt;

&lt;p&gt;Essa é uma parte muito importante para quem está começando com JavaScript.&lt;/p&gt;

&lt;p&gt;Quando executamos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;date-fns
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;estamos basicamente dizendo:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Quero adicionar essa biblioteca ao meu projeto."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;O gerenciador de pacotes baixa a biblioteca e registra a dependência do projeto.&lt;/p&gt;

&lt;p&gt;Normalmente veremos algo parecido no &lt;code&gt;package.json&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"dependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"date-fns"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^4.1.0"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Agora o projeto sabe que depende dessa biblioteca.&lt;/p&gt;




&lt;h1&gt;
  
  
  7. O &lt;code&gt;package.json&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;O arquivo &lt;code&gt;package.json&lt;/code&gt; é muito importante no ecossistema JavaScript.&lt;/p&gt;

&lt;p&gt;Ele pode armazenar informações como:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;nome do projeto;&lt;/li&gt;
&lt;li&gt;versão;&lt;/li&gt;
&lt;li&gt;scripts;&lt;/li&gt;
&lt;li&gt;dependências;&lt;/li&gt;
&lt;li&gt;dependências de desenvolvimento;&lt;/li&gt;
&lt;li&gt;configurações do projeto.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"meu-projeto"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1.0.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"start"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"node index.js"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"dependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"date-fns"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^4.1.0"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Observe:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"dependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"date-fns"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^4.1.0"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso significa que &lt;code&gt;date-fns&lt;/code&gt; é uma dependência utilizada pelo projeto.&lt;/p&gt;




&lt;h1&gt;
  
  
  8. Dependência e biblioteca são a mesma coisa?
&lt;/h1&gt;

&lt;p&gt;Não exatamente.&lt;/p&gt;

&lt;p&gt;Uma &lt;strong&gt;biblioteca&lt;/strong&gt; é um código reutilizável.&lt;/p&gt;

&lt;p&gt;Uma &lt;strong&gt;dependência&lt;/strong&gt; é algo de que o nosso projeto depende para funcionar ou para realizar determinada tarefa.&lt;/p&gt;

&lt;p&gt;Uma biblioteca pode ser uma dependência.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Meu projeto
     |
     +---- date-fns
     |
     +---- axios
     |
     +---- lodash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Nesse caso, essas bibliotecas podem ser dependências do projeto.&lt;/p&gt;

&lt;p&gt;Por isso, os termos aparecem frequentemente juntos.&lt;/p&gt;




&lt;h1&gt;
  
  
  9. Como usamos uma biblioteca?
&lt;/h1&gt;

&lt;p&gt;Depois de instalada, normalmente precisamos importar aquilo que queremos utilizar.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;axios&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;axios&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Depois podemos utilizar a funcionalidade fornecida:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;resposta&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://api.exemplo.com/users&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;resposta&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Perceba uma coisa interessante.&lt;/p&gt;

&lt;p&gt;Nós não precisamos saber exatamente como o Axios implementou internamente toda a comunicação HTTP.&lt;/p&gt;

&lt;p&gt;Utilizamos a interface disponibilizada pela biblioteca.&lt;/p&gt;




&lt;h1&gt;
  
  
  10. O que é uma API de uma biblioteca?
&lt;/h1&gt;

&lt;p&gt;Aqui existe uma confusão comum.&lt;/p&gt;

&lt;p&gt;Quando falamos de biblioteca, também podemos falar sobre a &lt;strong&gt;API da biblioteca&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Nesse contexto, API significa a forma como nosso código pode interagir com aquela biblioteca.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(...)&lt;/span&gt;
&lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(...)&lt;/span&gt;
&lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(...)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Essas funções fazem parte da interface disponibilizada pelo Axios.&lt;/p&gt;

&lt;p&gt;Podemos imaginar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                 NOSSO CÓDIGO
                      |
                      v
             axios.get(...)
                      |
                      v
              API DA BIBLIOTECA
                      |
                      v
             IMPLEMENTAÇÃO
                INTERNA
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Não precisamos necessariamente conhecer toda a implementação interna para utilizar a biblioteca.&lt;/p&gt;




&lt;h1&gt;
  
  
  11. Biblioteca é uma "caixa de ferramentas"
&lt;/h1&gt;

&lt;p&gt;Uma biblioteca normalmente possui diversas funcionalidades relacionadas.&lt;/p&gt;

&lt;p&gt;Imagine uma biblioteca para trabalhar com datas:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;date-fns
   |
   +--- format()
   +--- addDays()
   +--- subDays()
   +--- differenceInDays()
   +--- isBefore()
   +--- isAfter()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Nosso projeto pode utilizar apenas algumas delas.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;format&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;addDays&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;date-fns&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Podemos utilizar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;hoje&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;amanha&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;addDays&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;hoje&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;amanha&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dd/MM/yyyy&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Não precisamos criar todas essas funções.&lt;/p&gt;




&lt;h1&gt;
  
  
  12. Bibliotecas resolvem problemas específicos
&lt;/h1&gt;

&lt;p&gt;Uma biblioteca normalmente não existe simplesmente para "ser uma biblioteca".&lt;/p&gt;

&lt;p&gt;Ela costuma resolver algum problema.&lt;/p&gt;

&lt;p&gt;Podemos encontrar bibliotecas para praticamente qualquer área:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Problema&lt;/th&gt;
&lt;th&gt;Exemplos de bibliotecas&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Requisições HTTP&lt;/td&gt;
&lt;td&gt;Axios&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Datas&lt;/td&gt;
&lt;td&gt;date-fns&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Utilidades&lt;/td&gt;
&lt;td&gt;Lodash&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gráficos&lt;/td&gt;
&lt;td&gt;Chart.js&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Validação&lt;/td&gt;
&lt;td&gt;Zod&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Testes&lt;/td&gt;
&lt;td&gt;Vitest / Jest&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Componentes de interface&lt;/td&gt;
&lt;td&gt;várias opções&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Animações&lt;/td&gt;
&lt;td&gt;várias opções&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Manipulação de arquivos&lt;/td&gt;
&lt;td&gt;várias opções&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;A ideia principal é:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Existe um problema recorrente? É possível que exista uma biblioteca que já tenha uma solução para ele.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  13. Mas por que não fazer tudo sozinho?
&lt;/h1&gt;

&lt;p&gt;Essa é uma ótima pergunta.&lt;/p&gt;

&lt;p&gt;Porque desenvolvimento de software envolve muito mais do que escrever código.&lt;/p&gt;

&lt;p&gt;Também precisamos pensar em:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;tempo;&lt;/li&gt;
&lt;li&gt;manutenção;&lt;/li&gt;
&lt;li&gt;testes;&lt;/li&gt;
&lt;li&gt;segurança;&lt;/li&gt;
&lt;li&gt;compatibilidade;&lt;/li&gt;
&lt;li&gt;documentação;&lt;/li&gt;
&lt;li&gt;bugs;&lt;/li&gt;
&lt;li&gt;desempenho;&lt;/li&gt;
&lt;li&gt;atualização.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Imagine que você precise implementar uma biblioteca complexa de datas.&lt;/p&gt;

&lt;p&gt;Você poderia gastar dias ou semanas trabalhando em algo que outras pessoas já implementaram, testaram e documentaram.&lt;/p&gt;

&lt;p&gt;Isso não significa que devemos instalar uma biblioteca para absolutamente tudo.&lt;/p&gt;

&lt;p&gt;Significa apenas que devemos saber &lt;strong&gt;quando reutilizar código&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  14. Reutilização de código
&lt;/h1&gt;

&lt;p&gt;Um dos conceitos fundamentais por trás das bibliotecas é a &lt;strong&gt;reutilização&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Imagine que 10.000 projetos precisem realizar determinada tarefa.&lt;/p&gt;

&lt;p&gt;Sem uma biblioteca:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Projeto A → implementa
Projeto B → implementa
Projeto C → implementa
Projeto D → implementa
...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Com uma biblioteca:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                 BIBLIOTECA
                /    |    \
               /     |     \
              v      v      v
         Projeto A Projeto B Projeto C
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Uma implementação pode ser utilizada por vários projetos.&lt;/p&gt;

&lt;p&gt;É uma das grandes forças do desenvolvimento moderno.&lt;/p&gt;




&lt;h1&gt;
  
  
  15. Biblioteca vs código próprio
&lt;/h1&gt;

&lt;p&gt;Vamos comparar.&lt;/p&gt;

&lt;h3&gt;
  
  
  Código próprio
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;validarEmail&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// implementação criada pela equipe&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Biblioteca
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;zod&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;schema&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;object&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;string&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;email&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Nos dois casos existe código sendo executado.&lt;/p&gt;

&lt;p&gt;A diferença é &lt;strong&gt;quem implementou aquela solução e como ela é distribuída/reutilizada&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  16. Biblioteca vs Framework
&lt;/h1&gt;

&lt;p&gt;Essa é provavelmente uma das dúvidas mais comuns de quem está começando.&lt;/p&gt;

&lt;p&gt;Biblioteca e framework não são exatamente a mesma coisa.&lt;/p&gt;

&lt;p&gt;Uma maneira simples de pensar:&lt;/p&gt;

&lt;h3&gt;
  
  
  Biblioteca
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;"Eu chamo a biblioteca quando preciso dela."&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Meu código
    |
    v
Biblioteca
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Framework
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;"O framework fornece uma estrutura na qual meu código funciona."&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Framework
   |
   +---- Meu código
   |
   +---- Meu código
   |
   +---- Meu código
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Uma explicação bastante usada para essa diferença é a &lt;strong&gt;inversão de controle&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Na biblioteca, normalmente nós controlamos quando utilizamos suas funções.&lt;/p&gt;

&lt;p&gt;No framework, o framework define boa parte do fluxo da aplicação e chama nosso código nos momentos apropriados.&lt;/p&gt;




&lt;h1&gt;
  
  
  17. Uma comparação simples
&lt;/h1&gt;

&lt;p&gt;Imagine uma cozinha.&lt;/p&gt;

&lt;p&gt;Uma biblioteca seria como uma ferramenta:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Cozinha
  |
  +--- Liquidificador
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Você decide quando utilizar.&lt;/p&gt;

&lt;p&gt;Já um framework seria mais parecido com uma cozinha estruturada com regras sobre onde cada coisa deve ficar e como o processo deve funcionar.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Framework
   |
   +--- Estrutura
   +--- Regras
   +--- Fluxo
   +--- Convenções
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A analogia não é perfeita, mas ajuda a visualizar a diferença.&lt;/p&gt;




&lt;h1&gt;
  
  
  18. E o React?
&lt;/h1&gt;

&lt;p&gt;React é frequentemente chamado de biblioteca para construir interfaces de usuário.&lt;/p&gt;

&lt;p&gt;Um exemplo simples:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Olá&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;mundo&lt;/span&gt;&lt;span class="o"&gt;!&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui estamos utilizando funcionalidades fornecidas pelo React para construir a interface.&lt;/p&gt;

&lt;p&gt;O importante não é decorar se determinada tecnologia é chamada de biblioteca ou framework.&lt;/p&gt;

&lt;p&gt;É entender &lt;strong&gt;qual responsabilidade ela possui e como ela controla o fluxo da aplicação&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  19. E o Angular?
&lt;/h1&gt;

&lt;p&gt;No caso do Angular, temos uma estrutura mais abrangente para desenvolvimento de aplicações.&lt;/p&gt;

&lt;p&gt;Ele fornece várias ferramentas integradas para coisas como:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;componentes;&lt;/li&gt;
&lt;li&gt;injeção de dependência;&lt;/li&gt;
&lt;li&gt;roteamento;&lt;/li&gt;
&lt;li&gt;formulários;&lt;/li&gt;
&lt;li&gt;HTTP;&lt;/li&gt;
&lt;li&gt;organização da aplicação;&lt;/li&gt;
&lt;li&gt;ferramentas de desenvolvimento.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Por isso, Angular é normalmente tratado como um framework.&lt;/p&gt;




&lt;h1&gt;
  
  
  20. Biblioteca não significa "melhor"
&lt;/h1&gt;

&lt;p&gt;Outro erro comum é pensar:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Se existe uma biblioteca, então devemos utilizá-la."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Não necessariamente.&lt;/p&gt;

&lt;p&gt;Adicionar uma biblioteca também possui custos.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Nova biblioteca
      |
      +--- código adicional
      +--- dependências
      +--- atualizações
      +--- possíveis vulnerabilidades
      +--- manutenção
      +--- impacto no projeto
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Por isso, antes de instalar uma biblioteca, vale perguntar:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Eu realmente preciso dela?&lt;/li&gt;
&lt;li&gt;Posso resolver isso facilmente com código próprio?&lt;/li&gt;
&lt;li&gt;Ela é mantida?&lt;/li&gt;
&lt;li&gt;Possui documentação?&lt;/li&gt;
&lt;li&gt;É compatível com meu projeto?&lt;/li&gt;
&lt;li&gt;Existem vulnerabilidades conhecidas?&lt;/li&gt;
&lt;li&gt;O tamanho dela é adequado?&lt;/li&gt;
&lt;li&gt;A comunidade utiliza essa solução?&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  21. Cuidado com o "instalar uma lib para tudo"
&lt;/h1&gt;

&lt;p&gt;Imagine que alguém precise somar dois números.&lt;/p&gt;

&lt;p&gt;E decide instalar uma biblioteca:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;calculadora-super-ultra
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Para depois:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;soma&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;calculadora-super-ultra&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso provavelmente não faz muito sentido.&lt;/p&gt;

&lt;p&gt;Poderíamos simplesmente escrever:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;resultado&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A biblioteca precisa trazer uma vantagem real.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Uma boa prática não é usar o maior número possível de bibliotecas. É utilizar dependências que realmente agregam valor ao projeto.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  22. Bibliotecas também podem depender de outras bibliotecas
&lt;/h1&gt;

&lt;p&gt;Esse ponto é bastante interessante.&lt;/p&gt;

&lt;p&gt;Imagine:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Meu projeto
    |
    +---- Biblioteca A
              |
              +---- Biblioteca B
              |
              +---- Biblioteca C
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Nós instalamos apenas a Biblioteca A, mas ela pode depender de outras bibliotecas.&lt;/p&gt;

&lt;p&gt;Essas são chamadas de &lt;strong&gt;dependências transitivas&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Por isso, um projeto moderno pode possuir muito mais pacotes instalados do que aqueles que aparecem diretamente no &lt;code&gt;package.json&lt;/code&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  23. &lt;code&gt;node_modules&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;Depois de instalar dependências em um projeto JavaScript, normalmente encontramos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;node_modules/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Essa pasta contém os pacotes instalados e suas dependências.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;meu-projeto/
│
├── node_modules/
│   ├── axios/
│   ├── date-fns/
│   └── ...
│
├── package.json
├── package-lock.json
└── index.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;É importante entender:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;code&gt;node_modules&lt;/code&gt; não é o lugar onde normalmente editamos nossas bibliotecas.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Ele é o resultado da instalação das dependências.&lt;/p&gt;




&lt;h1&gt;
  
  
  24. E o &lt;code&gt;package-lock.json&lt;/code&gt;?
&lt;/h1&gt;

&lt;p&gt;Além do &lt;code&gt;package.json&lt;/code&gt;, é comum encontrarmos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;package-lock.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ele registra informações detalhadas sobre as versões das dependências instaladas.&lt;/p&gt;

&lt;p&gt;Isso ajuda a tornar a instalação mais previsível em diferentes ambientes.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Desenvolvedor A
      |
      v
npm install
      |
      v
mesmas versões

Desenvolvedor B
      |
      v
npm install
      |
      v
mesmas versões
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso é especialmente importante quando várias pessoas trabalham no mesmo projeto.&lt;/p&gt;




&lt;h1&gt;
  
  
  25. Biblioteca local vs biblioteca global
&lt;/h1&gt;

&lt;p&gt;No desenvolvimento com Node.js, também podemos encontrar instalações globais.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; alguma-ferramenta
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O &lt;code&gt;-g&lt;/code&gt; significa instalação global.&lt;/p&gt;

&lt;p&gt;Já:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;alguma-biblioteca
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;normalmente instala a dependência no projeto atual.&lt;/p&gt;

&lt;p&gt;Para bibliotecas utilizadas diretamente pelo código da aplicação, normalmente faz mais sentido que elas sejam dependências do próprio projeto.&lt;/p&gt;

&lt;p&gt;Assim, outro desenvolvedor consegue instalar o projeto utilizando:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  26. Como uma biblioteca chega até nosso código?
&lt;/h1&gt;

&lt;p&gt;Podemos visualizar todo o processo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Desenvolvedor
     |
     | npm install
     v
Registro de pacotes
     |
     v
Biblioteca
     |
     v
node_modules
     |
     v
Nosso código
     |
     v
import
     |
     v
Funções da biblioteca
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No ecossistema JavaScript, o npm é uma das principais formas de distribuir e instalar pacotes.&lt;/p&gt;




&lt;h1&gt;
  
  
  27. Uma biblioteca também pode ser criada por nós
&lt;/h1&gt;

&lt;p&gt;Aqui está uma ideia importante:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Nós também podemos criar bibliotecas.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Imagine que você criou algumas funções úteis:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;somar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;multiplicar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Você poderia organizar esse código e disponibilizá-lo para outros projetos.&lt;/p&gt;

&lt;p&gt;A ideia seria:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Projeto A
     |
     v
Minha biblioteca
     ^
     |
Projeto B
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso é reutilização de código em uma escala maior.&lt;/p&gt;




&lt;h1&gt;
  
  
  28. Biblioteca pública e biblioteca privada
&lt;/h1&gt;

&lt;p&gt;Nem toda biblioteca precisa ser disponibilizada publicamente.&lt;/p&gt;

&lt;p&gt;Uma empresa pode criar uma biblioteca interna para seus próprios projetos.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Empresa
   |
   +--- Sistema financeiro
   |
   +--- Sistema administrativo
   |
   +--- Aplicativo mobile
   |
   +--- Site
          |
          v
    Biblioteca interna
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Essa biblioteca poderia conter:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;componentes visuais;&lt;/li&gt;
&lt;li&gt;funções utilitárias;&lt;/li&gt;
&lt;li&gt;regras compartilhadas;&lt;/li&gt;
&lt;li&gt;validações;&lt;/li&gt;
&lt;li&gt;padrões de comunicação;&lt;/li&gt;
&lt;li&gt;componentes de formulário.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Isso evita que cada projeto precise implementar as mesmas coisas novamente.&lt;/p&gt;




&lt;h1&gt;
  
  
  29. Bibliotecas e Design System
&lt;/h1&gt;

&lt;p&gt;Um exemplo bastante interessante é o uso de bibliotecas para criar &lt;strong&gt;Design Systems&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Imagine uma empresa com vários sistemas.&lt;/p&gt;

&lt;p&gt;Todos precisam utilizar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Botões
Inputs
Modais
Tabelas
Cards
Menus
Cores
Tipografia
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Em vez de cada sistema criar seus próprios componentes, uma biblioteca pode disponibilizar esses elementos.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                 UI Library
                     |
        +------------+------------+
        |            |            |
        v            v            v
     Sistema A    Sistema B    Sistema C
        |            |            |
        +------------+------------+
                     |
              Mesmo padrão visual
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso facilita a manutenção e mantém consistência entre aplicações.&lt;/p&gt;




&lt;h1&gt;
  
  
  30. Como escolher uma biblioteca?
&lt;/h1&gt;

&lt;p&gt;Antes de instalar qualquer pacote, podemos fazer algumas perguntas.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Ela resolve realmente meu problema?
&lt;/h3&gt;

&lt;p&gt;Se a resposta for não, provavelmente não precisamos dela.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Possui documentação?
&lt;/h3&gt;

&lt;p&gt;Uma biblioteca sem documentação pode se tornar difícil de manter.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. É mantida?
&lt;/h3&gt;

&lt;p&gt;É interessante verificar se existem atualizações e manutenção ativa.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Possui comunidade?
&lt;/h3&gt;

&lt;p&gt;Uma comunidade maior pode facilitar a busca por exemplos e soluções.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. Possui problemas de segurança conhecidos?
&lt;/h3&gt;

&lt;p&gt;Dependências também podem possuir vulnerabilidades.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. Ela é compatível com meu projeto?
&lt;/h3&gt;

&lt;p&gt;Uma biblioteca pode exigir uma versão específica do Node.js, Angular, React ou outra tecnologia.&lt;/p&gt;




&lt;h1&gt;
  
  
  31. Biblioteca também tem versão
&lt;/h1&gt;

&lt;p&gt;Imagine:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Biblioteca v1
Biblioteca v2
Biblioteca v3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Uma atualização pode trazer:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;novas funcionalidades;&lt;/li&gt;
&lt;li&gt;correções;&lt;/li&gt;
&lt;li&gt;melhorias de desempenho;&lt;/li&gt;
&lt;li&gt;correções de segurança;&lt;/li&gt;
&lt;li&gt;mudanças na API.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Mas também pode alterar comportamentos existentes.&lt;/p&gt;

&lt;p&gt;Por isso, atualizar dependências sem analisar o impacto pode causar problemas.&lt;/p&gt;




&lt;h1&gt;
  
  
  32. O famoso "funciona na minha máquina"
&lt;/h1&gt;

&lt;p&gt;Imagine:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Computador A
    |
    v
Biblioteca versão 1.5
    |
    v
Funcionou!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Enquanto:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Computador B
    |
    v
Biblioteca versão 2.0
    |
    v
Erro!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Esse tipo de situação mostra por que o gerenciamento de dependências é importante.&lt;/p&gt;

&lt;p&gt;O &lt;code&gt;package.json&lt;/code&gt;, o lockfile e ferramentas como npm ajudam a manter o ambiente mais previsível.&lt;/p&gt;




&lt;h1&gt;
  
  
  33. Biblioteca não elimina a necessidade de entender programação
&lt;/h1&gt;

&lt;p&gt;Esse é um ponto que considero especialmente importante para iniciantes.&lt;/p&gt;

&lt;p&gt;Imagine que você use uma biblioteca para fazer uma requisição:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/users&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;É possível utilizar isso sem entender profundamente HTTP.&lt;/p&gt;

&lt;p&gt;Mas, quando surgir um erro:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;404
500
401
403
CORS
Timeout
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;ter conhecimento sobre HTTP fará muita diferença.&lt;/p&gt;

&lt;p&gt;Por isso:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Bibliotecas ajudam a escrever software, mas não substituem os fundamentos da programação.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Quanto mais você entende os fundamentos, melhor consegue utilizar as ferramentas.&lt;/p&gt;




&lt;h1&gt;
  
  
  34. Um exemplo completo
&lt;/h1&gt;

&lt;p&gt;Vamos criar um pequeno projeto.&lt;/p&gt;

&lt;p&gt;Imagine que queremos consultar usuários.&lt;/p&gt;

&lt;p&gt;Sem biblioteca:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://api.exemplo.com/users&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Agora podemos utilizar uma biblioteca especializada:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;axios&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;axios&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://api.exemplo.com/users&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O código fica diferente, mas o conceito permanece:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Nosso código
     |
     v
Biblioteca
     |
     v
Requisição HTTP
     |
     v
Servidor
     |
     v
Resposta
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A biblioteca funciona como uma camada que facilita determinada tarefa.&lt;/p&gt;




&lt;h1&gt;
  
  
  35. O que acontece por baixo dos panos?
&lt;/h1&gt;

&lt;p&gt;Quando utilizamos uma biblioteca, nosso código não deixa de ser executado.&lt;/p&gt;

&lt;p&gt;Imagine:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/users&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Internamente, a biblioteca possui diversas funções e regras para transformar essa chamada em algo que o ambiente consiga executar.&lt;/p&gt;

&lt;p&gt;Podemos simplificar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;axios.get()
    |
    v
Biblioteca
    |
    v
Preparação da requisição
    |
    v
HTTP
    |
    v
Servidor
    |
    v
Resposta
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A biblioteca esconde parte da complexidade.&lt;/p&gt;

&lt;p&gt;Isso é uma das grandes vantagens da abstração.&lt;/p&gt;




&lt;h1&gt;
  
  
  36. Biblioteca é uma forma de abstração
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Abstração&lt;/strong&gt; significa esconder detalhes desnecessários para facilitar o uso de algo.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;resposta&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Você não precisa escrever manualmente toda a implementação necessária para:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;abrir a conexão;&lt;/li&gt;
&lt;li&gt;montar headers;&lt;/li&gt;
&lt;li&gt;tratar a resposta;&lt;/li&gt;
&lt;li&gt;converter dados;&lt;/li&gt;
&lt;li&gt;lidar com vários detalhes da requisição.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A biblioteca fornece uma interface mais simples.&lt;/p&gt;

&lt;p&gt;Podemos pensar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Complexidade interna
████████████████████████

          ↓

Interface simples

axios.get(url)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Uma boa biblioteca transforma uma tarefa complexa em uma interface que podemos utilizar de maneira mais simples.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  37. O que aprendemos?
&lt;/h1&gt;

&lt;p&gt;Depois de tudo isso, podemos resumir:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Biblioteca (Lib)&lt;/strong&gt; é um conjunto de código reutilizável criado para fornecer funcionalidades que podem ser utilizadas por outras aplicações.&lt;/p&gt;

&lt;p&gt;Ela pode ajudar a:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;economizar tempo;&lt;/li&gt;
&lt;li&gt;reutilizar código;&lt;/li&gt;
&lt;li&gt;reduzir trabalho repetitivo;&lt;/li&gt;
&lt;li&gt;abstrair complexidade;&lt;/li&gt;
&lt;li&gt;padronizar soluções;&lt;/li&gt;
&lt;li&gt;acelerar o desenvolvimento.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Mas também precisamos considerar:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;manutenção;&lt;/li&gt;
&lt;li&gt;segurança;&lt;/li&gt;
&lt;li&gt;versões;&lt;/li&gt;
&lt;li&gt;tamanho;&lt;/li&gt;
&lt;li&gt;dependências;&lt;/li&gt;
&lt;li&gt;documentação;&lt;/li&gt;
&lt;li&gt;compatibilidade.&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  38. Biblioteca em uma única imagem mental
&lt;/h1&gt;

&lt;p&gt;Se você lembrar apenas de uma coisa deste artigo, lembre disso:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;              NOSSO PROJETO
                    |
                    v
          +-------------------+
          |       LIB         |
          |                   |
          |  Código pronto    |
          |  Funções          |
          |  Utilidades       |
          |  Abstrações       |
          +-------------------+
                    |
                    v
            Resultado desejado
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Nós não precisamos reinventar tudo.&lt;/p&gt;

&lt;p&gt;Podemos aproveitar soluções existentes e concentrar nosso esforço naquilo que realmente torna nossa aplicação única.&lt;/p&gt;




&lt;h1&gt;
  
  
  Conclusão
&lt;/h1&gt;

&lt;p&gt;No início da programação, é comum pensar que ser um bom programador significa saber escrever absolutamente tudo sozinho.&lt;/p&gt;

&lt;p&gt;Na prática, desenvolvimento de software é muito mais sobre &lt;strong&gt;saber resolver problemas&lt;/strong&gt; do que sobre escrever cada linha do zero.&lt;/p&gt;

&lt;p&gt;Bibliotecas fazem parte dessa realidade.&lt;/p&gt;

&lt;p&gt;Quando precisamos trabalhar com datas, requisições HTTP, validação, gráficos, testes ou diversas outras tarefas, podemos utilizar soluções que já foram desenvolvidas e disponibilizadas para reutilização.&lt;/p&gt;

&lt;p&gt;Mas existe uma diferença importante entre:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Eu instalei uma biblioteca."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;e&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Eu entendo por que estou utilizando essa biblioteca."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A segunda situação é muito mais importante.&lt;/p&gt;

&lt;p&gt;Uma biblioteca não substitui o conhecimento do programador. Ela é uma ferramenta.&lt;/p&gt;

&lt;p&gt;E quanto melhor entendemos programação, mais capazes somos de escolher as ferramentas certas.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Problema
   |
   v
Preciso implementar uma solução?
   |
   +---- Sim ----&amp;gt; Código próprio
   |
   +---- Existe uma boa solução?
                    |
                    v
                Biblioteca
                    |
                    v
              Nosso projeto
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No final, a ideia é simples:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Uma biblioteca é código reutilizável que podemos incorporar ao nosso projeto para resolver problemas sem precisar reinventar a roda.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;E talvez essa seja uma das maiores ideias por trás do desenvolvimento moderno:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;não precisamos construir tudo sozinhos — precisamos saber como combinar as peças certas.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Para continuar estudando
&lt;/h2&gt;

&lt;p&gt;Depois de entender bibliotecas, alguns conceitos fazem bastante sentido como próximos passos:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;O que é um pacote?&lt;/li&gt;
&lt;li&gt;O que é npm?&lt;/li&gt;
&lt;li&gt;O que é &lt;code&gt;package.json&lt;/code&gt;?&lt;/li&gt;
&lt;li&gt;O que é &lt;code&gt;node_modules&lt;/code&gt;?&lt;/li&gt;
&lt;li&gt;O que é uma dependência?&lt;/li&gt;
&lt;li&gt;O que são dependências transitivas?&lt;/li&gt;
&lt;li&gt;O que é um framework?&lt;/li&gt;
&lt;li&gt;O que é uma API?&lt;/li&gt;
&lt;li&gt;O que é SDK?&lt;/li&gt;
&lt;li&gt;O que é gerenciamento de versões?&lt;/li&gt;
&lt;li&gt;O que é Semantic Versioning (SemVer)?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Esses conceitos estão diretamente relacionados e ajudam a entender melhor como os projetos modernos são construídos.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>javascript</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Load Balancer (balanceador de carga) Como funciona?</title>
      <dc:creator>pcgustavo7</dc:creator>
      <pubDate>Wed, 23 Sep 2026 20:58:28 +0000</pubDate>
      <link>https://dev.to/pcgustavo7/load-balancer-balanceador-de-carga-3jmj</link>
      <guid>https://dev.to/pcgustavo7/load-balancer-balanceador-de-carga-3jmj</guid>
      <description>&lt;h1&gt;
  
  
  Load Balancer (Balanceador de Carga)
&lt;/h1&gt;

&lt;p&gt;Um &lt;strong&gt;Load Balancer (balanceador de carga)&lt;/strong&gt; é um distribuidor de tráfego. Ele recebe as requisições de entrada dos usuários e as divide entre vários servidores.&lt;/p&gt;

&lt;p&gt;Isso evita que uma única máquina fique sobrecarregada, ajudando a manter o sistema &lt;strong&gt;rápido, estável e disponível&lt;/strong&gt;, mesmo quando muitas pessoas estão acessando ao mesmo tempo.&lt;/p&gt;

&lt;h3&gt;
  
  
  Como funciona?
&lt;/h3&gt;

&lt;p&gt;De forma simples, podemos imaginar o funcionamento assim:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;              👤 Usuário
                  │
                  ▼
          ┌─────────────────┐
          │  Load Balancer  │
          └────────┬────────┘
                   │
          ┌────────┼────────┐
          ▼        ▼        ▼
      🖥️ Servidor 🖥️ Servidor 🖥️ Servidor
           1          2          3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O &lt;strong&gt;Load Balancer recebe a requisição&lt;/strong&gt; e decide para qual servidor ela será encaminhada.&lt;/p&gt;

&lt;p&gt;Por exemplo, se três usuários acessarem um site ao mesmo tempo, ele pode distribuir as requisições entre os três servidores:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Usuário 1 ──► Load Balancer ──► Servidor 1
Usuário 2 ──► Load Balancer ──► Servidor 2
Usuário 3 ──► Load Balancer ──► Servidor 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Dessa forma, o trabalho não fica concentrado em apenas uma máquina.&lt;/p&gt;

&lt;h3&gt;
  
  
  E se um servidor estiver com problema?
&lt;/h3&gt;

&lt;p&gt;O Load Balancer também pode verificar se os servidores estão funcionando. Se um deles estiver indisponível, ele pode deixar de enviar novas requisições para aquela máquina.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                 Load Balancer
                      │
             ┌────────┼────────┐
             ▼        ▼        ▼
          🟢 Server  🟢 Server  🔴 Server
              1          2          3
                                  ↓
                            Não recebe
                            novas requisições
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso ajuda a evitar que o usuário seja direcionado para um servidor que está fora do ar.&lt;/p&gt;

&lt;h3&gt;
  
  
  Por que ele é importante?
&lt;/h3&gt;

&lt;p&gt;O Load Balancer é muito utilizado em aplicações que possuem &lt;strong&gt;muitos acessos&lt;/strong&gt; ou precisam de maior estabilidade.&lt;/p&gt;

&lt;p&gt;Sem um balanceador:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1000 usuários
      │
      ▼
🖥️ Um único servidor
      ↓
   Sobrecarga
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Com um Load Balancer:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1000 usuários
      │
      ▼
⚖️ Load Balancer
   │    │    │
   ▼    ▼    ▼
 🖥️   🖥️   🖥️
Serv. Serv. Serv.
  1     2     3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Assim, a carga de trabalho pode ser distribuída entre diferentes servidores.&lt;/p&gt;

&lt;h3&gt;
  
  
  Resumindo
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Load Balancer é um componente que distribui as requisições entre vários servidores, evitando sobrecarga e ajudando a manter uma aplicação disponível e estável.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Ele funciona como um &lt;strong&gt;"organizador de tráfego"&lt;/strong&gt;, recebendo as requisições dos usuários e encaminhando cada uma para um servidor disponível.&lt;/p&gt;

&lt;h3&gt;
  
  
  Exemplo do dia a dia 🍔
&lt;/h3&gt;

&lt;p&gt;Imagine um restaurante com três atendentes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👥👥👥👥👥👥
     │
     ▼
👨‍💼 Organizador
     │
 ┌───┼───┐
 ▼   ▼   ▼
👨   👨   👨
At.  At.  At.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O organizador distribui os clientes entre os atendentes para evitar que apenas uma pessoa fique responsável por todos.&lt;/p&gt;

&lt;p&gt;No sistema, o &lt;strong&gt;organizador seria o Load Balancer&lt;/strong&gt; e os &lt;strong&gt;atendentes seriam os servidores&lt;/strong&gt;.&lt;/p&gt;

</description>
      <category>architecture</category>
      <category>devops</category>
      <category>infrastructure</category>
      <category>networking</category>
    </item>
    <item>
      <title>MockServer: o dublê da sua aplicação</title>
      <dc:creator>pcgustavo7</dc:creator>
      <pubDate>Wed, 23 Sep 2026 20:52:22 +0000</pubDate>
      <link>https://dev.to/pcgustavo7/mockserver-555j</link>
      <guid>https://dev.to/pcgustavo7/mockserver-555j</guid>
      <description>&lt;h1&gt;
  
  
  MockServer: o dublê da sua aplicação
&lt;/h1&gt;

&lt;p&gt;O &lt;strong&gt;MockServer&lt;/strong&gt; funciona como um "dublê" para sistemas que ainda não existem, estão fora do ar ou que você não quer utilizar durante os testes.&lt;/p&gt;

&lt;p&gt;Quando um programa precisa conversar com outro sistema, como uma &lt;strong&gt;API de pagamento&lt;/strong&gt;, um serviço de login ou uma API externa, normalmente ele precisa enviar requisições e receber respostas.&lt;/p&gt;

&lt;p&gt;O problema é que, durante o desenvolvimento, depender do sistema real pode ser complicado. Ele pode estar &lt;strong&gt;fora do ar, ser lento, cobrar por cada requisição ou ainda não estar pronto&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;É aí que entra o MockServer.&lt;/p&gt;

&lt;h3&gt;
  
  
  Como funciona?
&lt;/h3&gt;

&lt;p&gt;O MockServer fica no lugar do sistema real e &lt;strong&gt;simula seu comportamento&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Podemos imaginar assim:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;          Sem MockServer

👨‍💻 Aplicação ───────► 🌐 API Real
                            │
                            ▼
                       💳 Pagamento
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Durante os testes, podemos substituir a API real por um MockServer:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;          Com MockServer

👨‍💻 Aplicação ───────► 🧪 MockServer
                            │
                            ▼
                    Resposta simulada
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A aplicação acredita que está conversando com o serviço normalmente, mas, na realidade, está recebendo uma &lt;strong&gt;resposta criada para o teste&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Um exemplo simples
&lt;/h3&gt;

&lt;p&gt;Imagine que estamos desenvolvendo um sistema que consulta informações de um usuário:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👨‍💻 Aplicação
     │
     │ "Qual o nome do usuário 10?"
     ▼
🧪 MockServer
     │
     │ "João, 20 anos"
     ▼
👨‍💻 Aplicação
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O MockServer pode ser configurado para devolver uma resposta específica sempre que receber determinada requisição.&lt;/p&gt;

&lt;p&gt;Assim, podemos testar se nossa aplicação sabe &lt;strong&gt;interpretar e utilizar corretamente aquela resposta&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  E se a API estiver fora do ar?
&lt;/h3&gt;

&lt;p&gt;Essa é uma das situações em que um MockServer pode ser muito útil.&lt;/p&gt;

&lt;p&gt;Imagine que sua aplicação depende de uma API de pagamentos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👨‍💻 Seu sistema
      │
      ▼
💳 API de pagamento
      │
      ❌ Fora do ar
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Em vez de ficar esperando a API voltar, podemos utilizar um MockServer:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👨‍💻 Seu sistema
      │
      ▼
🧪 MockServer
      │
      ▼
✅ "Pagamento aprovado"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Dessa forma, conseguimos continuar desenvolvendo e testando nossa aplicação.&lt;/p&gt;

&lt;h3&gt;
  
  
  Por que utilizar?
&lt;/h3&gt;

&lt;p&gt;O MockServer pode ajudar a:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🧪 &lt;strong&gt;Testar funcionalidades&lt;/strong&gt; sem depender do sistema real.&lt;/li&gt;
&lt;li&gt;⚡ &lt;strong&gt;Acelerar o desenvolvimento&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;💰 Evitar custos de chamadas em serviços pagos.&lt;/li&gt;
&lt;li&gt;🔌 Testar aplicações que dependem de APIs externas.&lt;/li&gt;
&lt;li&gt;❌ Simular situações de erro, como uma API fora do ar.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Por exemplo, podemos criar diferentes respostas:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Requisição → MockServer

✅ 200 → Usuário encontrado
❌ 404 → Usuário não encontrado
⚠️ 500 → Erro no servidor
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso permite testar como nossa aplicação reage a diferentes situações.&lt;/p&gt;

&lt;h3&gt;
  
  
  Resumindo
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;MockServer é uma ferramenta utilizada para simular sistemas e APIs durante o desenvolvimento e os testes.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Ele funciona como um &lt;strong&gt;"dublê" do sistema real&lt;/strong&gt;, recebendo requisições e devolvendo respostas simuladas.&lt;/p&gt;

&lt;p&gt;Assim, o desenvolvedor consegue testar sua aplicação sem precisar depender o tempo todo de serviços externos.&lt;/p&gt;

&lt;h3&gt;
  
  
  Exemplo do dia a dia 🎬
&lt;/h3&gt;

&lt;p&gt;Em um filme, quando uma cena é perigosa, muitas vezes um &lt;strong&gt;dublê&lt;/strong&gt; substitui o ator para realizar aquela parte.&lt;/p&gt;

&lt;p&gt;No desenvolvimento de software, o MockServer faz algo parecido:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🎬 Filme
Ator ─────► Dublê

💻 Software
Aplicação ─► MockServer
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O dublê não é o ator real, mas consegue representar aquela situação para que a cena aconteça.&lt;/p&gt;

&lt;p&gt;Da mesma forma, o MockServer &lt;strong&gt;não é a API real&lt;/strong&gt;, mas consegue simular seu comportamento para que possamos testar nossa aplicação.&lt;/p&gt;

</description>
      <category>backend</category>
      <category>softwaredevelopment</category>
      <category>testing</category>
      <category>tools</category>
    </item>
    <item>
      <title>Redis: o bloco de notas rápido da sua aplicação</title>
      <dc:creator>pcgustavo7</dc:creator>
      <pubDate>Wed, 23 Sep 2026 20:45:30 +0000</pubDate>
      <link>https://dev.to/pcgustavo7/redis-16hb</link>
      <guid>https://dev.to/pcgustavo7/redis-16hb</guid>
      <description>&lt;p&gt;O &lt;strong&gt;Redis&lt;/strong&gt; pode ser comparado a um bloco de notas que fica na sua mesa, em vez de uma informação guardada em um arquivo no porão.&lt;/p&gt;

&lt;p&gt;Em uma aplicação, os dados normalmente ficam armazenados em um &lt;strong&gt;banco de dados&lt;/strong&gt;. Esses dados são persistidos para que possam ser recuperados posteriormente.&lt;/p&gt;

&lt;p&gt;O problema é que algumas informações são acessadas &lt;strong&gt;muitas vezes&lt;/strong&gt;. Fazer a mesma consulta ao banco de dados repetidamente pode deixar o sistema mais lento.&lt;/p&gt;

&lt;p&gt;É aí que o Redis pode ajudar.&lt;/p&gt;

&lt;h3&gt;
  
  
  Como funciona?
&lt;/h3&gt;

&lt;p&gt;O Redis armazena informações diretamente na &lt;strong&gt;memória RAM&lt;/strong&gt;, que é muito mais rápida para acessar dados do que o armazenamento em disco.&lt;/p&gt;

&lt;p&gt;Podemos imaginar assim:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="rds001"&lt;br&gt;
          Sem Redis&lt;/p&gt;

&lt;p&gt;👨‍💻 Usuário&lt;br&gt;
     │&lt;br&gt;
     ▼&lt;br&gt;
🌐 Aplicação&lt;br&gt;
     │&lt;br&gt;
     ▼&lt;br&gt;
🗄️ Banco de Dados&lt;br&gt;
     │&lt;br&gt;
     ▼&lt;br&gt;
📦 Informação&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Sempre que a aplicação precisa daquela informação, ela precisa consultar o banco.

Com Redis:



```text id="rds002"
          Com Redis

👨‍💻 Usuário
     │
     ▼
🌐 Aplicação
     │
     ▼
⚡ Redis
     │
     ▼
📦 Informação
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Como a informação já está disponível na memória, a aplicação consegue recuperá-la rapidamente.&lt;/p&gt;
&lt;h3&gt;
  
  
  Um exemplo simples
&lt;/h3&gt;

&lt;p&gt;Imagine um site onde milhares de usuários acessam uma mesma informação:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👥 Usuários
 👤 👤 👤 👤
       │
       ▼
   🌐 Aplicação
       │
       ▼
    ⚡ Redis
       │
       ▼
 "Informação mais acessada"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Em vez de consultar o banco de dados toda vez, o sistema pode guardar temporariamente essa informação no Redis.&lt;/p&gt;

&lt;p&gt;Isso reduz a quantidade de consultas ao banco e pode deixar a aplicação mais rápida.&lt;/p&gt;

&lt;h3&gt;
  
  
  Onde o Redis pode ser utilizado?
&lt;/h3&gt;

&lt;p&gt;O Redis é muito utilizado para armazenar &lt;strong&gt;dados temporários ou que precisam ser acessados rapidamente&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🔐 Sessão de login
🛒 Carrinho de compras
👁️ Contadores de visualizações
⚡ Dados acessados frequentemente
⏱️ Informações temporárias
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Imagine um carrinho de compras:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👨‍💻 Usuário adiciona produto
          │
          ▼
      ⚡ Redis
          │
          ▼
🛒 "2 produtos no carrinho"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Quando o usuário acessa o carrinho novamente, a aplicação pode recuperar essa informação rapidamente.&lt;/p&gt;

&lt;h3&gt;
  
  
  Redis substitui o banco de dados?
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Não necessariamente.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Redis e bancos de dados tradicionais podem trabalhar juntos.&lt;/p&gt;

&lt;p&gt;Uma arquitetura simples poderia ser:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                 🌐 Aplicação
                     │
             ┌───────┴───────┐
             ▼               ▼
         ⚡ Redis        🗄️ Banco
        (rápido)        (principal)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O banco de dados continua armazenando as informações principais, enquanto o Redis pode guardar temporariamente os dados que precisam ser acessados com frequência.&lt;/p&gt;

&lt;h3&gt;
  
  
  Por que ele é rápido?
&lt;/h3&gt;

&lt;p&gt;A principal diferença está em onde os dados são armazenados.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🗄️ Banco tradicional
      │
      ▼
💾 Armazenamento em disco

⚡ Redis
      │
      ▼
🧠 Memória RAM
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A RAM permite acessar os dados muito rapidamente, tornando o Redis útil quando uma aplicação precisa responder muitas requisições em pouco tempo.&lt;/p&gt;

&lt;h3&gt;
  
  
  Resumindo
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Redis é um sistema de armazenamento em memória usado para acessar dados rapidamente, sendo muito utilizado como cache e para informações temporárias.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Ele funciona como um &lt;strong&gt;"bloco de notas na mesa"&lt;/strong&gt;: em vez de procurar uma informação toda vez no arquivo guardado no porão, você deixa aquilo que usa com frequência em um lugar muito mais fácil de acessar.&lt;/p&gt;

&lt;h3&gt;
  
  
  Exemplo do dia a dia 📝
&lt;/h3&gt;

&lt;p&gt;Imagine que você trabalha em um escritório e consulta constantemente um determinado número:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;📁 Arquivo no armário
       ↓
   Procurar informação
       ↓
     Encontrou!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Seria muito mais prático anotar esse número em um bloco de notas na sua mesa:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;📝 Bloco de notas
       ↓
   Informação
       ↓
    Acesso rápido ⚡
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O Redis funciona de maneira parecida: ele mantém determinados dados disponíveis na &lt;strong&gt;memória&lt;/strong&gt;, permitindo que a aplicação os encontre rapidamente.&lt;/p&gt;

&lt;h3&gt;
  
  
  Para lembrar
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Redis = memória rápida + dados temporários/cache + respostas mais rápidas.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>database</category>
      <category>javascript</category>
      <category>performance</category>
      <category>redis</category>
    </item>
    <item>
      <title>Keycloak: a portaria central das aplicações</title>
      <dc:creator>pcgustavo7</dc:creator>
      <pubDate>Wed, 23 Sep 2026 20:45:10 +0000</pubDate>
      <link>https://dev.to/pcgustavo7/keycloack-2m6i</link>
      <guid>https://dev.to/pcgustavo7/keycloack-2m6i</guid>
      <description>&lt;p&gt;O &lt;strong&gt;Keycloak&lt;/strong&gt; pode ser comparado à &lt;strong&gt;portaria central de vários prédios&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Em vez de cada aplicação ter seu próprio sistema de login, senha e recuperação de conta, podemos utilizar o Keycloak para centralizar essa responsabilidade.&lt;/p&gt;

&lt;p&gt;O usuário faz login uma vez e recebe um &lt;strong&gt;token&lt;/strong&gt;, que funciona como um "crachá digital". Esse token permite que ele acesse outras aplicações que estão conectadas ao Keycloak sem precisar digitar a senha novamente.&lt;/p&gt;

&lt;h3&gt;
  
  
  Como funciona?
&lt;/h3&gt;

&lt;p&gt;Sem um sistema centralizado, cada aplicação poderia ter seu próprio login:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="kc001"&lt;br&gt;
👤 Usuário&lt;br&gt;
   │&lt;br&gt;
   ├──► 🌐 Sistema 1&lt;br&gt;
   │       🔑 Login&lt;br&gt;
   │&lt;br&gt;
   ├──► 🌐 Sistema 2&lt;br&gt;
   │       🔑 Login&lt;br&gt;
   │&lt;br&gt;
   └──► 🌐 Sistema 3&lt;br&gt;
           🔑 Login&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Isso significa que o usuário pode precisar fazer login várias vezes.

Com o Keycloak:



```text id="kc002"
             👤 Usuário
                  │
                  ▼
             🔐 Keycloak
             (Login)
                  │
                  ▼
             🎫 Token
             /       \
            ▼         ▼
       🌐 Sistema 1  🌐 Sistema 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;O usuário se autentica no Keycloak e, depois disso, o token pode ser utilizado para acessar os sistemas conectados.&lt;/p&gt;
&lt;h3&gt;
  
  
  O que é esse "token"?
&lt;/h3&gt;

&lt;p&gt;O &lt;strong&gt;token&lt;/strong&gt; é uma informação digital que representa que o usuário foi autenticado.&lt;/p&gt;

&lt;p&gt;Podemos imaginar como um crachá:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="kc003"&lt;br&gt;
        🔐 Login&lt;br&gt;
           │&lt;br&gt;
           ▼&lt;br&gt;
     ┌─────────────┐&lt;br&gt;
     │ 🎫 CRACHÁ   │&lt;br&gt;
     │   DIGITAL   │&lt;br&gt;
     └─────────────┘&lt;br&gt;
           │&lt;br&gt;
      ┌────┴────┐&lt;br&gt;
      ▼         ▼&lt;br&gt;
   🌐 Sistema 1  🌐 Sistema 2&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Em vez de entregar sua senha para cada sistema, o usuário apresenta esse "crachá digital".

&amp;gt; **Importante:** o token não é simplesmente a senha do usuário. Ele é utilizado para informar aos sistemas que aquele usuário já foi autenticado.

### Um exemplo simples

Imagine uma empresa que possui três sistemas:



```text
🏢 Empresa

🌐 Sistema de Vendas
🌐 Sistema Financeiro
🌐 Sistema de RH
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Sem Keycloak, cada sistema poderia possuir seu próprio login.&lt;/p&gt;

&lt;p&gt;Com Keycloak:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                 👤 Funcionário
                       │
                       ▼
                  🔐 Keycloak
                       │
                       ▼
                    🎫 Token
                  /     |     \
                 ▼      ▼      ▼
              Vendas Financeiro RH
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O funcionário realiza o login no Keycloak e pode acessar os sistemas autorizados.&lt;/p&gt;

&lt;h3&gt;
  
  
  Além do login
&lt;/h3&gt;

&lt;p&gt;O Keycloak também oferece recursos relacionados à autenticação, como:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🔐 Login
🔄 Recuperação de senha
🎫 Tokens
👤 Gerenciamento de usuários
🌐 Login com Google
🌐 Login com outras contas
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso evita que o desenvolvedor precise criar todos esses recursos do zero.&lt;/p&gt;

&lt;h3&gt;
  
  
  Keycloak controla o que o usuário pode acessar?
&lt;/h3&gt;

&lt;p&gt;Ele pode participar desse processo através de &lt;strong&gt;permissões e funções (roles)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👤 João
   │
   ├── 🎫 Funcionário
   │       └── Acesso ao sistema de vendas
   │
   └── 🔑 Administrador
           └── Acesso ao painel administrativo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Assim, diferentes usuários podem ter diferentes níveis de acesso dentro das aplicações.&lt;/p&gt;

&lt;h3&gt;
  
  
  Resumindo
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Keycloak é uma solução que centraliza a autenticação e o gerenciamento de acesso de usuários em diferentes aplicações.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Ele funciona como uma &lt;strong&gt;portaria central&lt;/strong&gt;: o usuário se identifica uma vez, recebe seu "crachá digital" e pode utilizá-lo para acessar os sistemas que estão conectados e autorizados.&lt;/p&gt;

&lt;h3&gt;
  
  
  Exemplo do dia a dia 🏢
&lt;/h3&gt;

&lt;p&gt;Imagine um condomínio com vários prédios.&lt;/p&gt;

&lt;p&gt;Em vez de cada prédio fazer um cadastro completamente diferente, existe uma &lt;strong&gt;portaria central&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;              👤 Pessoa
                 │
                 ▼
          🏢 Portaria Central
             🔐 Identificação
                 │
                 ▼
             🎫 Crachá
            /    |    \
           ▼     ▼     ▼
         🏢 A   🏢 B   🏢 C
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No mundo do software:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👤 Usuário
    │
    ▼
🔐 Keycloak
    │
    ▼
🎫 Token
    │
 ┌──┼──┐
 ▼  ▼  ▼
🌐 🌐 🌐
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A &lt;strong&gt;portaria é o Keycloak&lt;/strong&gt;, o &lt;strong&gt;crachá é o token&lt;/strong&gt; e os &lt;strong&gt;prédios são as aplicações&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Para lembrar
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Keycloak = autenticação centralizada + usuários + tokens + controle de acesso.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>architecture</category>
      <category>authentication</category>
      <category>security</category>
    </item>
    <item>
      <title>JWT: a pulseira de acesso da sua aplicação</title>
      <dc:creator>pcgustavo7</dc:creator>
      <pubDate>Wed, 23 Sep 2026 20:38:08 +0000</pubDate>
      <link>https://dev.to/pcgustavo7/jwt-9e1</link>
      <guid>https://dev.to/pcgustavo7/jwt-9e1</guid>
      <description>&lt;p&gt;Um &lt;strong&gt;JWT (JSON Web Token)&lt;/strong&gt; funciona de maneira parecida com uma &lt;strong&gt;pulseira de acesso em um resort&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Quando você chega ao resort e apresenta seus documentos na recepção, o hotel confirma sua identidade. No mundo digital, isso seria o momento em que você faz &lt;strong&gt;login com usuário e senha&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Depois de confirmar sua identidade, o hotel coloca uma pulseira no seu braço.&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="jwt001"&lt;br&gt;
👤 Usuário&lt;br&gt;
    │&lt;br&gt;
    │ Login + senha&lt;br&gt;
    ▼&lt;br&gt;
🔐 Sistema&lt;br&gt;
    │&lt;br&gt;
    │ Identidade confirmada&lt;br&gt;
    ▼&lt;br&gt;
🎫 JWT&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


A partir desse momento, você não precisa apresentar seus documentos toda vez que quiser utilizar algum serviço do resort.

### Como funciona?

Imagine que você queira entrar no restaurante:



```text id="jwt002"
👤 Você
  │
  ▼
🍽️ Restaurante
  │
  ▼
🎫 "Possui pulseira?"
  │
  ├── ✅ Sim → Entrada permitida
  │
  └── ❌ Não → Acesso negado
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;No mundo digital, acontece algo parecido:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="jwt003"&lt;br&gt;
👨‍💻 Usuário&lt;br&gt;
     │&lt;br&gt;
     ▼&lt;br&gt;
🌐 Aplicação&lt;br&gt;
     │&lt;br&gt;
     ▼&lt;br&gt;
🎫 JWT&lt;br&gt;
     │&lt;br&gt;
     ▼&lt;br&gt;
🔐 Verifica o token&lt;br&gt;
     │&lt;br&gt;
     ├── ✅ Válido → Acesso permitido&lt;br&gt;
     │&lt;br&gt;
     └── ❌ Inválido → Acesso negado&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


O JWT acompanha as requisições feitas pelo usuário e permite que o sistema verifique se ele está autenticado.

### O que existe dentro de um JWT?

O token pode carregar informações sobre o usuário e sobre o acesso dele.

Por exemplo:



```text id="jwt004"
🎫 JWT

👤 Usuário: João
🔑 Função: Administrador
📅 Expiração: 30/09/2026
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Essas informações são chamadas de &lt;strong&gt;claims&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;É importante lembrar que um JWT &lt;strong&gt;não deve ser usado para guardar senhas ou informações secretas&lt;/strong&gt;. O token pode ser lido por quem o possui, então os dados armazenados nele devem ser escolhidos com cuidado.&lt;/p&gt;
&lt;h3&gt;
  
  
  Por que usar JWT?
&lt;/h3&gt;

&lt;p&gt;Uma das vantagens é que a aplicação pode verificar o token sem precisar consultar o banco de dados (lembrando que mesmo utilizando JWT, ainda sim a aplicação pode consultar o banco) a cada requisição.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="jwt005"&lt;br&gt;
Sem JWT&lt;/p&gt;

&lt;p&gt;👤 Usuário&lt;br&gt;
    │&lt;br&gt;
    ▼&lt;br&gt;
🌐 Sistema&lt;br&gt;
    │&lt;br&gt;
    ▼&lt;br&gt;
🗄️ Banco de Dados&lt;br&gt;
    │&lt;br&gt;
    ▼&lt;br&gt;
"Esse usuário está logado?"&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Com JWT:



```text id="jwt006"
Com JWT

👤 Usuário
    │
    ▼
🌐 Sistema
    │
    ▼
🎫 JWT
    │
    ▼
✅ Token válido
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Isso pode ajudar a tornar o processo de autenticação mais simples e eficiente.&lt;/p&gt;
&lt;h3&gt;
  
  
  JWT e permissões
&lt;/h3&gt;

&lt;p&gt;O JWT também pode carregar informações relacionadas às permissões do usuário.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="jwt007"&lt;br&gt;
🎫 JWT&lt;br&gt;
   │&lt;br&gt;
   ├── 👤 Usuário: João&lt;br&gt;
   └── 🔑 Função: Administrador&lt;br&gt;
                │&lt;br&gt;
                ▼&lt;br&gt;
        🛠️ Painel administrativo&lt;br&gt;
                │&lt;br&gt;
                ▼&lt;br&gt;
             ✅ Acesso&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


Enquanto outro usuário pode ter apenas acesso a funcionalidades comuns:



```text id="jwt008"
🎫 JWT
   │
   ├── 👤 Usuário: Maria
   └── 👤 Função: Usuário
                │
                ▼
        🛠️ Painel administrativo
                │
                ▼
             ❌ Acesso
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  JWT é a mesma coisa que login?
&lt;/h3&gt;

&lt;p&gt;Não exatamente.&lt;/p&gt;

&lt;p&gt;O &lt;strong&gt;login&lt;/strong&gt; é o processo de confirmar a identidade do usuário.&lt;/p&gt;

&lt;p&gt;O &lt;strong&gt;JWT é o token gerado após essa autenticação&lt;/strong&gt;, que pode ser utilizado para representar aquela sessão/autorização nas próximas requisições.&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;```text id="jwt009"&lt;br&gt;
🔐 Login&lt;br&gt;
   │&lt;br&gt;
   ▼&lt;br&gt;
✅ Identidade confirmada&lt;br&gt;
   │&lt;br&gt;
   ▼&lt;br&gt;
🎫 JWT&lt;br&gt;
   │&lt;br&gt;
   ▼&lt;br&gt;
🌐 Próximas requisições&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


### Resumindo

&amp;gt; **JWT é um token utilizado para transmitir informações de autenticação e autorização entre sistemas.**

Ele funciona como uma **pulseira de acesso**: depois que sua identidade é confirmada, você utiliza a pulseira para acessar os serviços permitidos sem precisar apresentar seus documentos novamente a cada momento.

### Exemplo do dia a dia 🏨

No resort:



```text
📄 Documento
     │
     ▼
🏨 Recepção
     │
     ▼
🎫 Pulseira
     │
 ┌───┼────┐
 ▼   ▼    ▼
🍹  🍽️   🏊
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;No software:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🔐 Login
    │
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>authentication</category>
      <category>backend</category>
      <category>security</category>
      <category>webdev</category>
    </item>
    <item>
      <title>API &amp; API REST: como sistemas conversam entre si</title>
      <dc:creator>pcgustavo7</dc:creator>
      <pubDate>Wed, 23 Sep 2026 20:22:40 +0000</pubDate>
      <link>https://dev.to/pcgustavo7/api-api-rest-1bnk</link>
      <guid>https://dev.to/pcgustavo7/api-api-rest-1bnk</guid>
      <description>&lt;h1&gt;
  
  
  API e API REST: como sistemas conversam entre si
&lt;/h1&gt;

&lt;h2&gt;
  
  
  O que é uma API?
&lt;/h2&gt;

&lt;p&gt;Uma &lt;strong&gt;API (Interface de Programação de Aplicações)&lt;/strong&gt; é uma ponte de comunicação que permite que diferentes sistemas de software &lt;strong&gt;conversem entre si&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Ela define regras sobre como um sistema pode &lt;strong&gt;solicitar informações ou realizar ações&lt;/strong&gt; em outro sistema.&lt;/p&gt;

&lt;p&gt;Podemos imaginar uma API como o &lt;strong&gt;garçom de um restaurante&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Você faz um pedido para o garçom, ele leva esse pedido até a cozinha e depois traz a resposta.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;       👤 Cliente
          │
          │ "Quero um hambúrguer"
          ▼
       🧑‍🍳 API
       (Garçom)
          │
          ▼
       🍳 Cozinha
       (Sistema)
          │
          ▼
       🍔 Resposta
          │
          ▼
       👤 Cliente
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Você não precisa saber como a cozinha prepara o hambúrguer. Você apenas precisa saber &lt;strong&gt;como fazer o pedido&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Com uma API acontece a mesma coisa:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🌐 Sistema A
     │
     │ Requisição
     ▼
🔌 API
     │
     ▼
💻 Sistema B
     │
     │ Resposta
     ▼
🌐 Sistema A
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A API funciona como uma &lt;strong&gt;interface entre os dois sistemas&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Um exemplo do dia a dia
&lt;/h2&gt;

&lt;p&gt;Imagine um aplicativo de previsão do tempo.&lt;/p&gt;

&lt;p&gt;O aplicativo precisa descobrir a temperatura atual, mas ele não possui todas essas informações sozinho.&lt;/p&gt;

&lt;p&gt;Então ele pode fazer uma requisição para uma API:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;📱 Aplicativo
     │
     │ "Qual a temperatura de hoje?"
     ▼
🌐 API de clima
     │
     ▼
🌡️ Dados do clima
     │
     ▼
📱 Aplicativo
     │
     ▼
"28°C ☀️"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O aplicativo não precisa saber como a API consegue essas informações. Ele apenas segue as regras definidas por ela.&lt;/p&gt;




&lt;h1&gt;
  
  
  E o que é uma API REST?
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;API REST&lt;/strong&gt; é uma forma muito comum de construir APIs utilizando as regras e recursos da própria internet, principalmente o protocolo &lt;strong&gt;HTTP&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Em uma API REST, os dados são tratados como &lt;strong&gt;recursos&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/clientes
/produtos
/pedidos
/usuarios
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Cada endereço representa um tipo de recurso que a API disponibiliza.&lt;/p&gt;




&lt;h2&gt;
  
  
  Os principais métodos HTTP
&lt;/h2&gt;

&lt;p&gt;Para interagir com esses recursos, uma API REST utiliza principalmente quatro métodos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;GET       → 📖 Consultar
POST      → ➕ Criar
PUT       → ✏️ Atualizar
DELETE    → 🗑️ Apagar
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Por exemplo, imagine uma API de clientes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;GET /clientes
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Significa:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Quero consultar os clientes."&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;POST /clientes
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Significa:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Quero cadastrar um novo cliente."&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;PUT /clientes/10
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Significa:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Quero atualizar o cliente de número 10."&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DELETE /clientes/10
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Significa:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Quero excluir o cliente de número 10."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Podemos visualizar assim:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                 API REST
                    │
       ┌────────────┼────────────┐
       ▼            ▼            ▼
    👥 Clientes   📦 Produtos   🛒 Pedidos
       │
       ├── GET     → Consultar
       ├── POST    → Criar
       ├── PUT     → Atualizar
       └── DELETE  → Apagar
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  O que significa "RESTful"?
&lt;/h2&gt;

&lt;p&gt;Uma das características importantes de uma API REST é o conceito de &lt;strong&gt;stateless&lt;/strong&gt;, ou seja, &lt;strong&gt;sem estado&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Isso significa que cada requisição deve trazer as informações necessárias para que o servidor consiga processá-la.&lt;/p&gt;

&lt;p&gt;Por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👤 Usuário
   │
   │ Requisição + informações necessárias
   ▼
🌐 API
   │
   ▼
✅ Processa
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A API não deve depender de uma informação que ficou "guardada" de uma requisição anterior para entender a próxima.&lt;/p&gt;




&lt;h2&gt;
  
  
  API x API REST
&lt;/h2&gt;

&lt;p&gt;É importante entender que &lt;strong&gt;API e API REST não são exatamente a mesma coisa&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;API&lt;/strong&gt; é um conceito mais amplo: é uma forma de permitir que sistemas se comuniquem.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;API REST&lt;/strong&gt; é uma maneira específica de construir uma API, utilizando princípios do REST e normalmente o HTTP.&lt;/p&gt;

&lt;p&gt;Podemos pensar assim:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🔌 API
   │
   ├── API REST
   ├── API SOAP
   └── Outras formas de API
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Resumindo
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;API é uma ponte que permite que diferentes sistemas se comuniquem seguindo determinadas regras.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;API REST é uma forma de construir essa comunicação utilizando os princípios do REST e os métodos HTTP, como GET, POST, PUT e DELETE.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Exemplo do dia a dia 🍽️
&lt;/h3&gt;

&lt;p&gt;No restaurante:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👤 Você
 │
 │ Pedido
 ▼
🧑‍🍳 Garçom
 │
 │ Pedido
 ▼
🍳 Cozinha
 │
 │ Resposta
 ▼
🧑‍🍳 Garçom
 │
 ▼
🍔 Você
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No software:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;💻 Sistema A
 │
 │ Requisição
 ▼
🔌 API REST
 │
 │ Requisição
 ▼
💻 Sistema B
 │
 │ Resposta
 ▼
🔌 API REST
 │
 ▼
💻 Sistema A
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O &lt;strong&gt;garçom representa a API&lt;/strong&gt;: ele faz a comunicação entre você e a cozinha sem que você precise conhecer o funcionamento interno dela.&lt;/p&gt;

&lt;h3&gt;
  
  
  Para lembrar
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;API = ponte de comunicação entre sistemas.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;REST = conjunto de princípios para construir APIs, geralmente utilizando HTTP.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GET = ler | POST = criar | PUT = atualizar | DELETE = apagar&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>api</category>
      <category>backend</category>
      <category>programming</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Redes de Computadores: como os dispositivos se comunicam</title>
      <dc:creator>pcgustavo7</dc:creator>
      <pubDate>Wed, 23 Sep 2026 20:21:40 +0000</pubDate>
      <link>https://dev.to/pcgustavo7/redes-de-computadores-4io0</link>
      <guid>https://dev.to/pcgustavo7/redes-de-computadores-4io0</guid>
      <description>&lt;h1&gt;
  
  
  Redes de Computadores: como os dispositivos se comunicam
&lt;/h1&gt;

&lt;p&gt;Uma &lt;strong&gt;rede de computadores&lt;/strong&gt; é um conjunto de dispositivos conectados entre si para &lt;strong&gt;trocar informações e compartilhar recursos&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Esses dispositivos podem ser computadores, celulares, servidores, impressoras, roteadores e vários outros equipamentos.&lt;/p&gt;

&lt;p&gt;Podemos imaginar uma rede como uma espécie de &lt;strong&gt;sistema de estradas&lt;/strong&gt;, onde os dados viajam de um dispositivo para outro.&lt;/p&gt;

&lt;h3&gt;
  
  
  Como funciona?
&lt;/h3&gt;

&lt;p&gt;Imagine dois computadores que precisam trocar uma informação:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;💻 Computador A
       │
       │ Dados
       ▼
   🌐 REDE
       │
       │ Dados
       ▼
💻 Computador B
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A rede permite que esses dispositivos consigam &lt;strong&gt;enviar e receber dados&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Em uma rede doméstica, por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;             🌐 Internet
                  │
                  ▼
             📡 Roteador
            /     |      \
           ▼      ▼       ▼
        💻 PC   📱 Celular  📺 TV
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O roteador ajuda a conectar os dispositivos e encaminhar os dados para o destino correto.&lt;/p&gt;

&lt;h3&gt;
  
  
  Redes podem ser pequenas ou grandes
&lt;/h3&gt;

&lt;p&gt;Uma rede não precisa ter milhares de computadores.&lt;/p&gt;

&lt;p&gt;Até mesmo os dispositivos da sua casa podem formar uma rede:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🏠 Rede doméstica

💻 Computador
      │
📱 Celular ── 📡 Roteador ── 🌐 Internet
      │
📺 Smart TV
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Já uma empresa pode possuir uma rede muito maior:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🏢 Empresa

💻 PC ──┐
💻 PC ──┤
💻 PC ──┼── 📡 Rede ── 🗄️ Servidor
💻 PC ──┤
🖨️ Impressora ─┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Assim, os computadores podem acessar servidores, compartilhar arquivos, utilizar impressoras e outros recursos.&lt;/p&gt;

&lt;h3&gt;
  
  
  Como os dados chegam ao lugar certo?
&lt;/h3&gt;

&lt;p&gt;Quando enviamos uma mensagem ou acessamos um site, os dados precisam encontrar o &lt;strong&gt;destino correto&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Para isso, as redes utilizam endereços, como o &lt;strong&gt;endereço IP&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Podemos imaginar o IP como o endereço de uma casa:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🏠 Casa
   │
   └── 📍 Endereço

💻 Computador
   │
   └── 📍 Endereço IP
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O endereço ajuda os dispositivos de rede a identificar para onde os dados devem ser enviados.&lt;/p&gt;

&lt;h3&gt;
  
  
  O que é um roteador?
&lt;/h3&gt;

&lt;p&gt;O &lt;strong&gt;roteador&lt;/strong&gt; é um equipamento muito importante nas redes.&lt;/p&gt;

&lt;p&gt;Ele recebe dados e ajuda a encaminhá-los para o destino correto.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;💻 PC
  │
  ▼
📡 Roteador
  │
  ├────► 📱 Celular
  │
  ├────► 🖨️ Impressora
  │
  └────► 🌐 Internet
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Por isso, podemos comparar o roteador a um &lt;strong&gt;organizador de trânsito&lt;/strong&gt;, que ajuda os dados a seguirem pelo caminho correto.&lt;/p&gt;

&lt;h3&gt;
  
  
  E a Internet?
&lt;/h3&gt;

&lt;p&gt;A &lt;strong&gt;Internet é uma enorme rede formada pela conexão de muitas outras redes&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Podemos simplificar assim:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🏠 Casa
  │
  ▼
📡 Roteador
  │
  ▼
🌐 Internet
  │
  ├────► 🖥️ Servidor
  ├────► 🌐 Site
  └────► ☁️ Serviço online
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Quando você acessa um site, seu dispositivo envia uma requisição pela rede até chegar ao servidor onde aquele site está hospedado.&lt;/p&gt;

&lt;h3&gt;
  
  
  Para que servem as redes?
&lt;/h3&gt;

&lt;p&gt;As redes permitem diversas atividades, como:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;📁 Compartilhar arquivos
🖨️ Compartilhar impressoras
💬 Trocar mensagens
🌐 Acessar sites
🎮 Jogar online
☁️ Utilizar serviços na nuvem
🗄️ Acessar servidores
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sem redes de computadores, dispositivos teriam muito mais dificuldade para trocar informações.&lt;/p&gt;

&lt;h3&gt;
  
  
  Resumindo
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Rede de computadores é um conjunto de dispositivos conectados para trocar informações e compartilhar recursos.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Ela pode ser pequena, como a rede Wi-Fi da sua casa, ou gigantesca, como a própria Internet.&lt;/p&gt;

&lt;h3&gt;
  
  
  Exemplo do dia a dia 🚗
&lt;/h3&gt;

&lt;p&gt;Imagine uma cidade:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🏠 Casa A ─── 🛣️ ─── 🏠 Casa B
      │
      └──── 🛣️ ─── 🏢 Empresa
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As estradas permitem que pessoas e veículos cheguem a diferentes lugares.&lt;/p&gt;

&lt;p&gt;Nas redes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;💻 PC ─── 🌐 Rede ─── 💻 PC
     │
     └──── 🌐 ─── 🗄️ Servidor
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A rede funciona como as &lt;strong&gt;estradas por onde os dados viajam&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Para lembrar
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Rede de computadores = dispositivos conectados + troca de dados + compartilhamento de recursos.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Roteador = encaminha os dados.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;IP = identifica um dispositivo na rede.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Internet = uma enorme rede de redes.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>computerscience</category>
      <category>networking</category>
    </item>
    <item>
      <title>Dicionário</title>
      <dc:creator>pcgustavo7</dc:creator>
      <pubDate>Wed, 23 Sep 2026 18:18:15 +0000</pubDate>
      <link>https://dev.to/pcgustavo7/dicionario-3fn6</link>
      <guid>https://dev.to/pcgustavo7/dicionario-3fn6</guid>
      <description>&lt;p&gt;&lt;strong&gt;&lt;em&gt;Palavras Difíceis&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Redes de computadores&lt;/strong&gt;&lt;br&gt;
Para que a comunicação funcione sem caos, existem regras de trânsito (protocolos como o&lt;br&gt;
TCP/IP) e agentes de trânsito (roteadores e switches) que decidem o melhor caminho para a&lt;br&gt;
informação não se perder. Em vez de enviar uma encomenda inteira, a rede divide tudo em&lt;br&gt;
pequenos pacotes que viajam sozinhos por caminhos diferentes e se juntam perfeitamente ao&lt;br&gt;
chegar no destino.&lt;br&gt;
Aprofundamento: O que é rede de computadores? | IBM&lt;br&gt;
Link:&lt;a href="https://www.ibm.com/br-pt/think/topics/networking" rel="noopener noreferrer"&gt;https://www.ibm.com/br-pt/think/topics/networking&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;APi&lt;/strong&gt;&lt;br&gt;
Uma API (Interface de Programação de Aplicações) é uma ponte de comunicação que permite&lt;br&gt;
que dois sistemas de software diferentes conversem entre si. Ela define um contrato com regr&lt;br&gt;
estritas sobre como um programa pode solicitar informações ou ações de outro.&lt;br&gt;
A analogia clássica é o garçom de um restaurante: você (sistema cliente) faz um pedido ao&lt;br&gt;
garçom (API). O garçom leva seu pedido à cozinha (sistema de destino), aguarda o processamento&lt;br&gt;
e traz a sua resposta. Você não precisa saber como a cozinha funciona por dentro, apenas utiliza&lt;br&gt;
o garçom para obter exatamente o que pediu.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Porque API REST?&lt;/em&gt;&lt;br&gt;
Uma API REST usa as regras nativas da internet (protocolo HTTP) para sistemas conversarem. Em&lt;br&gt;
vez de comandos complexos, ela trata tudo como recursos (ex: /clientes). Para interagir, você usa&lt;br&gt;
os verbos padrão: GET para ler, POST para criar, PUT para atualizar e DELETE para apagar. Sua&lt;br&gt;
regra de ouro é ser "stateless" (sem estado): o servidor nunca lembra de você entre as&lt;br&gt;
requisições. Cada pedido deve conter todas as informações para ser processado.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Servidor de aplicação&lt;/strong&gt;&lt;br&gt;
Um servidor de aplicação é o motor lógico de um sistema. É o programa que faz o trabalho&lt;br&gt;
pesado: ele avalia o seu pedido, executa as regras de negócio, realiza os cálculos, acessa as&lt;br&gt;
informações no banco de dados e monta o resultado final que você precisa.&lt;br&gt;
Aprofundamento: O que é um servidor de aplicativos? | IBM&lt;br&gt;
Link:&lt;a href="https://www.ibm.com/br-pt/think/topics/application-server" rel="noopener noreferrer"&gt;https://www.ibm.com/br-pt/think/topics/application-server&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JWT&lt;/strong&gt;&lt;br&gt;
Um JWT funciona exatamente como uma pulseira de acesso em um resort. Quando você chega e&lt;br&gt;
apresenta seus documentos na recepção (faz o login com usuário e senha), o hotel confirma s&lt;br&gt;
identidade e coloca uma pulseira inviolável no seu braço.&lt;/p&gt;

&lt;p&gt;A partir daí, você não precisa mostrar sua identidade toda vez que for pedir uma bebida ou entrar&lt;br&gt;
no restaurante. O garçom apenas olha para a pulseira: ela possui o selo de segurança do hotel,&lt;br&gt;
seu nível de acesso e o dia do seu check-out.&lt;/p&gt;

&lt;p&gt;No mundo digital, o JWT é essa pulseira. Ele é um passe seguro que viaja junto com os seus&lt;br&gt;
cliques, informando aos sistemas quem é você e o que tem permissão para fazer, sem precisar&lt;br&gt;
consultar o banco de dados.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Keycloak&lt;/strong&gt;&lt;br&gt;
O Keycloak funciona como a portaria central de vários prédios. Em vez de cada aplicativo ter sua&lt;br&gt;
própria tela de login e senha, todos delegam essa tarefa a ele. O usuário se identifica uma úni&lt;br&gt;
vez na portaria, e o Keycloak libera um "crachá" digital (chamado token) que garante acesso aos&lt;br&gt;
sistemas conectados, sem pedir a senha de novo. Ele também já vem pronto com recursos como&lt;br&gt;
recuperação de senha e login usando contas do Google ou Facebook.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Redis&lt;/strong&gt;&lt;br&gt;
O Redis é como um bloco de notas na sua mesa, em vez de um arquivo trancado no porão.&lt;br&gt;
Sistemas normais buscam dados num banco de dados em disco — seguro, mas lento, como descer&lt;br&gt;
ao porão toda vez que precisa de algo. O Redis guarda cópias das informações mais usadas direto&lt;br&gt;
na memória RAM, que é quase instantânea. Por isso ele funciona como "cache": acelera sites&lt;br&gt;
guardando dados temporários, como sessão de login, carrinho de compras ou contadores em&lt;br&gt;
tempo real, para o sistema responder num piscar de olhos.&lt;br&gt;
Aprofundamento: node-redis guide (JavaScript)&lt;br&gt;
Link:&lt;a href="https://redis.io/docs/latest/develop/clients/nodejs/" rel="noopener noreferrer"&gt;https://redis.io/docs/latest/develop/clients/nodejs/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MockServer&lt;/strong&gt;&lt;br&gt;
O MockServer é como um "dublê" para sistemas que ainda não existem ou estão fora do ar.&lt;br&gt;
Quando um programa precisa conversar com outro sistema (tipo um serviço de pagamento ou&lt;br&gt;
uma API externa), ele geralmente faz isso pela internet. Só que, durante testes, você não quer&lt;br&gt;
depender do sistema real seja porque ele é lento, custa dinheiro a cada chamada, ou&lt;br&gt;
simplesmente ainda não está pronto. O MockServer entra no lugar dele e finge ser esse sistem&lt;br&gt;
recebe as mesmas perguntas e devolve respostas de mentira, mas realistas, para que o&lt;br&gt;
desenvolvedor teste seu programa como se o sistema real estivesse ali.&lt;br&gt;
Aprofundamento: MockServer&lt;br&gt;
Link:&lt;a href="https://www.mock-server.com/" rel="noopener noreferrer"&gt;https://www.mock-server.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Load Balancer (balanceador de carga)&lt;/strong&gt;&lt;br&gt;
Um Load Balancer (balanceador de carga) é um distribuidor de tráfego. Ele recebe todas as&lt;br&gt;
requisições de entrada e as divide estrategicamente entre vários servidores. Isso evita que uma&lt;br&gt;
única máquina fique sobrecarregada, garantindo rapidez, alta disponibilidade e que o siste&lt;br&gt;
não saia do ar.&lt;br&gt;
Aprofundamento: What is Load Balancing? | VMware&lt;br&gt;
Link:&lt;a href="https://www.vmware.com/topics/load-balancing" rel="noopener noreferrer"&gt;https://www.vmware.com/topics/load-balancing&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bibliotecas (Lib)&lt;/strong&gt;&lt;br&gt;
Uma biblioteca ("lib") é como uma caixa de peças prontas. Ao construir um carro, você não inventa&lt;br&gt;
a roda do zero, você usa uma pronta. No software, uma lib é um conjunto de códigos que já foram&lt;br&gt;
escritos por outras pessoas para resolver tarefas comuns, como formatar datas ou validar emails. O programador apenas pega essas peças e as encaixa no seu projeto, economizando tempo&lt;br&gt;
e esforço&lt;/p&gt;

</description>
      <category>api</category>
      <category>backend</category>
      <category>networking</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
