캔버스 이미지 전송 최적화

• 캐치마인드로 선을 그리는 이벤트를 구현하면서, 마우스로 약 1초간 선을 그리면 약 75번의 마우스 이벤트가 발생하는 것을 확인했습니다.
• 이벤트가 발생할 때 마다 캔버스를 이미지화 시켜서 서버로 보내주는 방식으로 동작했습니다.
• 방에 총 8명의 유저가 들어와 있고, 1초 동안 75번의 이벤트가 발생하고, 이를 서버로 보낸 뒤 다른 7명의 유저한테 이 이벤트를 매번 전송한다면 통신은 약 1초간 총 525번 일어나게 됩니다.
• 각각의 마우스 이벤트가 발생할 때 마다, 서버에 소켓을 전송한다면 이는 클라이언트와 서버 모두에게 부담이 갈 수 밖에 없어서 효율적으로 캔버스에 그린 그림을 전송하는 방법을 고려해봤습니다.
• 해결법으로 디바운싱 기법을 적용했습니다. 마우스 이벤트가 발생할 때 마다, 디바운싱을 적용해 마지막 마우스 이벤트 이후 약 0.1초간 다른 마우스 이벤트가 발생하지 않는다면, 캔버스를 이미지화 시켜 서버로 보냈었습니다.
• 1초 간 캔버스에 선을 그린다고 했을 때, 약 525번의 소켓 통신을 7회로 줄일 수 있었습니다.

const handleDebounce = useMemo(
    () =>
      debounce(imageSrc => {
        socket.emit("catch-mind/image", { round, imageSrc });
      }, 100),
    [round, socket]
  );