[TIL 2024. 06. 04] axios post | updateCartDisplay() 오류

elder_menu.html에서 메뉴 정보가 담긴 id가 "recommendations"인 각 카드들을 누르면 장바구니에 추가되어야 한다.

 

기존에는 js내에서만 장바구니가 저장되고, 별도로 장바구니 현황이 저장되는 DB가 아직 없었고, 이때 클릭으로 js내에서 메뉴가 추가되는 코드를 작성했었다.

 

하지만 이제는 장바구니 상태가 메뉴 카드가 클릭되거나 음성인식될 때마다 장바구니 현황이 Redis에 저장되며 update되어야 하므로 기존에 있던 js코드의 여기저기를 수정해줘야 했다.

 

일단 사용자가 elder_menu.html에서 메뉴 카드를 클릭하면 다음과 같은 순서로 로직이 진행된다

 

1. html상에서 메뉴 카드를 클릭함(트리거)

2. addItem()이 실행(호출)됨

3.  /orders/add_to_cart/로 axios post요청을 보냄

3-1. views.py의 add_to_cart에서 Cart()객체를 생성함

3-2. 객체에 대해 add_to_cart()메소드를 실행함 -> 실제로 Redis에 저장되는 부분

4. 그 결과 받은 response에 대해 updateCartDisplay()를 실행함

---

 

오류1:

처음에 맞닥뜨린 오류는 add_to_cart로 axios post요청자체가 보내지지 않는 것이었다.

이 문제에 대한 원인을 찾기 위해 axios요청에 parameter들이 잘 들어있고, 보내지는지 확인하기 console을 찍어보기도 하고, 도착지점인 views.py의 add_to_cart의 초입에 print문을 찍어보기도 했다.

 

확인 결과, axios자체에는 paramter도 잘 들어있는데, 일단 add_to_cart의 print문 자체가 찍히지 않았다.

즉, axios post요청 call자체가 일어나지 않고 있었다(=django의 터미널에도 call자체가 찍히지 않음)

 

우리끼리 고민하는 것이 더는 의미가 없다는 판단하에 튜터님을 찾아가서 함께 코드를 살펴본 결과, 코드 상에는 이상이 없어서 이상하다..하고 있는 참에 혹시 몰라 튜터님이 crome 브라우저 내의 cache 초기화를 한 번 해보라고 하셨다..

 

그러고 나니 갑자기 axios post요청이 잘 보내졌다..ㅎㅎ

즉, 코드상 문제로 생긴 오류는 아니었고, js파일이 crome 브라우저 입장에서는 static이므로 cache에 저장되며 오류가 발생한 것이었다

 

앞으로도 혹시 코드에 이상은 없는 것 같은데 오류가 발생한다면 cache 초기화를 시도해보는 것이 좋겠다..!

---

 

오류2:

"/orders/add_to_cart/" endpoint에서 받은 response에 대해 해당 cartData에 대해 for문을 돌면서 장바구니 div에 row로 붙여주는 것이 updateCartDisplay()의 역할이다.

 

하지만 elder_menu.html이 로드되는 순간부터 본래 아무런 row도 없어야 할 장바구니에 모든 항목이 "undefined"인 row가 처음부터 추가되어 있는 오류를 발견했다

 

add_to_cart기능이 정상적으로 기능하는 와중에도(=장바구니에 메뉴 추가가 정상적으로 이뤄짐) 정상적으로 붙는 장바구니 메뉴 row들은 모든 항목이 undefined인 row밑으로 붙는 모습이었다

 

---

문제의 원인은 아무래도 cartData의 내부에 장바구니 모든 항목이 undefined인 무엇인가가 있기 때문으로 판단했다

그래도 혹시 모르니 한 번 더 확인하기 위해 item의 어느 항목이라도(_코드상에는 일단 item["price"]로 잡기는 했음) "undefined"인 경우에는 console.log를 찍어달라고 코드를 작성했다.

 

확인결과, 역시나 console.log가 찍혔다. 이에 대한 해결로는 undefined인 객체가 item내부의 어딘가에 있을 것이지만, 이를 직접적으로 찾아서 수정하는 것은 어렵다고 판단하고, 기존의 우리 목표(=장바구니에 undefined가 보여지지 않으면 됨)를 위해서 if문을 통해 코드를 수정해줬다.

 

   function updateCartDisplay(cartData) {
        let currentTotal = 0;
        cartItems.innerHTML = '';
        console.log("cart 확인해보기 >>>>> ", cartData)
        for (let name in cartData) {
            let item = cartData[name];
            // Check if item is a string or an object
            if (typeof item === 'string') {
                // Parse string to object
                item = JSON.parse(item);
            }
            if (typeof item === 'object') {
                console.log("Parsed item >>>", JSON.stringify(item)); // Log as string for clarity
                console.log("item 출력 >>>> ", item)
                ##아래가 수정한 부분_if문 이후 아래 코드들은 indent를 넣어줌
                if (item["price"] !== undefined) {
                    console.log("price 가 undefined 인지 >>>>> ", item["price"])
                    currentTotal += item["price"] * item["quantity"];
    
                    cartItems.innerHTML += `
                        <div class="cart-item">
                            <img src="${item["image"]}">
                            <span>${item["menu_name"]}</span>
                            <span>${item["price"]}원</span>
                            <span>${item["quantity"]}개</span>
                            <button class="remove" onclick="removeItem('${item["menu_name"]}')">삭제</button>
                        </div>`;
                }
        }
        }