moonbucks-menu 스탭1 회고

moonbucks-menu 스탭 1 회고

안녕하세요 TriplexLab 입니다.
blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다.

블랙커피를 소개합니다.

👉 스탭 1에서 얻은 인사이트

1. 중복 코드를 하나의 함수로 따로 빼서 관리한다는 것
2. 요구사항을 단계별로 세세하게 나누는 게 중요하다는 걸 알게 됐다.
3. DOM 요소를 가져올 때는 $기호를 써서 변수로 사용할 수 있는 게 좋았다.(jquery 아님)
4. 새롭게 알게 된 메서드 insertAdjacentHTML

// step1 요구사항 구현을 위한 전략
// TODO 메뉴 추가
// - [x] 메뉴의 이름을 입력 받고 엔터키 입력으로 추가한다.
// - [x] 메뉴의 이름을 입력 받고 확인 버튼을 클릭하면 메뉴를 추가한다.
// - [x] 추가되는 메뉴의 마크업은 `<ul id="espresso-menu-list" class="mt-3 pl-0"></ul>` 안에 삽입해야 한다.
// - [x] 총 메뉴 갯수를 count하여 상단에 보여준다.
// - [x] 메뉴가 추가되고 나면, input은 빈 값으로 초기화한다.
// - [x] 사용자 입력값이 빈 값이라면 추가되지 않는다.

// TODO 메뉴 수정
// - [x] 메뉴의 수정 버튼클릭 이벤트를 받고, 메뉴수정하는 모달창(prompt)이 뜬다.
// - [x] 모달창에서 신규메뉴명을 입력 받고, 확인버튼을 누르면 메뉴가 수정된다.

// TODO 메뉴 삭제
// - [x] 메뉴 삭제 버튼 클릭 이벤트를 받고, 메뉴 삭제 컨펌 모달창이 뜬다.
// - [x] 확인 버튼을 클릭하면 메뉴가 삭제된다.
// - [x] 총 메뉴 갯수를 count하여 상단에 보여준다.

 
const $ = (selector) => document.querySelector(selector)

function App() {
    const menuForm = $('#espresso-menu-form');
    const idMenuName = $('#espresso-menu-name');
    const submitBtn = $('#espresso-menu-submit-button');
    const menuList = $('#espresso-menu-list');

    const commonUpdateMenuCount = () => {
        const menuCount = menuList.querySelectorAll('li').length;
        $('.menu-count').innerText = `총 ${menuCount}개`;
        idMenuName.value = '';
    };
    const commonAddMenuName = () => {
        if(idMenuName.value === ''){
            alert('값을 입력해주세요.');
            return;
        }
        const espressMenu = idMenuName.value;
        const munuItemTemplate = (Menu) => {
            return`<li class="menu-list-item d-flex items-center py-2">
                    <span class="w-100 pl-2 menu-name">${Menu}</span>
                    <button type="button" class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"> 수정 </button>
                    <button type="button" class="bg-gray-50 text-gray-500 text-sm menu-remove-button"> 삭제 </button>
                    </li>`;
        };
        menuList.insertAdjacentHTML('beforeend', munuItemTemplate(espressMenu));
        commonUpdateMenuCount();
    };

    const updateMenuName = (e) => {
        const menuName = e.target.closest('li').querySelector('.menu-name');
        const updateMenuName = prompt('메뉴명을 수정하세요', menuName.innerText);
        menuName.innerText = updateMenuName
    };

    const removeMenuName = (e) => {
        confirm('정말 삭제하시겠습니까?') && (e.target.closest('li').remove(), commonUpdateMenuCount())
    }

    menuList.addEventListener('click', (e) => {
        if(e.target.classList.contains('menu-edit-button')){
            updateMenuName(e);
        }

        if(e.target.classList.contains('menu-remove-button')){
            removeMenuName(e);
        }
    });

    menuForm.addEventListener('submit', (e) => {
        e.preventDefault();
    });

    submitBtn.addEventListener('click', commonAddMenuName);
    
    idMenuName.addEventListener('keypress', (e) => {
        if(e.key !== 'Enter') return;
        commonAddMenuName();
    });
}
App();

위에 코드를 간단히 설명하면 카페 메뉴를 CRUD를 할 수 있는 코드입니다.
여기서는 데이터를 저장하는 것을 만들지 않아서 새로고침 하면 사라집니다.

앞으로 스탭2 미션을 들어야 하는 순서인데 localStorage에 데이터를 관리하는 내용이 담겨 있어요..
내 생각과 비교했을 때 어떤 방법으로 localStorage를 관리하는지 궁금하고, 기대됩니다. 😃😃

스탭2 회고 내용입니다. 궁금하신 분들은 클릭해서 확인해보세요 👨‍💻👏

moonbucks-menu 스탭2 회고