Template, Tagged Template literals, 함수이름`HTML내용`

* json으로 응답받고, javascript object로 변환한 후에 어떠한 데이터처리 조작을 하고 dom에 추가한다.

data + HTML 문자열의 결합이 필요하기 때문이다.

const template = `<div>welcome ${data[0].name}!!`;

 

* Tagged Template literals

function fn(Tags, name, items) {
    if (typeof items === "undefined") {
        items = "주문가능한 상품이 없습니다.";
    }
    return (tags[0] + name + tags[1] + items + tags[2]);
};

data.forEach((v) => {
    let template = fn`<div>welcome ${v.name}!!</div>
    <h2> 주문 가능 항목 </h2> <div> ${v.items}</div>`;

    document.querySelector("#message").innerHTML += template;
});