HTML data-* 속성 – 사용하는 목적과 이유

const viewDetails = document.getElementById("product-details");

viewDetails.addEventListener("click", function() {
    const productId = this.dataset.productId;
    const product = document.getElementById(productId);

    /* 제품 요소에서 데이터 속성을 사용하여
       제품 이름, 가격, 재고, 색상을 가져옵니다. */
    const productName = product.dataset.name;
    const price = product.dataset.price;
    const stock = product.dataset.stock;
    const color = product.dataset.color;
    
    /* 가져온 제품 정보를 문자열로 조합하여
       알림창으로 표시합니다. */
    const msg = "제품 이름: " + productName +
                "\n가격: " + price + "원" +
                "\n재고: " + stock + "개" + 
                "\n색상: " + color;          
    alert(msg);
});