[블랙커피 Vanilla JS Lv.1] 챕터 1(1주차)

2022 START WITH UDEMY 챌린지 리뷰를 포함하고 있습니다.

 

챕터 1 리뷰

 

1. 요구사항 분석을 자세히해서 요구사항에 대한 해결력을 기를 수 있는 수업
2. 리팩터링을 자세히 설명해주었던 수업
3. 줌을 통한 실시간 수업에 초점이 맞추어져 있어서 생략된 부분들이 꽤나 있었던 수업

 

1. 요구사항 분석을 자세히해서 요구사항에 대한 해결력을 기를 수 있는 수업

위 강의에서 첫 부분은 요구사항을 분석하는 것에서부터 시작한다. 그렇기에 간단한 TODO List를 만드는 것임에도 과할정도로 자세하게 요구사항을 분석한다. 이 강의 챕터1을 들으면서 요구사항을 분석하는 방법을 기를 수 있었고, 기능상 필요한 함수들을 분리하는 방법도 배울 수 있던 챕터였다.

 

 

2. 리팩터링을 자세히 설명해주었던 수업

하나의 기능이 끝날때 마다, 리팩터링을 같이 해주었다. 중복되는 코드들을 하나의 변수로 묶어서 중복을 줄이거나, 함수를 기능별로 나누어서 의존성을 분리 시키는 등 실제 코딩할때 필요한 리팩터링 방법들을 알려주어 배울 점이 많았던 수업이었다.

 

 

수정 전

function App() {
  $("#espresso-menu-list").addEventListener("click", (e) => {
    if (e.target.classList.contains("menu-edit-button")) {
      const $menuName = e.target.closest("li").querySelector(".menu-name");
      const updatedMenu = prompt("메뉴명을 수정해주세요", $menuName.innerText);
      $menuName.innerText = updatedMenu;
    }

    if (e.target.classList.contains("menu-remove-button")) {
      if (confirm("정말 삭제 하시겠습니까?")) {
        e.target.closest("li").remove();
        updateMenuCount();
      }
    }
  });
  //form 태그 자동전송 막기
  $("#espresso-menu-form").addEventListener("submit", (e) => {
    e.preventDefault();
  });

  $("#espresso-menu-submit-button").addEventListener("click", ()=>{
  	const menuName = $("#espresso-menu-name").value;
  //빈 값 엔터 막기
  if (menuName === "") {
    return alert("빈 값은 입력할 수 없습니다.");
  }
  //아메리카노의 템플릿 생성
  const menuItemTemplate = (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>`;
  };
  //html 태그 삽입
  $("#espresso-menu-list").insertAdjacentHTML("beforeend", menuItemTemplate(menuName));
  updateMenuCount();
  });
  //메뉴의 이름을 입력받기
  $("#espresso-menu-name").addEventListener("keypress", (e) => {
    if (e.key !== "Enter") {
      return;
    }

    const menuName = $("#espresso-menu-name").value;
  //빈 값 엔터 막기
  if (menuName === "") {
    return alert("빈 값은 입력할 수 없습니다.");
  }
  //아메리카노의 템플릿 생성
  const menuItemTemplate = (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>`;
  };
  //html 태그 삽입
  $("#espresso-menu-list").insertAdjacentHTML("beforeend", menuItemTemplate(menuName));
  updateMenuCount();
  });
}

 

수정 후

function App() {
  $("#espresso-menu-list").addEventListener("click", (e) => {
    if (e.target.classList.contains("menu-edit-button")) {
      const $menuName = e.target.closest("li").querySelector(".menu-name");
      const updatedMenu = prompt("메뉴명을 수정해주세요", $menuName.innerText);
      $menuName.innerText = updatedMenu;
    }

    if (e.target.classList.contains("menu-remove-button")) {
      if (confirm("정말 삭제 하시겠습니까?")) {
        e.target.closest("li").remove();
        updateMenuCount();
      }
    }
  });
  //form 태그 자동전송 막기
  $("#espresso-menu-form").addEventListener("submit", (e) => {
    e.preventDefault();
  });

  $("#espresso-menu-submit-button").addEventListener("click", enterMenu);
  //메뉴의 이름을 입력받기
  $("#espresso-menu-name").addEventListener("keypress", (e) => {
    if (e.key !== "Enter") {
      return;
    }

    enterMenu();
  });
}

function enterMenu() {
  const menuName = $("#espresso-menu-name").value;
  //빈 값 엔터 막기
  if (menuName === "") {
    return alert("빈 값은 입력할 수 없습니다.");
  }
  //아메리카노의 템플릿 생성
  const menuItemTemplate = (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>`;
  };
  //html 태그 삽입
  $("#espresso-menu-list").insertAdjacentHTML("beforeend", menuItemTemplate(menuName));
  updateMenuCount();
}

위 처럼 중복되는 로직이 있다면 함수로 분리해서 코드의 가독성을 높이는 리팩터링을 기능 하나가 마칠 때마다 수행해서 개발자가 가져야할 루틴이라는 점을 깨달을 수 있었다.

 

 

3. 줌을 통한 실시간 수업에 초점이 맞추어져 있어서 생략된 부분들이 꽤나 있었던 수업

전 부터 기수별로 진행됐던 스터디여서 그런지 초반에 많은 부분이 생략되어 있어서 당황스러웠다. 프로젝트 세팅은 이미 되어있어서 fork 받아서 사용하는 부분과, 요구사항이 이미 정의가 되어있고 개발환경 세팅도 글로만 적혀있고 강의에서는 다른 언급이 없었던 점이 아쉬웠다. 유데미에 올라올 강의라면 강의를 수강하는 수강생들을 위해서 조금만 더 설명해 주었으면 어땠을까 하는 점이 있다.