Numble '다른 색깔 찾기 게임 제작 챌린지' -1 (개발순서, 컴포넌트 구조, 카운트다운 로직구현)

우연히 넘블(Numble)이라는 사이트를 알게 되었다.
혼자서는 정신력 문제 때문에(...) 진행하기 어려웠던 개발자 개인 프로젝트를 주최 및 운영하는 곳이었다.
참가비는 1만원인데, 결과물을 성공적으로 제출하면 환급 받는 시스템이다.

프론트엔드 개발자를 위한 '다른 색깔 찾기 게임' 제작 챌린지가 마침 모집 중이어서 참가하기로 결정!

---

넘블의 이번 프론트엔드 프로젝트에서는 다른 컬러 찾기 게임 클론 코딩으로,

아래화면과 같은 게임을 완성하는 것이 목표이다.

 

나는 React, typescript, styled-components를 사용하여 과제를 해결하기로 했다.

 

 

게임의 동작 방식과 룰을 파악한 뒤, 어떤 순서로 구현해나갈지 계획을 세워봤다.

 

어떤 순서로 구현할까?

• [ 1 ] 스테이지 및 시간 카운트 기능 구현
• [ 2 ] 스테이지 별로 빙고판(cell) 개수 맞춰 나오게 하기
• [ 3 ] cell에 하나만 다른 색깔 넣기 (스테이지 올라갈수록 색 차이가 적어야 함)
• [ 4 ] 버튼 클릭 시 시간 카운트 -3초 기능
• [ 5 ] 정답 맞추면 점수플러스, 스테이지 넘어가게 + 오답누르면 -3초 되게 연동

 

 

컴포넌트 구조

App/index.tsx가 모든 상태를 담고 있고, 그 안에 Status, Board, Fail 컴포넌트를 품고있도록 했다.

 

 

- Status.tsx : 남은시간, 레벨, 점수를 보여주는 컴포넌트

- Board.tsx : 색상을 선택하는 빙고판

- Fail.tsx : 실패 시 보여주는 컴포넌트. 예제에서는 alert로 구현되어있었지만, alert를 끄면 바로 강제 재시작해버리는 게 불편해 컴포넌트로 따로 구성했다. '다시하기' 버튼이 들어있다.

 

 

최상위 컴포넌트인 App/index.tsx는 성공여부, 남은시간, 레벨, 점수를 모두 알고 있는 컴포넌트다.

뭔가 이렇게 한꺼번에 다 담고있는게 지저분해보일 듯 하지만... 나중에 리팩토링 하기로 하고,

제일 먼저 카운트다운 기능을 만들어본다.

 

카운트다운 기본 동작

  const [second, setSecond] = useState(INITIAL_TIME);

  useEffect(() => {
    const countDown = setInterval(() => {
      if (second > 0) {
        setSecond(second - 1);
      } else {
        setIsSuccess(false);
        clearInterval(countDown);
      }
    }, 1000);

    return () => clearInterval(countDown);
  }, [second]);

 

 

useEffect 안에 setInterval 함수를 만들어 넣었다.

useEffect의 의존성 배열에는 second를 넣어주었기에 second가 바뀔 때마다 실행되는 함수이다.

 

setInterval이란 아래와 같은 구조를 가지는 자바스크립트의 기본 내장 함수로,

일정한 시간 간격으로 작업을 수행하기 위해서 사용한다.

setInterval(handler, 시간)

 

내 코드에서는 setInterval 함수 안에 if문을 사용하여

second가 0보다 클 때는 1씩 빼나가고,

0이 아닐 때(=게임오버 되는 순간)에는 isSuccess를 false로 바꿔주고 clearInterval을 한다.

 

clearInterval 은 setInterval 로 설정한 작업을 취소하는 역할을 한다.

 

 

위와 같이 잘 동작하는 타이머 기능이 완성되었다.

 

  return (
    <div className="App">
      {isSuccess ? (
        <>
          <Status second={second} stage={stage} score={score} />
          <Borad />
        </>
      ) : (
        <Fail handleInitialize={handleInitialize} />
      )}
    </div>
  );

return에서 현재 상태가 isSuccess인지 판별하여 상황에 따라 다른 컴포넌트를 렌더링하도록 하였다.

남은시간이 0이 되면, 아래 화면으로 넘어가게 되는 것!