Ice Craft Project 해석
Main Plage
- 방생성, 입장, 빠른, 시작하기 버튼 클릭 후: “joinRoom, fastJoinRoom” 실행하여 방 경로로 이동
- useGetRoomsSocket을 분리
- Rooms 데이터를 전달해주는 socket
- 입장할 경우 처리해주는 socket (joinRoom, fastJoinRoom)
- 리-렌더링 3번 발생
- Socket.emit("enterMafia", 0, 20);
- useEffect 내부에서 checkUserInfo()를 통해 userId, usernickname을 전역 setState( useConnectStore)저장 및 변경된 state값을 선언하여 사용하므로 발생
- setState( useConnectStore)저장에 이어, 세션 스토리지 저장으로 인해 발생
—————————————————————————————————————————————————————————————————————
-
처리 해야하는 부분
-
MainPage 접속 시 socket.connect()를 계속 실행
- 변경: 처음 socket 연결 이후 Error 발생 시에만 socket.connect() 실행
- 클릭 이벤트를 커스텀 훅으로 변경하기
-
이유: “입장하기, 빠른입장, 시작하기, 방생성” 등 로그인 유무를 확인하는 동일 유효성검사가 존재하며, socket.emit을 통해 서버에 전달해야하는 요소인 “usreId, nickname” 동일하게 적용되어 하나의 지역 state값으로 유지하여 사용하기 위함이며 또한, 관련있는 여러 클릭이벤트를 하나의 커스텀 훅으로 관리하면 가독성이 높아지기 때문이다.
- 방 리스트 컴포넌트로 분리
-
이유: 게임 특성상 방 리스트의 변화가 자주 일어나므로 리스트와 관련없는 컴포넌트가 리 렌더링될 필요가 없으므로 분리
-
또한, 게임 특성상 짧은 주기로 리스트를 다시 보여줘야 하므로 새로고침 시마다 계속 서버에 요청해야한다.
- 방 입장 버튼 클릭 후 새로고침 시 방에 접속되진 않지만 방의 player 수는 증가
- 새로고침 시 Exit socket Event를 발생시켜 방 나가기 처리
—————————————————————————————————————————————————————————————————————-
1. Server에서 전달해주는 값
- joinRoom(roomId, userInfo)
- fastJoinRoom(roomId, userInfo)
—————————————————————————————————————————————————————————————————————-
1. Supabase getUser(), getSession()
- 사용: 버튼 클릭 시 유효성 검사 부분에서 사용
- 두 메서드의 차이
- 로그인된 정보를 안전하게 확인하기 위해서는 getUser() 사용
- 로그인된 유무를 빠르게 확인하기 위해서는 getSession() 사용
- 공통점: 서버에서 데이터를 가져오는 게 아닌 세션(쿠키)에 jwt 형태로 저장된 로그인 정보를 가져온다.
- Jwt 토큰: 로그인 시 쿠키에 자동 저장된다.
변경 해야하는 부분)
-
버튼 클릭 후 로그인 유무를 확인하는 함수에서 retrun값이 boolean이 아닌 userId, usernickname값 전달 받기
-
이유: 방 입장 시 userId, usernickname이 필요한 상황에서 세션에 저장된 로그인 정보를 사용하기 위해서
현재 로그인 정보를 메인페이지 접속 시마다 getUser()를 통해 데이터를 받고 있으며, 입장하기 버튼 클릭시 getUser()를 통해 로그인 유무를 확인하고 있다.
두 번의 getUser()를 사용할 필요없이 결국 입장할 때 getUser()를 통해 로그인 유무를 확인하면서 로그인된 정보를 받아 한 번에 처리할 수 있기 때문이다. -
방 입장 후 livekit에 userId, usernickname 값은 getUser()를 사용하여 로그인 정보 가져오기
비동기 통신이라 해서 무조건 서버와의 통신에서만 사용하는 게 아닌 지금처럼 특정 값을 얻고 그 다음 로직에서 값이 필요한 로직일 경우에도 사용한다.
위의 getUser(), getSession() 관련 문서
