[개발일지] who is older?_5

기존 진행된 내용

[게임 진행 간 필요한 데이터를 랜덤으로 가져오는 API 함수 작성]

배열 형태로 데이터를 보존하여 랜덤한 인덱스 값을 구하여 인덱스 값을 기준으로 데이터를 가져온다. 그리고 데이터 중에서 추출된 인덱스의 데이터는 배열에서 삭제하여 이후 진행되면서 기존에 활용된 데이터가 재활용되는 것을 방지하였다.

 

[게임 점수 갱신 구현]

게임 점수를 표기하는 상태가 변경될 수 있도록 이벤트 핸들러 안에 관련된 내용이 구현되었다.

 

최신 진행 내용

[게임 진행 중, 실패하는 경우 end page 로의 이동]

- 게임은 각 라운드마다 진행되며, 라운드에서 플레이어가 정답을 선택하면 다음라운드로 이동한다.
- 이 때, 다음라운드는 전체 페이지가 변동되지 않고 일부 컴포넌트만 변경된다.

- 하지만 라운드에서 오답이 선택된다면 라운드가 진행되는 페이지가 아닌 실패 페이지로 변경되어야한다.

(게임 실행 페이지, 게임 실패 페이지는 동일한 레벨의 컴포넌트이다)

- 현재 react-router-dom을 활용하여 페이지 라우팅을 하고 있는데 end page로 이동하는 방법을 구현에서 약간의 문제가 있었다.

- 기본적으로 별개 라우팅으로 이동하기 위해서는 링크를 설정하고 해당 링크를 클릭하여야 하는데

- 플레이어가 오답을 선택하고 곧바로 라우터로 이동하지 않는다.

- 오답선택 → 5초간 정답 컴포넌트 노출 → 5초후 end page 자동 이동

- 이렇게 클릭 없이 라우트가 변경되는 방법에 대해서 찾아보다가 react-router-dom의 useHistroy hook을 쓰게 되었다.

- 아래 코드와 같이 useHistory hook을 적용하여 설정한 로직에 따라서 순차적으로 화면 구성이 변경되는 것을 구현하였다.

  let history = useHistory();

  // 중략...	
    
  useEffect(() => {
    setTimeout(function () {
      if (result === false) {
        setHeader(true);
        history.push("/end");
        setResult(true);
      }
    }, 5000);
  }, [result]);

 

[게임 다시하기 버튼 구현]

end page 내 게임을 다시 플레이할 수 있는 버튼을 구현하고 점수를 초기화 하도록 설정하였다.

 

[랜덤 API 알고리즘 일부 조정]

게임 데이터를 랜덤하게 로드할 수 있는 랜덤 API의 알고리즘을 일부 수정하였다.

- 기존 :

랜덤하게 선택된 데이터는 임시 메모리에서 해당 데이터가 삭제 ⇒ 한번 사용된 데이터는 삭제

- 변경 :

랜덤하게 데이터를 선택, 선택된 데이터 삭제 x ⇒ 한번 사용된 데이터가 다시 사용될 수 있음

 

남은 예정 사항

- CSS 작업

 

회고점

이번 주까지 진행된 내용을 볼 때, 게임이 진행되기 위한 로직들은 모두 구현이 완료되었다.

따라서 이제 확정적으로 진행될 내용은 CSS작업만 남은 것으로 볼 수 있는데 이렇게 한번에 여러 페이지의 css작업은 진행해본 

적이 없어서 얼마나 시간이 소요될지 예상이되지 않는다.

그리고 생각보다 게임 로직 구현이 빨리된 듯한 느낌이 있는데 추후에 QA를 빈번하게 진행하면서

게임 로직 상 발생될 수 있는 버그들을 수정하는 일정도 고려해봐야 할 듯 하다.