[버그 수정] - 실시간으로 변하는 장바구니 만들기

내가 힘들게 만든 장바구니에도 버그가 존재한다. 개발자에게 있어서 버그는 항상 존재한다고 생각하며 수정하고 있지만 쉽지만은 않다. 

내가 다 끝냈다고 생각한 코드를 다시 봐야 한다는 점이 가장 귀찮았다. 

그래도 버그를 수정했을 때의 그 쾌감이 너무 좋아서 포기할 수가 없다.

 

장바구니에는 총 2가지의 버그가 존재한다. 

1. 메뉴사진을 클릭하면 장바구니에 추가되지 않는점

2. 장바구니에서 메뉴 삭제를 하고 다시 그 메뉴가 추가되지 않는점

 

1번 버그

첫번째 버그는 요소를 불러오는데 있어서 오류가 있어서 생긴 것이였다.

내가 처음 작성한 코드다.

<div class="menuName">${e.target.firstElementChild.firstElementChild.innerText}</div>

이렇게 코드를 짜면 클릭했을 때의 요소를 찾는데, 이렇게 되면 각각의 위치에서의 자식 요소들이 달라져 엉뚱한 곳으로 가게 된다. 

위치마다 다르다

예를 들어 가운데 부분을 클릭했을 때와 사진부분을 클릭했을 때의 자식요소는 다르다.

그렇기 때문에 클릭했을 때가 아닌 전체박스에 대한 요소를 가져와야 한다. 

const menu = document.querySelectorAll(".SubItem");
menu.forEach((item)=>{
	<div class="menuName">${item.childNodes[1].childNodes[1].innerText}</div>
    }

 그래서 나는 반복문을 사용해서 박스 어디를 클릭해도 박스 전체에 대한 요소를 가져올 수 있게 하였다. 

여기서는 메뉴이름("안심 스테이크")를 가져오는 방법이다. 

2번 버그

},{once:true})  // once:true 한번만 클릭하게 하기

내가 처음에 한 방법은 모든 요소들이 한번만 클릭되게 하는 것이였다. 그렇기 때문에 한번 클릭된 메뉴들은 삭제가 되고 난 후 다시 추가가 안되는 버그가 있었던 것이다. 

if(cart.every((menu)=>menu.name!==item.childNodes[1].childNodes[1].innerText))

나는 어떻게 구현을 할까 생각하다가 조건문을 만들어서 풀어야 겠다는 생각을 했다. 메뉴를 추가하면 배열에도 추가되도록 만들었기 때문에 배열에 이미 있는 메뉴는 추가되지 않도록 하는 조건문을 만들었다. 

if문을 사용해서 배열(cart)에 클릭된 메뉴의 이름이 없어야지만 배열에 추가되도록 하였다. 

every는 내장 함수로 모든 요소를 돌면서 주어진 조건에 만족하는지 확인하는데, 만족하면 true를 아니면 false를 리턴한다.

---

완성된 코드

menu.forEach((item)=>{
  item.addEventListener("click",function(e){
    const line = document.querySelector(".bottomline");
    const menuBoxOuter = document.querySelector(".menuBoxOuter");     // 총합DIV을 맨 아래 넣기 위해 각각의 메뉴태그들을 감싸는 부모 태그를 만들었다.
    console.log()
    if(cart.every((menu)=>menu.name!==item.childNodes[1].childNodes[1].innerText)){
      menuBoxOuter.innerHTML += `
      <div class="menuBox">
            <div class="menuName">${item.childNodes[1].childNodes[1].innerText}</div>
            <div class="menuCost">
              <div class="menuCost_left">
                <button class="delete" onclick="del(this)">X</button>
                <div class="cost" value="${item.childNodes[1].childNodes[3].innerText}">${item.childNodes[1].childNodes[3].innerText}</div>
                <div>원</div>
              </div>
              <div class="menuCost_right">
                <button class="minus" onclick="minus(this)">-</button>
                <div class="su">1</div>
                <button class="plus" onclick="plus(this)">+</button>
              </div>
      </div>`;
      const product = {
        name:`${item.childNodes[1].childNodes[1].innerText}`,
        quantity: 1,
        price: Number(item.childNodes[1].childNodes[3].innerText)
      };
      // 새로 추가될때마다 총합 태그는 가장 아래 위치됨
      cart.push(product);
  
      line.style.visibility = "visible";
      const costhap = document.querySelector(".costHap");
      const count = document.querySelector(".count");
      costhap.style.display="flex";       // 합계 DIV 보이게 하기
      count.style.display="block";
      costhap.innerHTML = `
      <div class="hapDiv">
        <div class="hapname">합계: </div>
        <div class="hap"></div>
        <div>원</div>
      </div>
      `
      count.innerHTML = `
      <button>주문하기</button>`
      console.log(cart)
      hap();
    }
  });
})

쉽다면 쉬울 수 있었던 버그였지만 이런 사소한 버그들도 고칠려면 난 아직 시간이 걸린다. 

그래도 더 완벽한 기능을 구현했다는 점이 만족스럽게 다가와서 기뻤다. 

그리고 버그를 수정했다는 점이 뭔가 더 개발자에 가까워졌다는 느낌?!