[넘블] 다른 색깔 찾기 게임 제작 챌린지

[넘블] 다른 색깔 찾기 게임 제작 챌린지

결과물

http://numble-color-game.kangjiin.com/

GitHub

https://github.com/kang-jiin/numble-color-game

 

주요코드

타이머

useEffect(() => {
if (time <= 0) {
  alert(`GAME OVER!\n스테이지: ${stage}, 점수: ${score}`);
  setStage(1);
  setTime(15);
  setScore(0);
}

const timer = setTimeout(() => {
  if (time > 0) {
    setTime(time - 1);
  }
}, 1000);

return () => clearTimeout(timer);
}, [time]);

정답과 오답 색 차이

const randomColors  = useCallback(() => {
    let baseR = Math.floor(Math.random() * 256);
    let baseG = Math.floor(Math.random() * 256);
    let baseB = Math.floor(Math.random() * 256);
    let answerR = baseR < 128 ? baseR + (40 - stage) : baseR - (40 - stage);
    let answerG = baseG < 128 ? baseG + (40 - stage) : baseG - (40 - stage);
    let answerB = baseB < 128 ? baseB + (40 - stage) : baseB - (40 - stage);
    return [`rgb(${baseR}, ${baseG}, ${baseB})`, `rgb(${answerR}, ${answerG}, ${answerB})`];
}, []);

 

 

활용 라이브러리

• create-react-app
• typescript
• webpack/babel 관련 패키지

필요한 기능을 구현하기위한 최소의 라이브러리만 사용하고자, create-react-app으로 생성된 프로젝트에서 별도로 추가한 라이브러리는 없다.

build를 위해 webpack과 babel 관련 패키지들을 추가하였고, 각 라이브러리는 여기 포스트에 자세히 설명해두었다.

router설정과 bootstrap을 사용할까 했지만, 꼭 필요한 기능이 아니라 생각해 사용하지 않았다. 추가 기능 구현할 때 사용할 예정이다.

 

어려웠던 점

typescript

타입스크립트를 처음 사용해 초기 프로젝트 세팅만 여러번 진행했다. 타입스크립트에 대한 두려움이 좀 있었는데, 생각보다 쉬운 것 같다가 이렇게 쓰는게 맞는건가 싶기도 했다. 단순히 자바스크립트에 타입을 지정하는 정도로만 사용했는데 더 잘 사용할 수 있지 않을까 자꾸 의문이 든다.

react hook

마찬가지로 react hook도 처음 사용하는 것이라 어려움이 좀 있었다. 기존에 mobx를 이용해 상태관리를 해왔고, componentDidMount, componentDidUpdate, render 등 생명주기 함수에 익숙해져 있어서 기존 지식과 hook을 매칭 시켜가며 개발을 해야했다.

useEffect만 아는 상태로 챌린지를 시작했는데, useMemo/useCallback/useRef 등 hook 함수를 사용해 성능을 향상 시키고자 했다. 시간이 줄어들 때 랜더링이 되는 부분은 깜빡임을 없애는 것은 성공했는데, 랜더 자체를 줄이고 싶은데 아직 해결책을 모르겠다.

 

고민했던 부분

타이머

1초씩 줄어드는 기능을 구현하는 것은 어렵지 않았으나 시간이 0인데도 화면상엔 표시가 되지않고 alert창이 나오는 에러가 있다. 살짝 딜레이를 주면 해결되지만 다른 방법으로 해결하고 싶어 방법을 고민하는 중이다.

색상차이

기능 구현중 가장 많은 고민을 했던 것이 색상 차이를 어떻게 할 것이냐 였다. 처음엔 랜덤색상과 색차이를 보여줄 라이브러리를 찾아볼까 했지만, 챌린지 목적에 맞지 않는듯 하여 직접 구현했다.

RGB를 각각 랜덤값으로 생성하고, 정답은 RGB 각각 (40-스테이지) 만큼 차이가 생기게 했다.

무조건 더하거나 빼도록하면 (0,0,0) 이나 (255, 255, 255)에 가까울 때 의도한 것보다 적은 차이가 나서, 128을 기준으로 작으면 더하기/크면 빼기로 설정했다. 스테이지가 낮을 땐 색차이가 좀 많이 나지만 30 스테이지부터 난이도가 어려워지는 것을 목표로 했기 때문에 원하는 난이도로 구현되었다.

 

마치며

우선 챌린지를 마무리 할 수 있어서 매우 뿌듯하다. 잘하는 사람이 많아 10%는 기대하지 않지만, 내가 원하는 만큼 구현했으니 성공이라 생각한다:)

타입스크립트와 react hook을 공부하려고 생각만 하고 있었는데, 좋은 타이밍에 나에게 딱 필요한 챌린지에 참여할 수 있었다.

화면상 보여지는 것보다 프로젝트 구조와 state에 대해 많이 생각하며 개발할 수 있던 점이 가장 만족스러웠다.

다음에 새로운 챌린지가 열리면 또 한번 해보고 싶다.