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

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

세 번째 미션

 - 웹서버를 띄우고, api를 요청하여 메뉴판을 관리하기
 

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

• 웹 서버를 띄워서 실제 서버에 요청하는 형태로 리팩터링한다.
  • fetch api 사용하는 부분을 async await을 사용하여 구현한다.
  • 서버 통신에서 실패하는 부분에 대해 예외처리를 진행한다.
• 중복되는 메뉴는 추가할 수 없다.

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

TODO 서버 요청

1. 서버에 카테고리에 따라 새로운 메뉴가 추가될 수 있도록 요청을 보낸다.
2. 서버에 카테고리별 메뉴 리스트를 조회하도록 요청한다.
3. 서버에 메뉴 이름 수정을 요청한다.
4. 서버에 메뉴 품절 상태 및 품절 상태가 아닌 상태가 되도록 요청을 보낸다.
5. 서버에 메뉴 삭제를 할 수 있도록 요청을 보낸다.
   

TODO 리팩토링

1. 로컬스토리지에 저장하는 로직은 지운다.
2. fetch 비동기 api 사용하는 부분을 async await을 사용하여 구현한다.

- POST 추가 메서드 : 카테고리별 메뉴 이름 저장 요청하기
- GET 조회 메서드 : 카테고리별 메뉴 리스트를 조회 요청하기
- PUT 수정 메서드 : 메뉴 이름 수정 요청보내기
- PUT 수정 메서드 : 메뉴 품절 상태 변경 요청보내기
- DELETE 수정 메서드 : 메뉴 이름 삭제 요청보내기

TODO 사용자 경험

1. 서버 통신 실패하는 경우에 대해 사용자가 알수 있도록 alert으로 예외처리를 진행한다.
2. 중복되는 메뉴는 추가할 수 없도록 한다.
   

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

1. 요구 사항 구현을 위한 전략을 나누는 방법에 대해 알게되었습니다.
2. HTTP_METHOD를 객체로 만들어서 사용 및 reques 함수 생성으로 코드 리팩토링할수 있는 것을 배울 수 있었습니다.
3. 가독성을 높이는 코드 작성 방법에 대해 배우게 되었습니다.
4. 사용자 경험 및 사용자 관점에서 코드를 작성해야하는 것에 대한 중요성에 대해 배우게 되었습니다.
5. 웹 고향과 웹의 아버지 등 웹에 대해 배우게 되었습니다.
6. 이번 강의를 통해 자바스크립트 기본기를 갖추는 것이 중요하고 요구사항 분석이 중요하다는 것에 대해 다시 한 번 깨우치게 되었습니다.