data-* attribute란 무엇이며 어떻게 읽나요?

const btn = document.querySelector("button");
btn.dataset.id;        // "42"
btn.dataset.userRole;  // "admin"  ← kebab-case가 camelCase가 된다
btn.dataset.isActive;  // "true"   ← 항상 문자열

// 쓰기를 하면 attribute도 갱신된다
btn.dataset.id = "99"; // DOM에서 data-id="99"로 설정한다

button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* 값을 표시한다 */

list.addEventListener("click", (e) => {
  const id = e.target.dataset.id; // 어떤 항목이 클릭되었는지 안다
  if (id) deleteItem(id);
});