문제 정의
장바구니가 느리다!
프로젝트 내 장바구니 기능에 대해 부정적인 피드백 중 공통된 피드백은 장바구니가 느리다! 라는 의견이였습니다.
다수의 피드백을 받았고, 개발자 본인도 문제를 인식하고 있음에 해당 이슈에 대해 트러블슈팅을 작성하게 되었습니다.
정확히 어떤 부분이 느릴까?
1.
장바구니에 상품을 추가해도 바로 적용되지 않고 짧은 딜레이 후 장바구니에 상품이 추가된다!
2.
장바구니에서 구매할 상품의 옵션(수량, 사이즈)을 변경하면 바로 적용되지 않고 딜레이 후 상품의 옵션이 변경된다!
3.
장바구니 내의 상품을 삭제할 때, 바로 적용되지 않고 딜레이 후 상품이 삭제된다!
단순히 반응이 느린것만 문제일까?
UI가 유저의 인터랙션에 따라 반영되는게 느리다! 라는 문제만 존재한다면 그렇게 심각한 이슈는 아니지만,
실제 주문 페이지에서 주문을 하려고 해도 장바구니에 추가한 상품이 적용되지 않는 현상도 발생합니다.
유저의 입장에서는 "어? 나는 장바구니에 분명 상품을 추가했고, 이 상품을 주문하려고 했는데 왜 반영이 안되어있지?" 혹은
상품 내역을 정확히 확인하지 않는 유저의 경우에는 내가 선택한 제품을 구매하지 못하는 최악의 상황을 맞이할수도 있습니다.
따라서 단순히 UI가 변경되지 않는다! 라는 이슈보다 더 심각한, 하나의 거대한 버그라고 인지하고 해당 버그를 수정하고자합니다.
문제 원인
항상 서버와 통신하는 장바구니
이슈를 파악해본 결과 원인은 굉장히 단순하였습니다.
바로 장바구니에 상품을 담거나, 수정, 삭제할 경우 항상 서버와의 통신이 일어나고 있었다는 점이였죠.
항상 서버와의 통신으로 인해 UI에 반영되는 속도가 늦어지고,
서버와의 통신이 일어나고있는 도중 주문을 하려고 했을때,
즉, 서버에 새로운 상품의 정보를 장바구니에 추가하려고 하는 도중 주문을 하려고 주문 페이지로 넘어가게되면
주문 페이지에서는 최신 장바구니를 반영하지 못한 이전의 장바구니 내역을 보여주고, 결제까지 진행하게 되는 것이죠.
고민 내역
1. 서버와의 통신이 완료될때까지 유저의 행동을 제한한다.
서버와 통신하는 시간동안 UI에는 로딩 스피너와 같은 UI를 표시해주고, 서버와의 통신이 완료될때까지 유저가 다른 행동을 하지 못하게
클라이언트에서 행동을 제한할 수도 있을 것 같습니다.
실제로 이런 솔루션을 사용하고있는 이커머스 사이트는 쿠팡이 있습니다.
쿠팡은 장바구니에서 무언가를 수정, 삭제할 때 구매하기 버튼을 disabled 시켜 유저로부터 하여금 서버와의 통신이 종료될때까지
주문 페이지에 가지 못하도록 제한하고 있습니다.
2. 매 수정마다 서버와 통신하지 않는다.
서버와 통신하는 시간이 문제라면, 서버와 통신하는 부분을 없애버릴수도 있겠다는 생각이 들었습니다.
물론 아예 유저의 장바구니 정보가 DB에 저장되지 않는것은 아닙니다.
먼저 장바구니에서 일어나는 추가/수정/삭제와 관련한 부분은 로컬 스토리지에 정보들을 저장한 뒤,
저장된 정보들을 장바구니가 언마운트 될 때, 즉 사이트의 이동이나 유저의 액션이 일어났을 때 DB에 저장을 해주는 것입니다.
하지만 위 방법도 결국에는 서버와 통신하는 시간이 필연적으로 발생하게 되고, 로딩 중이라는 UI는 공통적으로 표현해주어야 합니다.
또한 위 방법으로 문제를 해결하였을떄의 발생할 이슈는 사용자가 브라우저를 종료하였을때에는 React가 언마운트를 감지하지 못하여
창을 강제종료하였을때는 저장이 되지 않는다는 점입니다.
❗️ 문제 해결
기존 로
로그인 상태
장바구니 페이지 마운트
→ 해당 유저의 기존 장바구니를 가져와 setState()
→ 매 수정이 일어날때마다 DB에 장바구니 정보 저장
비로그인 상태
장바구니 사용 불가능
변경된 로직
로그인 상태
유저 로그인 시 해당 유저의 기존 장바구니를 가져와 로컬스토리지에 저장
장바구니 페이지 마운트
→ 로컬스토리지에 있는 장바구니 정보를 가져와 setState()
→ 매 수정이 일어날때마다 로컬에 장바구니 정보 저장
→ 장바구니 페이지 언마운트 시 DB에 해당 유저 장바구니 정보 저장
비로그인 상태
장바구니 정보를 로컬스토리지에 저장
만약 유저가 로그인 시,
로컬스토리지에 있는 상품 + DB에 있던 유저의 기존 장바구니 정보
로컬스토리지를 적극적으로 활용하면서
1.
기존 장바구니가 느리다는 피드백을 개선
2.
추가하거나 수정, 삭제한 제품이 주문 시 포함되는 이슈 해결
3.
로그인을 하지않은 유저도 장바구니를 사용할 수 있도록 개선
이 되었습니다.