practice1.js

const Renderer = class {
    async render(data){
        if(!(data instanceof Data)) throw "invalid data type";
        const info = await data.getData();
        if(!(info instanceof Info)) throw "invalid info type";
        this._title = info.title;
        this._header = info.header;
        this._items = info.items;
        this._render();
    }
    _render(){
        throw "_render must overrided";
    }
};

const TableRenderer = class extends Renderer{
    constructor(parent){
        if(typeof parent != 'string' || !parent) throw "invalid param";
        super();
        this._parent = parent;
    }
    _render(){
        const parent = document.querySelector(this._parent);
        if(!parent) throw "invaild parent";
        parent.innerHTML= "";
        const [table, caption, thead] = "table,caption,thead".split(",").map(v=>document.createElement(v));
        caption.innerHTML= this._title;
        [caption, this._header.reduce((_, v)=>(thead.appendChild(document.createElement("th")).innerHTML = v, thead)),
        ...this._items.map(item=>item.reduce((tr, v)=>(tr.appendChild(document.createElement("td")).innerHTML = v, tr),
        document.createElement("tr")))].forEach(el=>table.appendChild(el));
        parent.appendChild(table);
    }
}

@chj1768 점수 올려드렸습니다 👍