2. fetch 컬렉션 다루기

<aside> 💡
브라우저의 DOM에 id를 걸어서, 직접 삭제하는 법
</aside>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
      }

      #user-1 {
        border: 2px solid #4a90e2;
        border-radius: 8px;
        padding: 20px;
        background: transparent;
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      #user-1:hover {
        border-color: #357abd;
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
      }

      .meta-info {
        display: flex;
        gap: 15px;
        margin-bottom: 12px;
        font-size: 12px;
        color: #666;
      }

      .meta-item {
        background: transparent;
        padding: 4px 10px;
        border-radius: 12px;
        font-weight: 500;
        border: 1px solid #d0d0d0;
      }

      .title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 12px;
        line-height: 1.4;
      }

      .body {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="text" id="my-input" />
      <button type="button" onclick="del()">id로삭제</button>
    </div>
    <div id="post-box" class="container"></div>

    <script>
      function del() {
        let id = document.querySelector("#my-input").value;
        let delDom = document.querySelector(`#post-${id}`);
        delDom.remove();
      }

      function renderUserItem(post) {
        let item = document.createElement("div");
        item.setAttribute("id", `post-${post.id}`);
        item.innerHTML = `<div class="meta-info">
          <span class="meta-item">userId: ${post.userId}</span>
          <span class="meta-item">id: ${post.id}</span>
        </div>
        <div class="title">
          ${post.title}
        </div>
        <div class="body">
          ${post.body}
        </div>`;
        return item;
      }

      async function download() {
        // 1. fetch
        let res = await fetch("<https://jsonplaceholder.typicode.com/posts>");
        // 2. 파싱 (json Array -> list)
        let posts = await res.json();

        // 3. 랜더링
        let dom = document.querySelector("#post-box");

        posts.forEach((post) => {
          dom.append(renderUserItem(post));
        });
      }

      download();
    </script>
  </body>
</html>