TIL 72. 2024-04-12

🐱TroubleShotting🐱

1. 
[상황]
- 기존 livekit에서 제공하는 여러 hooks를 활용하여 캠 및 마이크 등 미디어 장치를 관리하였다.
- 마피아 게임 로직에 맞게 재사용할 수 있는 커스텀 hook으로 개편

[문제]
-useEffect 내부에서 사용되는 socket으로 인해 커스텀 hooks를 직접 사용할 수 없는 상황이 발생 
-hook 자체는 컴포넌트 최상위 루트에 존재해야하므로 useEffect내부에서 사용할 수 없다.

[해결]
-기존) livekit hooks에서 제공하는 특정 user에 대한 미디어 장치를 가져오는 로직에서 현재 방에 존재하는 모든 유저의 정보를 가져와 서버에서 전송받은 특정 userId값을 비교하여 미디어 장치를 찾는 방법으로 문제를 해결하였다.

2.
[상황]
-투표 시간에 유저의 캠을 클릭하여  user의  ID값을 서버에 전송 하는 로직을 구현
-투표 시간이 끝난 시점을 기준으로 마지막으로 클릭한 user의  ID값을 서버에 전송
[문제]
-useEffect 의존성 배열에 state값을 넣어 변화되는 userId값을 update시켰지만 setTimeout함수 자체도 update되어 타이머 또한, 초기화 되는 현상이 발생하였다. 또한, setTimeout 함수를 활용하여 시간을 작동하였지만 setTimeout은 실행된 시점을 기준으로 state의 값을 갖고 있으며 변화되는 state 값을 인지하지 못하는 문제가 발생하였다.
[해결]
useRef에 boolean값을 주어 setTimout함수를 한번 만 작동하게끔 만들었으며,  기존 setTimout 안에서 처리하려던 state값을 새로운 조건문 안에 넣어 setTImeout이 종료되었을 때 시작하게 만들어 해결하였다.