이번에 프로젝트에서 맡은 파트가 주문 API와 front 부분이다.
현재 백엔드와 프론트 연결은 전부 구현하였고, 이를 문제가 있는지 다시 보고 있는 상황
문제
- 상세 페이지에서 남은 수량을 드롭 다운 방식으로 보여주고 있음
- 데이터베이스에서 10개가 있고, 현재 주문으로 들어간 것이 6개면 4, 3, 2, 1 이렇게 보여주는 상황
- 여기에서 브라우저를 2개 켜놓고 같이 상세 페이지로 간다면 두 브라우저 모두 남은 수량을 4로 보여주고 있음
- 이 때 한 브라우저 창에서 4개를 주문한다면 다른 브라우저는 매진을 표시해야함
- 이 방법을 어떻게 프론트에 표시할 지가 문제
시도
- fetch를 사용해서 현재 보여주고 있기 때문에, 초 단위로 서버에서 클라이언트에 보내주고, 이를 ajax를 통해서 드롭 다운의 데이터만 바꿔주면 될 것으로 보임.
- 하지만 이것은 서버 리소스가 많이 들고 필요 없는 상황에서 주기적으로 계속 데이터를 보내주는 것은 많은 낭비가 있을 것으로 예상
- 다른 방향을 찾아서 이벤트가 발생했을 경우 (남은 수량이 줄어드는 경우) 에만 데이터를 상세 페이지에 보내 다시 보여주는 것이 맞을 듯
- 이 때에도 화면을 새로고침하는 것이 아니라, 원하는 부분 (드롭 다운으로 남은 수량 확인하고 주문 수량 선택하는 부분) 만 바뀌도록 해야함
- 구현은 일단 더 공부해보고 결정해서 해야할 듯
해결
- 아직 해결한 것은 아니고, 어떤 기술을 사용해서 구현할 지 결정
- 여러가지 방법들이 있었는데
- Short Polling : 클라이언트가 주기적으로 서버로 요청을 보내는 방법
-> 실시간성이 중요하다고 판단하여 기각 - Long Polling : 요청을 보내고 서버에서 변경이 일어날 때까지 대기
-> 서버로부터 응답을 받고 나면 다시 연결 요청을 하기 때문에, 여러 유저가 접속하면 빈번하게 데이터가 바뀔 것으로 예상되어서 리소스가 많이 들 것으로 예상, 기각 - 웹 소켓 : 양방향으로 (서버 <-> 클라이언트) 데이터 전달 가능
-> 보류 - SSE : 단방향으로 (서버 -> 클라이언트) 데이터 전달 가능, 웹 소켓보다 가벼움
-> 보류
=> 일단은 이렇게 해서 웹 소켓이나 SSE 중에서 선택하고자 하여 SSE를 우선적으로 구현해보고자 함 (웹 소켓보다 가벼운 기술이라서 리소스 낭비도 적을 것으로 예상되고, 현재 서버에서 클라이언트로 단 방향으로만 보내면 되는 상황에, 시간 단위가 아니라 이벤트 단위로 데이터를 보내는 것이 좋을 것으로 예상)
=> 다만 SSE는 웹 소켓의 하위버전 같은 느낌이여서 많은 유저가 접속하는 상황이면 제대로 안 될 수도...
=> 이 경우에는 나중에 문제 있으면 웹 소켓으로 바꾸어 보자.
조금 더