Olá, Abaixo o meu incremento no código da aula,

HTML

<div class="formulario__campo">
    <label class="campo__etiqueta" for="cep">CEP</label>
    <input name="cep" id="cep" class="campo__escrita" required />
    <div id="messageErro" class="messageErro"></div>
</div>

CSS

.messageErro {
    color: red;
    text-align: center;
    padding: 1em 1em 0 1em;
}

JAVASCRIPT

const cidade = document.querySelector('#cidade');
const logradouro = document.querySelector('#endereco');
const estado = document.querySelector('#estado');
const complemento = document.querySelector('#complemento');
const bairro = document.querySelector('#bairro');
const messageErro = document.querySelector('#messageErro');

async function searchAddress(cep) {
    messageErro.innerHTML = '';
    try {
        const bringCEP = await fetch(`https://viacep.com.br/ws/${cep}/json`);
        const convertedCEP = await bringCEP.json();
        cidade.value = convertedCEP.localidade;
        logradouro.value = convertedCEP.logradouro;
        estado.value = convertedCEP.uf;
        complemento.value = convertedCEP.complemento;
        bairro.value = convertedCEP.bairro;
        if (convertedCEP.erro) {
            throw Error('Erro CEP não encontrado');
        }
        return convertedCEP;
    } catch (erro) {
        messageErro.innerHTML = `<p>CEP inválido, tente novamente!</p>`;
    }
}

const cep = document.querySelector('#cep');
cep.addEventListener('focusout', (event) => {
    searchAddress(cep.value);
});

Breve Explicação

Optei por fazer a chamada dos elementos HTML de forma global (fora da função), justamente para termos uma única chamada desses elementos no nosso código e evitar gerar uma requisição desses elementos sempre que a função for executada.

Ilustração