[장바구니 미션 Step 2] 센트(김영우) 미션 제출합니다. #218
Conversation
There was a problem hiding this comment.
안녕하세요 센트!
미션 진행하느라 고생 많으셨습니다!
서버 없이 목킹까지 해가면 작업하시느라 어려우셨을 것 같네요 ㅎㅎ
전반적으로 fetch 중 loading이나 error 처리를 좀 더 고민해보시면 좋겠습니다.
몇가지 신경써야할 부분들 코멘트 드렸으니 확인 부탁드려요.
이번 미션을 진행하면서 상태를 어떻게 관리하는 것이 좋을지 고민을 많이 해보았습니다. 처음에는 장바구니에 담긴 상품 id, 장바구니에 담긴 상품의 수량을 나누어 관리를 했다가 너무 구조가 복잡해져 그냥 하나의 장바구니 정보를 모아서 관리하는 방식으로 변경을 했습니다. 혹시 브콜이 이 미션을 구현한다고 한다면 장바구니에 담긴 상품을 관리하는 상태를 어떻게 관리하실지 궁금합니다!!!
id랑 수량을 따로 관리할 필요는 없어보입니다.
전역 상태라고는 해도 결국 서버에서 오는 값일텐데 서버입장에서 이 두가지를 따로 내려주지는 않을 것 같네요. 그리고 그렇다고 한다면 클라에서도 따로 둘 이유가 더더욱 없어보이구요!
src/hooks/fetch/useCartFetch.ts
Outdated
| const deleteCartItemById = (id: number) => { | ||
| fetch(`/cart-items/${id}`, { | ||
| method: 'DELETE', | ||
| }); | ||
| }; | ||
|
|
||
| const patchCartItemQuantity = (id: number, quantity: number) => { | ||
| fetch(`/cart-items/${id}`, { | ||
| method: 'PATCH', | ||
| body: JSON.stringify({ quantity }), | ||
| }); | ||
| }; |
There was a problem hiding this comment.
delete나 patch를할때는 promise를 반환하지 않나요?
사용처에서 error나 loading처리는 어떻게 하고 있나요?
There was a problem hiding this comment.
delete나 patch는 리코일 상태를 먼저 변경 시키고 그 후 요청을 넣는 방식으로 진행했습니다. 따라서 loading은 따로 처리해주지 않아도 되지만, 오류가 발생했을 떄를 대응하지 않았었습니다. 이를 고쳐보고자 patch시에 오류가 발생하면 오류가 발생함을 alert를 통해 사용자에게 알리고, quantity를 이전 상태로 되돌리도록 처리했고, delete시에 오류가 발생하면 alert를 통해 사용자에게 알린 후 페이지 새로고침을 진행하도록 코드를 수정해보았습니다.
delete 후에 리코일 상태에 다시 add를 해주는 로직을 작성해보려 했으나 한 함수 내에서 상태를 변경했다가 되돌리는 것을 어떻게 할 수 있을지 떠오르지 않아 새로고침을 진행하는 방식으로 코드를 수정해보았습니다. 혹시 이럴 때 브콜은 어떻게 하시나요??
수정한 커밋: f405141
There was a problem hiding this comment.
에러가 있어 데이터를 돌려 놓아야 하는 상황이라면 '현재 서버 상태'를 기준으로 하는 게 맞습니다.
서버에서 에러를 내려줄 때 현재 상태를 payload로 내려주는 방법도 있고, 이게 어렵다면 데이터를 다시 fetch 하거나 새로고침하는 것도 옵션이 될 수 있습니다. UX의 유려함을 위해선 다시 fetch 하는 방식이 좋을 것 같긴하네요
| const deleteCartItem = () => { | ||
| deleteRecoilCartById(id); | ||
| deleteCartItemById(id); | ||
| }; |
There was a problem hiding this comment.
서버에서 delete에 성공했는지는 확인하고 클라이언트의 state를 업데이트해야하지 않을까요? 아래 patch도 마찬가지입니다.
There was a problem hiding this comment.
클라이언트의 상태를 빠르게 변화시킨 후 요청이 나중에 진행되는 것이 더 나은 사용자 경험을 주지 않을까 하는 생각에 코드를 위와 같이 작성했었습니다. 오류를 생각하지 않고 위와 같이 작성했었는데 오류가 발생한다면 어떻게 해야 할지 잘 떠오르지 않네요 혹시 이런 방식을 그대로 가져가면서 오류를 처리한다면 어떤 방식으로 오류를 처리할 수 있을까요..??
|
브콜!! 너무너무너무너무 늦은 리뷰 요청 죄송합니다 ㅠㅠ 협업 미션을 진행하면서 크게 코드 구조를 갈아엎는 작업을 많이 하다보니 리뷰 요청이 늦어져버렸습니다 ㅠㅠㅜ 정말정말 여유로우실 때 리뷰 부탁드립니다😭😭 |
안녕하세요 브콜!! 센트입니다😀😀 이번 장바구니 미션 Step2 리뷰 잘 부탁드립니다👍
미션 제출이 너무 늦어졌네요 ㅠㅠ 죄송합니다🔗 배포 링크: 장바구니 페이지 | StoryBook
🧑💻 기능 플로우 차트 & 구현 방식
🎛️ 기능 구현 방식
이번 Step2에서는 사용자에게 보여지는 화면에 대한 데이터는 recoil로 관리 했고, recoil과는 별개로 fetch가 이루어지도록 기능을 구현해보았습니다. 또한 fetch가 이루어질 때 동작하는 API는 localStorage를 DB처럼 사용해 정보를 저장하도록 구현해보았습니다.
Recoil로 관리하는 데이터는 장바구니에 담긴 상품의 정보들이고, 형태는 localStorage 저장 데이터 cartItems의 스키마와 동일합니다. 장바구니 상품 정보를 사용하는 컴포넌트 내에서 state가 변경될 때 useRecoilCart hook을 사용해 Recoil의 값을 변경 시키고 그와 동시에 useCartFetch hook을 사용해 api 요청을 보내는 방식으로 기능을 구현해보았습니다.
⚙️ localStorage 저장 데이터 스키마
이번 미션을 진행하면서 상태를 어떻게 관리하는 것이 좋을지 고민을 많이 해보았습니다. 처음에는 장바구니에 담긴 상품 id, 장바구니에 담긴 상품의 수량을 나누어 관리를 했다가 너무 구조가 복잡해져 그냥 하나의 장바구니 정보를 모아서 관리하는 방식으로 변경을 했습니다. 혹시 브콜이 이 미션을 구현한다고 한다면 장바구니에 담긴 상품을 관리하는 상태를 어떻게 관리하실지 궁금합니다!!!