실전 프로젝트 - 콜바이네임 게임 구현하기
클론코딩 주차가 끝나고 이제 실전 프로젝트가 시작됐다.
아직 1주일 밖에 안 지났다는게 믿기진 않지만, 이제 게임을 시작하는 부분을 구현해야 한다.
내가 맡았던 부분들은 웹소켓을 적용하지 않는 부분들이었고, 시간이 상대적으로 많은 기간인만큼, 이전엔 해보지 못 했던 디테일을 신경써서 작업을 진행했다.
1. 페이지네이션 구현
첫번째로 신경써서 만들어본 것은 페이지네이션 기능이다.
단순히 <, > 모양의 버튼을 이용해서 좌우로 슬라이드처럼 구현했지만, 내 생각보다 단순하게 일이 풀리지 않았었다.
한정된 개수만 한 페이지에서 보여야해서 api 명세서에 있는 size=int 부분에 int를 그냥 4라고 뒀더니 오류가 생겼었다. 정확히 뭐 때문에 오류가 생겼는진 모르겠지만, limit이라는 값을 두고 limit을 넘기니까 해결됐었다.
- 사용한 코드:
const rooms = useSelector((state) => state.rooms.rooms);
// 1. 리덕스에 저장되어있는 rooms의 정보를 읽어와서 상수 rooms에 대입한다.
const [page, setPage] = useState(0);
// 2. page라는 state를 만들고, 초기값을 0으로 둔다.
const [limit, setLimit] = useState(4);
// 3. 한 페이지에 4개의 방이 보이도록 했기 때문에 전체가 보이지 않도록 limit이라는 state를 만들고 초기값을 4로 한다.
const dispatch = useDispatch();
useEffect(() => {
dispatch(readAllRooms({ page, limit }));
// 4. readAllRooms를 실행할 때 매개변수로 page의 값과 limit의 값을 넘긴다.
}, [dispatch, page, limit]);
------
export const readAllRooms = createAsyncThunk(
'room/readAllRooms',
async (payload, thunkAPI) => {
try {
const response = await instance.get(
`/rooms?page=${payload.page}&size=${payload.limit}`,
// 5. 한 페이지에 4개의 방이 표시되게끔 매변 변경되는 페이지의 값과 고정되어야하는 4라는 값의 limit을 넘겼다.
);
return thunkAPI.fulfillWithValue(response.data);
} catch (error) {
return thunkAPI.rejectWithValue(error);
}
},
);- 페이지의 값이 1이되어도, 2가 되어도 무조건 한 페이지 내부에선 4개의 방이 보이고, 페이지의 값이 올라가면 백엔드는 그 다음 4개의 방 정보를 보내준다.
- 지금보면 간단한듯 하지만, 한번도 해보지 않은 기능에 대해서 생각하고 검색하니 생각보다 시간이 많이 걸렸다.
- 특히 초반에 시작 페이지의 값을 1이라고 했는데, 처음 4개의 방이 누락되고 표시되었었다. 왜 0부터 시작해야 하는지 다시 한번 생각해봐야겠다.
2. 모달과 토스트 메세지 만들기
새로 만들어본 것 들 중 하나는 모달과 토스트 메세지였다.
그 동안은 시간이 없어서 alert() 만 활용해서 메세지를 띄웠는데, 실전 프로젝트는 더 신경쓸 수 있으니 새로운 것을 시도해봤다.
토스트 메세지의 경우, 실제로 setTimeout()을 활용해본 첫번째 예시가 되었다.
- 모달과 토스트 메세지 작성 자세한 후기 게시글: (링크)
3. 레전드 실수
실수라는 건 원래 매번 했던거지만, 이번 실수는 조금 더 바보같은 실수였다. 뭔가 급하게 만들어야 한다는 생각에 실수 했던 것 같고, 막상 하다보니 내 생각보다 3주라는 시간은 짧지 않았다.
그래서 조금 더 마음을 풀고 꼼꼼하게 실수를 챙길 수 있는 여유를 갖고 프로젝트를 진행하기로 했다.
특별히 바보 같았던 실수 모음:
-
enterRoom ()함수 만들기 실수-
만들어진 게임 방에 들어갈 때, 평소 하던거처럼 그냥 < Link >만 걸어도 된다고 생각했었다.
동일하게useParams()를 활용해서 특정 방의 id 값을 구한 후 이동하게 만들었는데, 생각치도 못 한 문제가 생겼다.- 일단, 멤버 수를 count하기 위해서 서버에 누가 어떤 방에 들어가는지 전달해야했다.
- 그래서 백엔드에게 물어보기 전에 혹시나 싶어서 확인해보니 이미 api 명세서가 생겨있었다.
-
개발에 몰두하다보니 api 명세서가 업데이트 되었을 때 바로바로 확인하지 않았었다.
- api 명세서를 제대로 안 읽어서 생기는 문제가 종종 있었는데 아직도 실수하다니 ㅠㅠ
- 그래서 이 이후로 아예 화면 옆에 명세서를 켜놓고 작업을 진행하고 있다.
-
-
함수 무한 호출하기
- 그냥 평범하게 작업을 하던 도중, 갑자기 화면이 하얗게 되더니 콘솔에 무한 렌더링이 일어나다 call stack이 터져버렸었다.
대체 뭐가 문제인가 싶어서 여기저기 찾아봤는데 도저히 문제를 찾을 수 없었다.
꽤 한참 해메다 발견한 게... 함수의 이름이 중복되었던 것...- slice 파일에 있던 함수의 이름과 버튼 클릭했을 때 불러지는 함수의 이름이 동일했다.
- slice 파일에 있던 함수가 버튼 클릭 시 일어나는 구조였는데, 함수의 이름이 동일하다보니 함수 안에 해당 함수를 다시 호출한 격... 너무나도 당연하게 함수가 무한대로 실행되었다.
- 정신을 어디에 두고 있었는지 😁 시간 허비가 웃겨서 허탈하게 웃었다. 그래도 뭔가 갈아엎어야 하는 실수가 아니어서 다행이라는 생각이 들었다.
- 그냥 평범하게 작업을 하던 도중, 갑자기 화면이 하얗게 되더니 콘솔에 무한 렌더링이 일어나다 call stack이 터져버렸었다.
1주차는 아직까지 기술적으로 굉장히 challenging 하진 않았다.
아직 웹소켓을 사용하는 부분에 참여하지 않은 것도 있겠지만, 그래도 그 동안 프로젝트를 구현하면서 약간의 지식과 검색 능력이 상승돼서 그런 듯 하다.
아마 이제 게임방에 들어가서 게임 관련된 로직을 만지는 다음 주차가 어렵겠지... 그래도 어찌어찌 잘 할 수 있을 것 같다!
