JS 문벅스 카페메뉴 앱

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

☕️ 코드리뷰 모임 - Black Coffee

'훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다'.
A.M. 린드버그(미국의 작가, 수필가) -

블랙커피처럼 서로를 자극해주고, 동기부여 해주며, 그 성장과정으로 인해 의미있는 가치를 만들어내고자 하는
개발자 커뮤니티 ☕️ Black Coffee입니다.

🔥 Projects!

🎯 step1 요구사항 - 돔 조작과 이벤트 핸들링으로 메뉴 관리하기

에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입력으로 추가한다.
- 메뉴가 추가되고 나면, input은 빈 값으로 초기화한다.
- 사용자 입력값이 빈 값이라면 추가되지 않는다.
메뉴의 수정 버튼을 눌러 메뉴 이름 수정할 수 있다.
- 메뉴 수정시 브라우저에서 제공하는 prompt 인터페이스를 활용한다.
메뉴 삭제 버튼을 이용하여 메뉴 삭제할 수 있다.
- 메뉴 삭제시 브라우저에서 제공하는 confirm 인터페이스를 활용한다.
총 메뉴 갯수를 count하여 상단에 보여준다.
추가되는 메뉴의 아래 마크업은 <ul id="espresso-menu-list" class="mt-3 pl-0"></ul> 안에 삽입해야 한다.

<li class="menu-list-item d-flex items-center py-2">
  <span class="w-100 pl-2 menu-name">${name}</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>

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

localStorage에 데이터를 저장하여 새로고침해도 데이터가 남아있게 한다.
에스프레소, 프라푸치노, 블렌디드, 티바나, 디저트 각각의 종류별로 메뉴판을 관리할 수 있게 만든다.
- 페이지에 최초로 접근할 때는 에스프레소 메뉴가 먼저 보이게 한다.
품절 상태인 경우를 보여줄 수 있게, 품절 버튼을 추가하고 sold-out class를 추가하여 상태를 변경한다.
품절 상태 메뉴의 마크업

<li class="menu-list-item d-flex items-center py-2">
  <span class="w-100 pl-2 menu-name sold-out">${name}</span>
  <button
    type="button"
    class="bg-gray-50 text-gray-500 text-sm mr-1 menu-sold-out-button"
  >
    품절
  </button>
  <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>

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

링크에 있는 웹 서버 저장소를 clone하여 로컬에서 웹 서버를 실행시킨다.
웹 서버를 띄워서 실제 서버에 데이터의 변경을 저장하는 형태로 리팩터링한다.
- localStorage에 저장하는 로직은 지운다.
- fetch 비동기 api를 사용하는 부분을 async await을 사용하여 구현한다.
- API 통신이 실패하는 경우에 대해 사용자가 알 수 있게 alert으로 예외처리를 진행한다.
중복되는 메뉴는 추가할 수 없다.

📝 API

baseUrl

http://localhost:3000

메뉴 생성하기

method	uri
POST	/api/category/:category/menu

{
 requestBody: {
   "name": "string"
 },
 response: {
   "id": "string",
   "name": "string",
   "isSoldOut": Boolean
  }
}

카테고리별 메뉴리스트 불러오기

method	uri
GET	/api/category/:category/menu

{
  response: [
    {
      id: "string",
      name: "string",
      isSoldOut: Boolean,
    },
  ];
}

메뉴 이름 수정하기

method	uri
PUT	/api/category/:category/menu/:menuId

{
 requestBody: {
   "name": "string"
 },
 response: {
   "id": "string",
   "name": "string",
   "isSoldOut": Boolean
  }
}

메뉴 품절 처리하기

method	uri
PUT	/api/category/:category/menu/:menuId/soldout

{
 response: {
   "id": "string",
   "name": "string",
   "isSoldOut": Boolean
  }
}

메뉴 삭제하기

method	uri
DELETE	/api/category/:category/menu/:menuId

응답 데이터 없음

⚙️ Before Started

로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하는 방법

로컬에서 웹서버를 띄워 html, css, js 등을 실시간으로 손쉽게 테스트해 볼 수 있습니다. 이를 위해서는 우선 npm이 설치되어 있어야 합니다. 구글에 npm install 이란 키워드로 각자의 운영체제에 맞게끔 npm을 설치해주세요. 이후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있습니다.

npm install -g live-server

실행은 아래의 커맨드로 할 수 있습니다.

live-server 폴더명

💻 Code Review

아래 링크들에 있는 리뷰 가이드를 보고, 좋은 코드 리뷰 문화를 만들어 나가려고 합니다.

👏🏼 Contributing

만약 미션 수행 중에 개선사항이 필요하다면, 언제든 자유롭게 PR을 보내주세요.

🐞 Bug Report

버그를 발견한다면, Issues에 등록해주세요.

📝 License

This project is MIT licensed.

07.09 인사이트

함수를 기능뿐만 아니라 return을 사용하여 템플릿을 만들 때에도 사용한다는 것에 익숙해지기
함수안에서 조건에 따라 실행여부 차이를 둔다면 return 사용하기
객체 안에 함수 저장하는 것이 가능하다 화살표함수를 객체 안에 넣는 것은 가능하지만, 이 경우 this 키워드에 주의해야 합니다. 화살표 함수는 자신만의 this를 가지지 않기 때문에, 화살표 함수 내부에서 this를 사용하면 객체의 메서드가 아닌, 상위 스코프의 this를 참조하게 됩니다.

let obj = { greeting: 'Hello, world!', sayHello: () => { console.log(this.greeting); // this는 상위 스코프의 this를 가리킵니다. } };

obj.sayHello(); // undefined가 출력됩니다.

blairMoon / black-coffee