JS 문벅스 카페메뉴 앱

Vanilla JS로 구현 하는 상태관리가 가능한 카페메뉴 앱

☕ MOONBUCKS 문제

---

📆 진행 기간

2023. 02. 28 ~ 2023. 03. 01

---

⏯️ 애플리케이션 구동 방법

💻 애플리케이션 실행

1. 애플리케이션 저장소를 local에 clone 합니다.

git clone https://github.com/letsjo/moonbucks-menu.git

2. live-server를 global 로 설치합니다.

npm install -g live-server

3. live-server를 실행해 줍니다.

live-server ./moonbucks-menu

💽 웹서버 실행

1. 웹서버 저장소를 local에 clone 해줍니다.

git clone https://github.com/blackcoffee-study/moonbucks-menu-server.git

2. 저장소를 clone한 후 아래 명령어를 입력해 의존성 라이브러리를 설치해줍니다.

npm install

3. 아래 명령어를 이용해 서버를 동작시킵니다.

npm start

---

🎯 step1 요구사항 구현을 위한 전략

✅ TODO 메뉴 추가

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

✅ TODO 메뉴 수정

• 메뉴의 수정 버튼을 눌러 메뉴 이름 수정할 수 있다.
• 메뉴 수정시 브라우저에서 제공하는 prompt 인터페이스를 활용한다.
• 메뉴 수정시 빈 값이라면 수정되지 않는다.
• 메뉴 수정시 취소 버튼을 누르면 수정되지 않는다.

✅ TODO 메뉴 삭제

• 메뉴 삭제 버튼을 이용하여 메뉴 삭제할 수 있다.
• 메뉴 삭제시 브라우저에서 제공하는 confirm 인터페이스를 활용한 다.
• 총 메뉴 갯수를 count하여 상단에 보여준다.

✒️ Step 1 회고

• 리펙터링 처리하는 방법을 배울 수 있었습니다.
  • 역할이 비슷한 함수들 끼리 묶어 놓기
  • 메서드 remove 와 같은 것을 쓰면 delete 동사를 쓰지말고 remove로 통일시켜라.
  • 사용하지 않는 props 들은 정리해 놓아라.
  • 리펙터링 할 때마다 정상 작동하는지 테스트를 해야한다.
• 이벤트를 위임할 수 있다.
• 요구 전략을 꼼꼼하게 잘 짜야 실수도 하지 않고, 시간을 줄일 수 있다.
• DOM 요소를 가져올때는 $를 사용하여 변수처럼 사용할 수 있다.
• 알게된 새로운 메서드
  • innerText: 내부 태그의 text 값을 가져온다.
  • closest: 가까운 태그로 이동
  • insertAdjacentHTML: 코드 내부에 삽입한다.

      document
        .querySelector(selector)
        .insertAdjacentHTML(option, 삽입할 HTML);
      <!-- beforebegin -->
      <p>
      <!-- afterbegin -->
      foo
      <!-- beforeend -->
      </p>
      <!-- afterend -->

---

🎯 step2 요구사항 - 상태 관리로 메뉴 관리하기

✅ TODO 데이터 Read & Write

• localStorage에 데이터를 저장한다.
  • 메뉴를 추가할 때 저장
  • 메뉴를 수정할 때 저장
  • 메뉴를 삭제할 때 저장
• localStorage의 데이터를 읽어온다.

✅ TODO 카테고리별 메뉴판 관리

• 카테고리별 메뉴판 관리
  • 에스프레소
  • 프라푸치노
  • 블렌디드
  • 티바나
  • 디저트

✅ TODO 페이지 접근시 최초 데이터 Read & Rendering

• 페이지에 최초로 로딩될 때, localStorage 에스프레소 메뉴를 읽어온다.
• 에스프레소 메뉴를 페이지에 그려준다.

✅ 품절 상태 관리

• 품절 버튼을 추가한다.
• 품절 버튼을 클릭하면, localStorage에 상태값이 저장된다.
• 클릭 이벤트에서 class속성 값에 sold-out을 추가한다.

✒️ Step 2 회고

• this를 사용해서 상태 값을 저장 및 관리 하는 방법을 배울 수 있었습니다.
• init 메서드를 만들어 class의 생성자 역할을 할 수 있는 점을 배울 수 있었습니다.
• Vanilla JS에서도 각 함수들을 모듈화 하여, import 해서 사용할 수 있다는 점을 알 수 있었습니다.
• new 를 사용하여, 각 카테고리 별 App을 만들어서 메뉴를 관리 해볼 수 있지 않을까 생각했습니다.

---

🎯 step3 요구사항 - 서버와의 통신을 통해 메뉴 관리하기

✅ TODO 웹 서버 요청하기

• 서버에 새로운 메뉴가 추가 될 수 있도록 요청한다.
• 카테고리별 메뉴 리스트를 불러온다.
• 서버에 수정된 메뉴명으로 변경될 수 있도록 요청한다.
• 서버에 메뉴가 품절 처리될 수 있도록 요청한다.
• 서버에 메뉴가 삭제될 수 있도록 요청한다.

✅ TODO 리펙터링 하기

• localStorage에 저장하는 로직은 지운다.
• fetch 비동기 api를 사용하는 부분을 async await을 사용하여 구현한다.
• 중복된 코드 삭제
  • render 전 menu 상태값 최신화 시켜주는 것을 render 메서드 안에 넣어준다.
  • 가독성을 높히기 위해 모듈화 할 수 있는 코드를 찾아본다.

✅ TODO 사용자 경험

• API 통신이 실패하는 경우 alert으로 피드백 해준다.
• 중복되는 메뉴는 추가 할 수 없다.

✒️ Step 3 회고

• fetch 를 통하여 웹 서버와 통신할 수 있는 API를 구현할 수 있었습니다.
• fetch 요청 과정을 모듈화하여 처리하는 방법을 배울 수 있었습니다.
• 중복 코드를 줄여가는 리펙터링 과정을 경험 할 수 있었습니다.