🔗 한끼밀 링크 http://www.hankkimeal.kro.kr
🌈 Intro
장바구니 구현 시, 데이터를 어디에 저장할지 고민이었다. 우선, 한끼밀의 장바구니의 조건은 이러하다.
- 비로그인 사용자, 로그인 사용자 모두 장바구니에 상품을 담을 수 있다.
- 결제는 로그인 사용자만 가능하다.
- 비로그인 사용자가 로그인할 때, 비로그인 장바구니가 로그인 장바구니에 합쳐지고 비로그인 장바구니는 초기화된다.
- 헤더에 장바구니 상품 종류의 개수가 표시되어야 한다.
초기 계획은...
비로그인 장바구니는 세션 스토리지에, 로그인 장바구니는 서버 데이터베이스에 저장할 계획이었다. 하지만 몇 가지 문제가 있었다.
- 로그인 시, 장바구니 추가, 삭제, 수정 시마다 get 요청을 보내야 하는가?
- 비로그인 시, 장바구니 추가, 삭제, 수정 시마다 새로고침을 해야 하는가?
결국 어디에 저장했냐면
기본적으로는 Redux-Persist를 사용하여 리덕스와 세션 스토리지에 저장하고, 서버 데이터베이스에는 로그인 장바구니만 저장하기로 했다. Redux-Persist는 리덕스 스토어의 데이터를 로컬 스토리지 또는 세션 스토리지에 저장하여 데이터를 유지해 주는 라이브러리이다.
Redux-Persist 참고 자료
(Redux-Persist 깃허브) https://github.com/reduxjs/redux-toolkit
(Redux-Toolkit 가이드) https://redux-toolkit.js.org/usage/usage-guide#use-with-redux-persist
아쉬운 것, 그리고 다시 구현한다면
로그인 시, 서버에 데이터가 이미 저장되어 있는데 클라이언트에서도 갖고 있어야 한다는 점이 비효율적이라는 생각이 들었다. 그래서 프로젝트 완료 이후 방법을 고민한 결과, 다시 구현한다면 이렇게 할 것 같다.
- 비로그인, 로그인 장바구니 모두 서버에 저장(비로그인 시 사용자 식별값을 랜덤으로 생성)
- SSE를 사용하여 화면에 실시간 반영
SSE는 Sever-Sent Events로, 클라이언트의 요청 없이도 서버의 업데이트된 데이터를 수신할 수 있는 기술이다. 양방향을 지원하는 Web Socket과는 다르게 서버 -> 클라이언트의 단방향 통신만 지원한다. 하지만 SSE는 HTTP를 통해 전송하므로 별도의 서버 구현이 필요 없고, 장바구니가 채팅 기능처럼 완전한 실시간 스트리밍을 요구하지는 않기 때문에 더 적합할 것 같다.
SSE(Sever-Sent Events) 참고 자료
https://javascript.info/server-sent-events
