[바닐라 자바스크립트] 요구사항 분석 및 구현 연습 일기

[바닐라 자바스크립트] 요구사항 분석 구현 연습

두 번째 미션

 - 카페의 메뉴판 여러개 만들기
 

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

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

---

step 2. 요구사항 구현을 위한 전략

TODO 로컬스토리지 데이터 저장 및 데이터 불러오기

1. 로컬스토리지에 데이터를 저장한다.

 세부사항
 1-1. 에스프레소 메뉴판을 클릭했을 경우 
  - 메뉴 추가 : 에스프레소 메뉴 이름을 입력하고 확인 버튼을 클릭하면 로컬스토리지에 입력값이 에스프레소 메뉴판에 저장된다.
  - 메뉴 수정 : 생성된 메뉴 이름의 수정 버튼을 클릭하여 메뉴 이름을 수정하면 업데이트된 입력값이 로컬스토리지에 수정되어 저장된다.
  - 메뉴 삭제 : 생성된 메뉴 이름의 삭제 버튼을 클릭하면 로컬스토리지에 저장된 해당 입력값이 삭제된다.
  1-2. 에스프레소, 프라푸치노, 블랜디드, 티바나, 디저트 각각의 메뉴판 클릭시 1.1과 동일
  1-3. 로컬스토리지 저장 {Key: value} 
       key <- 카테고리 이름 : 에스프레소, 프라푸치노 ...
       value <- 메뉴 이름 (배열 형태로 저장)
  

2. 로컬스토리지에 저장된 데이터를 불러온다.

TODO 카테고리별 메뉴판 관리

1. 에스프레소 메뉴판 관리
2. 프라푸치노 메뉴판 관리
3. 블랜디드 메뉴판 관리
4. 티바나 메뉴판 관리
5. 디저트 메뉴판 관리

세부사항
1) 메뉴판 이름에 대한 클릭 이벤트를 등록해준다. (카테리고리 지정 및 각 해당하는 데이터 읽어오기)
2) e.target이 에스프레소이면 로컬스토리지 key = 에스프레소로 저장되어진다.
- 메뉴판 타입이 에스프레소이면 Key = 에스프레소
- 메뉴판 타입이 프라푸치노이면 Key = 프라푸치노
- 메뉴판 타입이 블랜디드이면 Key = 블랜디드
- 메뉴판 타입이 티바나이면 Key = 티바나
- 메뉴판 타입이 디저트이면 Key = 디저트

TODO 페이지 접근시 최초 화면 데이터 read & rendering

1. 에스프레소 메뉴판을 기본값으로 설정하여 최초 화면에 에스프레소 메뉴가 보이도록 로컬스토리지에서 해당 데이터의 메뉴를 모두 읽어온다.
2. 에스프레소 메뉴를 페이지에 그려준다.

세부사항
- 로컬스토리지에 저장된 데이터 모두 꺼내온다.(key,value)
- 메뉴판 각각을 클릭하면 로컬스토리지에 저장되어 있는 카테고리별 메뉴를 모두 꺼내와서 보여지도록 한다.

TODO 품절 상태 관리

1. 품절 상태인 경우를 보여줄 수 있게, 품절 버튼을 추가하고 sold-out class를 추가하여 상태를 변경한다.
2. 품절 상태인 경우 품절 버튼을 그려준다.
3. 품절 버튼을 클릭하면 로컬스토리지에 상태값이 저장된다.
4. 품절 상태인 태그에 sold-out class를 추가한다.

---

step 2 과정에서 배운 내용 및 회고

1. this 키워드가 객체 자신을 가지기 때문에 각 각의 인스턴스가 가지고 있는 상태나 메서드를 객체 외부에서 사용할 때 유용하게 사용할 수 있고 사용하는 방법에 대해 배우게 되었습니다.
2. 상태값의 중요하다는 것에 대해 또 한번 느끼게 되었습니다.
3. 재사용가능하도록 구현하는 방법에 대해 배우게 되었습니다.
4. data-set 사용 및 활용하는 방법에 대해 알게 되었습니다.
5. 객체로 key, value 값을 정의하는 방법에 대해 깨닫게 되었습니다.
6. 코드리팩토링을 통해 가독성 좋은 코드로 나아가기위한 방법에 대해 배우게 되었습니다.