내 코드가 우아하지 않은 이유

문벅스 강의의 요구사항을 직접 구현 해보며 느낀 내 코드의 전반적인 문제점

요구 사항

// TODO: localStorage에 저장 
// - [] localStroage에 메뉴 데이터를 저장한다. 
// - [] 새로고침을 하면 localStorage에 저장되어 있던 메뉴 데이터를 불러온다.

// TODO: 품절 표시 기능 
// - [] 메뉴의 품절 버튼 클릭 이벤트를 받고, 이벤트 발생 시 품절 상태를 변경한다.(toggle)

내 코드

const toggleSoldOutMenu = (e) => {
    const $menuElement = e.target.closest("li");
    const menuId = parseInt($menuElement.dataset.menuId, 10);
    const $menuNameElement = $menuElement.querySelector(".menu-name");
    $menuNameElement.classList.toggle("sold-out");
    this.menu[this.currentCategory] = this.menu[this.currentCategory].map(
      (item, index) => {
        return index === menuId ? { ...item, soldOut: !item.soldOut } : item;
      }
    );
    store.setLocalStorage(this.menu);
  };

const addMenuName = () => {
    if ($("#menu-name").value.replace(/ /gi, "") === "") {
      alert("값을 입력해주세요");
      return;
    }
    const menuName = $("#menu-name").value;
    this.menu[this.currentCategory].push({ name: menuName, soldOut: false });
    store.setLocalStorage(this.menu);
    render();
    $("#menu-name").value = "";
  };

동작은 다 잘됐다.

내 코드의 문제점

구체적으로 세 가지의 문제점이 있었다.

 

첫째, undefined== false임을 생각하지 못했다.

 

로컬스토리지에 품절 여부를 저장하려면 애초에 메뉴를 추가할 때 메뉴 아이템 객체에 soldOut 프로퍼티를 명시해주어야 한다고 생각했다. 이를 위해 addMenuName 함수를 수정했다.
그러나 정의되지 않은 프로퍼티는 false로 여겨지므로, 처음부터 명시할 필요 없이 품절 시에 해당 객체에 프로퍼티를 추가해주면 됐다.

 

둘째, render() 함수를 활용하지 못했다. 한 가지 기능을 하는 두 가지 로직이 혼용되어 있다.

render: this.menu를 화면에 그리는 함수. 상태인 this.menu가 변경되고 난 후 render를 호출하면 변경된 상태가 화면에 반영된다.

품절 버튼이 클릭되면 이를 두 군데 반영해야 한다.

• localStorage → 새로고침 시에도 품절 상태를 나타낼 수 있게
• 화면: span 태그에 sold-out 클래스 추가/삭제 하기

나는 이 둘을 따로 생각했다. 따라서 각각을 구현했다. 따라서 함수 내 this.menu 배열을 변경해 로컬스토리지에 저장하는 코드, span 태그에 클래스 추가/삭제하는 코드를 작성했다. 그러나 이렇게 되면 span태그에 클래스를 추가/삭제하는 작업이 두 번씩 이뤄진다.
toggleSoldOutMenu 함수 내에서 직접 클래스를 추가할 게 아니라, 상태를 변경 한 다음 변경된 상태로 화면을 다시 그리는 편이 더 바람직하다. 어차피 품절 여부는 상태로 관리 되니까.

 

셋째, menuId를 구했으므로 원하는 원소에 바로 접근할 수 있다.

map 함수로 this.menu 배열을 순회할 이유가 없다.

우아한 코드를 위해

내 코드는 부산스럽다. 우아하지 못하다. 마음이 급해 이런 저런 코드를 갖다 붙인 모양새다.
최소한의 코드로 한 가지 기능을 침착하게 구현해내는 모습이 우아하다.

 

🎈 발전하기 위해 훈련해야 할 것들

• 이미 있는 함수를 이해하고 활용하는 연습
• 요구분석은 최대한 구체적으로 쪼개기, 요구분석 후 개발을 시작하는 연습
• 한 번에 한 가지만 생각하기
• 양이 아닌 질에 초점 맞추기