[Numble] React 다른 색깔 맞추기 게임
챌린지 소개
해당 챌린지는 react를 이용하여 다른 색깔 맞추기 게임을 구현하는 것이다. 자세한 내용은 Numble 챌린지에서 확인하면 된다. 우연히 개발 커뮤니티를 보던 중 이러한 챌린지가 있는 것을 확인하고 친구와 함께 지원하게 되었다. 여기서 얻고자 하는 목표는 명확하다. 내가 구현한 코드로 10%에 들 수 있는 지? 이것을 확인하고 싶고 든다면 상위 10%의 팀원들끼리 할 수 있는 챌린지를 해보고 싶다.
구현 코드 및 설명
우선 필자의 코드는 여기서 확인할 수 있다. 구현 결과는 여기서 확인 가능하다.
우선 크게 메인 코드 App.tsx, reducer 작업을 하는 reducer.ts, timer를 계산하기 위한 custom hook useInterval로 있다. 각 중요한 로직에 대해 간단하게 설명을 해보려고 한다.
◆ App.tsx
1. reducer 사용 이유
state로 해도 되지만 다루어야 할 값들이 너무 많아 reducer로 하는 게 관리하기 편하다고 생각하여 reducer를 사용하였고, 상황에 따라 dispatch를 이용하여 값을 변경해주었다.
2. useEffect에서의 setTimeout
useEffect에서는 time이 0초 이하인 경우 게임을 종료시킨다. 이때 alert을 사용하기 때문에 렌더링이 안되는 것을 방지하여 0초를 주어 렌더링 후 alert이 표시되도록 하였다.
3. gridCount 및 게임판 렌더링
필자는 챌린지 예시를 보자마자 grid로 해야겠다는 생각을 하였다. 그리고 규칙을 찾아 gridCount 계산하였다. 그리고 게임판 렌더링은 list가 총 개수이기 때문에 해당 개수만큼 배열을 만들어 map으로 그려주었다.
◆ reducer.ts
해당 파일에서는 reducer에서 사용하는 함수, dispatch 함수, type, interface 등을 모두 선언해주었다.
1. 색상 구현
조건이 stage가 올라갈 때마다 정답과 오답의 색상 차이가 줄어들어야 한다. 따라서 %로 값을 조정해주었다. 33 stage 이하인 경우는 b의 값도 추가로 조정해주었다. 사실 33 stage까지 갈 수 없다고 생각되어 큰 문제는 없을 것으로 보인다.
2. reducer
reducer의 action은 개발자가 실수하지 않게 모두 위에 선언해주었다. 그리고 해당 action을 switch로 분기하여 각각에 맞는 처리를 해주었다.
◆ useInterval
1초씩 감소하는 것을 따로 hook으로 만들어서 사용한 이유는 불필요한 렌더링을 줄이기 위함이었다. 위 코드대로 하지 않고 App.tsx에서 setTimeout, clearTimeout / setInterval, clearInterval 을 직접 사용하며 useEffect unmount 시점에 console을 찍어보고 위 코드에서도 동일 시점에 console을 찍어보면 차이점을 알 수 있을 것이다.
챌린지 아쉬운 점
해당 챌린지를 준비(?)하면서 아쉬웠던 점이 있었다. 우선 해당 챌린지 설명이 틀린 부분이나 설명과 예시로 보여준 결과물이 다른 경우가 있었다. 수정 요청해서 받아드린 것은 다음과 같다 사각형 개수(공식), score 계산 방법(공식), score 계산 누적. 그리고 추가적으로 0초인 경우 종료하는 것이 부자연스러워 추가로 문의하였다 (0초에 선택하여도 통과되는 경우가 있음). 필자는 그냥 조건대로 0초되면 종료되는 것으로 구현하였다. 이러한 자잘하게 틀린 설명과 설명과 다른 구현 내용이 아쉬웠다. 그래도 채팅으로 여쭤보면 대부분 빠른 시간 내에 확인하고 수정 후 반영해주어 피드백은 정말 빠른 것 같아 좋았다.
마지막
간단하고 재미있게 구현할 수 있어서 좋았다. 그리고 github page로 배포도 처음 해보았는데 이러한 공부를 하는 것도 좋았다.
