JS/ 웹개발경진대회 / Mutation Observer / 장바구니 상품 실시간 총합계산

장바구니에 담긴 각 상품의 갯수와 가격에 따른 총합계산 방법이다. 장바구니에 담길때 마다 자동으로 장바구니 상품의 총 가격을 웹사이트 하단에 표시해주는 방식을 채용했다.
그러기 위해서 DOM의 속성, 텍스트, 자식 노드들에 대한 변경을 감지할 수 있는 API인 Mutation Observer를 사용하기로 했다. 장바구니 cart div박스 내부 요소가 변경될때를 감지하여 그때마다 모든 상품의 총합 가격을 표시해주는 방법을 사용하기로 했다.

// 감시 대상 node 선택
        let target = document.querySelector(".cart");
 // 감시자의 설정
        let option = {
          attributes: true,
          childList: true,
          characterData: true,
        };

        // 대상 노드에 감시자 전달
        observer.observe(target, option);
        //=======

먼저 cart를 target이라는 변수를 통해 observer.observe로 감시자를 전달했다.
감시자 옵션 설정에서는 attribute (대상 노드의 속성에 대한 변화를 감시), childList(대상 노드의 하위 요소의 추가 및 제거를 감시), characterData(대상 노드의 데이터에 대한 변화를 감시) 옵션을 true로 설정하여 cart 박스 안에 상품들이 추가 될 때, 혹은 상품들의 수량데이터가 변경될 때를 감지하도록 하였다.

	let observer = new MutationObserver((mutations) => {
          // 노드가 변경 됐을 때의 작업
          cart.forEach((a, i) => {
            priceArray[i] = a.price * a.count; // 가격*개수 를 빈배열 priceArray에 차례로 저장
          });

          var sum = priceArray.reduce((a, b) => {
            return a + b;
          }); // 장바구니 총합 계산을 위해 reduce함수
          $("#sum").html(`합계 : ${sum}`);
        });

타겟이 변경되었을 때 MutationObserver 안에 콜백함수를 실행하는 원리인데, 콜백함수의 내용으로 cart안에 상품의 갯수만큼 반복문을 돌려 각 상품의 가격과 개수를 priceArray라는 빈 배열에 차례대로 쌓아주었다.
상품의 갯수의 변화가 일어나더라도 변화가 일어날때마다 priceArray의 0번 인덱스 부터 차례로 갱신하는 원리이기 때문에 총합 계산에 있어서는 갱신되기 전의 cart와 충돌할 일이 없었다.
이 후 쌓아놓은 priceArray를 reduce함수를 통해 배열의 요소들을 모두 더해주었다.

결과적으로 상품이 많이 쌓여도 정상적으로 총합계산이 작동하는걸 확인할 수 있었다.ㅎㅎ