[241218] JS 기존 항목 추가 로직

오늘부터 TIL을 기록하는 방법을 바꾸어 볼까 합니다.

우선 제목에 주제를 넣어 어느날에 무엇을 했는지 한 번에 보기 쉽게 바꿉니다.
그런 후 알고리즘 코드카타 및 기타 루틴은 기입하지 않고 고민하고 배운걸 적을 예정입니다.

그렇다면 본론으로 오늘 무엇을 고민하였는지 시작하겠습니다.

주문 추가 로직

오늘 새로 시작한 팀 프로젝트 난이도 (상) 스타벅스 주문 시스템 만들기에 해당하는 내용입니다.

document.addEventListener('DOMContentLoaded', () => {
    const menu = [
        { name: '아메리카노', price: 4100 },
        { name: '카페라떼', price: 4600 },
        { name: '카푸치노', price: 4600 },
        { name: '카라멜 마끼아또', price: 5800 },
        { name: '자바 칩 프라푸치노', price: 6300 },
        { name: '딸기 요거트 블렌디드', price: 6300 }
    ];

    let order = {};
    let totalPrice = 0;

    const menuContainer = document.getElementById('menu');
    const orderList = document.getElementById('order-list');
    const totalPriceElement = document.getElementById('total-price');
    const submitOrderButton = document.getElementById('submit-order');

주어진 위 내용을 기반으로 메뉴 아이템을 화면에 표시하라.

append 사용

    // TODO-1: 메뉴 아이템을 화면에 표시하는 코드를 작성하세요.
    // 힌트: menu 배열을 반복문(forEach)을 사용해 순회하며,
    
    // 각 메뉴 아이템을 div 요소로 생성한 후 menuContainer에 추가하세요.
    // div 요소 안에는 메뉴 이름과 가격을 표시하는 span 태그,
    // 그리고 '주문 추가' 버튼을 추가해야 합니다.
    
    // '주문 추가' 버튼에는 각 메뉴 아이템의 인덱스를 data-index 속성으로 저장하여,
    // 클릭 시 해당 메뉴를 식별할 수 있게 만드세요.

해당 풀이를 미리 도전해보신 팀원의 풀이입니다.

    menu.forEach((item, idx) => {
        const div = document.createElement("div");
        const h2 = document.createElement("h2");
        const span = document.createElement("span");
        const btn = document.createElement("button");


        h2.textContent = item.name;
        span.textContent = item.price;
        // '주문 추가' 버튼에는 각 메뉴 아이템의 인덱스를 data-index 속성으로 저장하여,
        // 클릭 시 해당 메뉴를 식별할 수 있게 만드세요.
        btn.innerText = "주문 추가";
        btn.dataset.index = idx;

        // console.log(btn.dataset.index);

        menuContainer.append(div);
        div.append(h2, span, btn);
    });

변수에 .createElement()를 활용하여 마지막 append를 통하여 만들었습니다.

addEventListener()

    // TODO-2: 주문 추가 로직을 작성하세요.
    // 힌트: menuContainer에 이벤트 리스너를 추가하고, 이벤트가 발생한 대상이 버튼인지 확인합니다.
    
    // 버튼의 data-index 속성을 이용해 어떤 메뉴가 클릭되었는지 파악한 후,
    // 해당 메뉴의 수량을 증가시키거나 새로 추가하세요.
    
    // 이후, 총 가격(totalPrice)을 업데이트하고,
    // 주문 목록을 업데이트하는 updateOrderList 함수를 호출하세요.

위의 내용을 풀기 위하여 고민을 하였습니다.

    // 예시 코드:
    // menuContainer.addEventListener('click', (event) => {
    //     if (event.target.tagName === 'BUTTON') {
    //         // 클릭된 버튼의 메뉴 아이템을 주문에 추가하는 로직 작성
    //     }
    // });

예시 코드가 주어져 addEventListener()를 사용하여 클릭을 감지하였으니 클릭에 따라 data-index값을 가져와 버튼의 데이터 값을 파악 후 그에 따라 추가하는 코드를 짜야하는데 클릭한 버튼의 data-index값을 어떻게 가져오지 고민을 좀 하다 도저히 안되어 검색을 좀 했습니다.
우선 처음 data-index값 불러오기를 검색하여 문서를 들어갔는데 관련 문서에 .getAttribute()를 발견하여 이용 방법을 고민하다 또 다른 검색 블로그에서 좋은 참고자료를 발견하여 ${menu[].name}를 이용하여 해결하였습니다.

    menuContainer.addEventListener(`click`, evn => {                                 
        if (evn.target.tagName === `BUTTON`) {
            let menuItem = evn.target.getAttribute(`data-index`);
            if ((`${menu[menuItem].name}` in order)) {
                order[`${menu[menuItem].name}`].quantity += 1;  
            } else {
                order[`${menu[menuItem].name}`] = { 'price': menu[menuItem].price, 'quantity': 0 };
                order[`${menu[menuItem].name}`].quantity += 1;
            }
            totalPrice += order[`${menu[menuItem].name}`].price;  
            updateOrderList();                                          
        }
    })