TIL 76. 2024-04-18

Task TODOLIST

• 기존 supabase 통신 부분을 socket IO로 로직 변경
• 유저의 무분별한 클릭에 대비하여 버튼 활성화 및 비활성화 로직 구현

✨ 개발 내용

socket IO를 사용하였으며 socket.emit("createRoom", roomTitle, selectedGame, numberOfPlayers); 로직을 실행하여 아래의 socket.on("createRoom", ({ room_id }을 전달 받아 socket.emit("joinRoom", userId, room_id, nickname);을 실행하였다.

  useEffect(() => {
    socket.on("createRoom", ({ room_id }) => {
      roomId.current = room_id;
      socket.emit("joinRoom", userId, room_id, nickname);
    });
    socket.on("createRoomError", (message) => {
      console.log(message);
      isGoInClick.current = false;
    });
    socket.on("joinRoom", () => {
      if (roomId.current) {
        setRoomId(roomId.current);
        setIsModal(false);
        router.push(`/room/${roomId.current}`);
      }
    });

    socket.on("joinRoomError", (message) => {
      alert(message);
      isGoInClick.current = false;
    });

    return () => {
      socket.off("createRoom");
      socket.off("createRoomError");
      socket.off("joinRoom");
      socket.off("joinRoomError");
    };
  }, []);

TroubleShotting

사용자의 무분별한 클릭을 방지하기 위해 setTimeOut() 메서드로 일정 시간동안 버튼을 막으려고 하였으나 기능에 비해 코드량이 방대해져 다른 방식을 찾게 되었고 <button> 태그 자체에 disabled라는 속성을 찾아  true(비활성화) 및 false(활성화) 로직으로 변경하였다.

 <button disabled={isGoInClick.current} >