이번 시간에는 이 데이터와 장바구니 데이터를 모두
백엔드로 보내보겠습니다
백엔드에서 음식 정보를 가져왔던 방식과 비슷하지만
이번에는 Effect 함수 안에서 작업하지는 않겠습니다
컴포넌트를 가져올 때 이 내용을
굳이 같이 실행시킬 필요가 없기 때문입니다
그 대신에 요청을 보낼 때에
handleSubmit에서 보내야 하므로
이 handleSubmit 함수 안에서
임시 백엔드로 요청을 보내기 위한 함수를
가져오겠습니다
그리고 목표는 /orders로 설정하겠습니다
이것이 임시 백엔드에서 주문 요청을 받는 부분의
상세 경로이기 때문입니다
엄밀히 말하자면 이 경로로 POST 방식의 요청을 보내므로
확인해야 하는 부분은
주문 속성인 요청의 바디에
주문에 대한 상세 정보가 있어야 하고
그리고 이 내용이 객체로서
주문한 장바구니 항목을 포함한 항목 속성을
가지고 있어야 하고
또 결제창 양식에서 작성한 주문자 정보를 포함한
고객 속성을 가지고 있어야 합니다
프론트엔드의 결제 컴포넌트로 돌아가 보겠습니다
이제 이 요청을 외부에서 구성 가능하게 만들어야 합니다
Meals 파일에서는 이 작업을 하지 않았는데
추가 구성 없이 표준 방식으로는
fetch로 이 루트에 요청을 보내기 때문입니다
그러나 이제는 구성이 필요하고
요청 메소드를 get에서 post로
바꾸어야 합니다
그리고 헤더를 더해서
Content-Type 헤더를 추가하겠습니다
이 헤더는 application/json에 설정하겠습니다
이렇게 하면 백엔드에
보내는 데이터가 json 형식 파일이므로
이 방식대로 추출해야 한다는 정보를 줄 수 있습니다
이제는 요청에 대한 이 바디를 설정해서
데이터 추출이 가능하게 하겠습니다
이미 언급한 대로 형식은 json이고
이 형식으로 데이터를 생성하는 것은
빌트인 JSON.stringfy 메소드로 쉽게 할 수 있습니다
이 메소드는 표준 자바스크립트 값을 받아서
json 형식으로 변환해 줍니다
그리고 여기에서 변환된 값은
객체여야 합니다
즉 방금 설명드렸듯이 이 값은
주문 속성을 가지되
이 속성은 중첩 객체를 가져서
항목 속성과 고객 속성을 포함하게 됩니다
고객 속성 안에 있어야 하는 내용은
아까 양식에서 받은 고객에 대한 데이터 객체입니다
이렇게 하면 고객 데이터에 있는
양식 입력 필드를 모두
키와 값 쌍으로 받아올 수 있습니다
여기에서 수정해야 하는 부분이 하나 있는데
앱 백엔드에는 name이라는 필드를 찾는 반면
프론트엔드에서는
이 필드를 full-name이라고 하고 있습니다
이 부분을 name으로 통일시키면
이 데이터를 추출 및 사용하는
백엔드 코드가 정상적으로 작동합니다
즉 이 고객 데이터에서 찾고 있는
모든 필드는 결국
결제 양식에 있었던
양식 필드의 이름이여야 합니다
그 작업을 먼저 하겠습니다
이 부분은 고객 데이터이고
항목에 대해서는 장바구니 데이터가 됩니다
여기에서는
장바구니 컨텍스트에서 가져온 장바구니 항목을 제출합니다
즉 cartCtex.items입니다
이 데이터를 제출하게 됩니다
가장 기본적인 형태로는
이 정도로 작업을 완료할 수 있습니다
하지만 이 요청이
백엔드의 값에 변화를 주기 때문에
여기에서 응답을 기다릴 필요가 없습니다
나중에는 그럴 필요가 있습니다
제출 양식을 닫기 전에
응답이 도착해야 하기 때문입니다
이에 대한 에러도 검토해야겠지만
일단 이 작업이 작동하는지를 학인하기 위해서
이 정도로 요청을 보내도 충분합니다
이 내용이 백엔드에 도달하면
거기에서 데이터가 추출 및 저장될 것입니다
그러므로 여기에서 저장하고
돌아가서 새로고침을 한 후에
장바구니에 항목을 몇 개 담고
결제창으로 넘어가서 정보를 입력하겠습니다
아무 정보나 임의로 입력하면 됩니다
입력을 마쳤습니다
이제 주문서 제출을 누르면
아무 일도 일어나지 않습니다만
동시에 에러가 뜨지도 않습니다
이 화면 뒤에는 네트워크 탭이 있는데
'주문서 전송'을 다시 누르면
HTTP 요청이 잘 보내지는 것을 볼 수 있습니다
엄밀히 말하면 요청이 두 개인데
이것이 POST 방식의 요청이기 때문입니다
이 형식은 언제나 OPTIONS 요청 후에 처리됩니다
여기에 POST 요청도 보내진 것을 볼 수 있습니다
그리고 여기에서
백엔드에서 성공 상태 코드를 받아온 것도 볼 수 있습니다
이제 이것이 작동하는 것을 확인하기 위해
프로젝트로 돌아가서
백엔드 폴더 안에 있는
주문 파일(orders.json)을 보겠습니다
데이터 폴더에 있습니다
이 파일에 임의 주문이 작성됩니다
백엔드에서 이 모든 검증을 거친 주문만이 파일에 쓰여집니다
즉 유효한 데이터를 제출한 경우입니다
여기에서 자동 형식 단축키(auto format shortcut)를 누르면
여기에 주문 두 개가 있는 것을 볼 수 있습니다
두 개인 이유는 제출을 두 번 했기 때문입니다
이제 이 두 개의 주문 객체가 생겼고
각 주문 객체는 항목 배열을 포함하여
주문한 항목, 즉 메뉴와 함께
그 수량도 가지고 있습니다
이에 더해 아까 입력한 주문자 정보에 해당하는 고객 객체도 있습니다
그리고 자동으로 생성되는 주문 ID도 있는데
이 부분은 백엔드에서 생성한 것입니다
즉 이 부분은 잘 작동하고 있습니다
데이터 제출은 작동을 잘 하므로
이론상으로는 여기에서 작업을 끝내도 됩니다
하지만 사용자 경험은 아직 개선이 필요합니다
만약 어떤 오류가 생겨도
에러 메시지가 뜨지 않고
주문 제출을 눌렀을 때
제대로 제출이 되었는지에 대한 피드백도 없습니다
그러므로 이 부분은 개선할 필요가 있습니다
이 동일한 내용은 메뉴 부분에도 적용됩니다
새로고침을 하면 이 메뉴 정보를 가져오지만
그 과정에서 오류가 생기면 어떨까요?
혹은 접속한 인터넷 연결이 느리면 어떻게 될까요?
이 부분은 스로틀링으로 구현할 수 있습니다
이렇게 하면 새로고침을 해도
로딩하는 데에 시간이 꽤 걸립니다
이때 페이지가 모두 로딩되어도
그 후에 한참을 기다려야 음식 메뉴까지
모두 로딩되는 것을 볼 수 있습니다
즉 이제는 프론트엔드 코드가 로딩을 하고 있는데
데이터가 도착할 때까지는 계속
이 빈 화면을 보고 있어야 합니다
그러므로 로딩 정보를 보여주는 스피너(spinner)를 하나 추가해야 합니다
정리하자면 HTTP 요청 관리가
아직 완료되지 않았고
개선할 부분이 조금 있습니다
이 작업을 다음 시간부터 해 보겠습니다