실시간 데이터를 원해 ❗

<aside> 💡 해당 수련일지에서는 서버에서 관리되는 **서버 상태**의 관리에 대한 얘기를 다루고 있습니다.

실시간으로 데이터를 주고 받는 기술은 어떤 것을 사용할 지에 대한 고민이 있었고, Socket과 Polling방식을 비교하여 의사 결정을 어떻게 했는지에 대한 얘기도 다루고 있습니다.

최종적으로 React Query를 활용하여 Polling방식으로 구현했으며 React Query에 대한 얘기는 해당 일지에서 다루고 있지 않습니다.

해당 이야기가 궁금하시다면 목차에서 **관련 일지**로 넘어가 확인하실 수 있습니다.

</aside>

❓어떤 실시간 데이터가 필요할까?

저희 서비스는 고객이 주문을 하면 업주측에서 주문을 확인하고 상태를 변경할 수 있어야 합니다.

업주는 실시간으로 새로운 주문이 들어오는 것을 알아야 하고, 고객은 실시간으로 주문의 상태가 변경되는 것을 감지할 수 있어야 합니다. 따라서 저희 서비스에서 관리해야 할 실시간 데이터는 업주에게는 새로운 주문, 고객에게는 주문의 상태로 정의할 수 있습니다.

<aside> 💡 기능 영상

</aside>

❓어떻게 구현할 건데?

저희 팀에서 실시간으로 데이터를 주고받는 기술로 고려했던 것이 Socket과 Polling방식입니다.

HTTP - AJAX - Socket으로 이어지는 통신의 역사를 비롯하여 Socket의 장단점, Polling 방식의 장단점을 조사해보고 비교하여 더 나은 것을 서비스에 적용하기로 했습니다.

Socket vs Polling

Socket

기존 HTTP를 통해서 서버로부터 데이터를 가져오기 위해서는 클라이언트의 요청이 필수적이었습니다. 이는 사용자와의 인터랙션이 많고 그에 따라 데이터를 쉴 새 없이 빠르게 변화시키는 현재 웹 서비스 트렌드에 맞지 않았습니다.

<aside> 💡 변화한 데이터를 다른 사용자가 보기 위해서는 서버에 새로운 요청을 보내야 하기 때문이죠

</aside>

이 흐름에 발맞춰 HTML5 버전이 나올 때 소켓이 함께 등장합니다. 소켓은 기존 HTTP 통신과 다르게 클라이언트의 요청이 없어도 데이터를 내려줄 수 있는 기술입니다.