WHO IS OLDER? (5)

 

 

매일 1 ~ 2시간 정도씩 프로젝트를 진행하다보니 하루동안 정리할 게 많지 않고, 진행 상황을 하나의 글 안에 보는 것이 흐름 파악에 더 용이할 것이라 생각이 들어 3일치 모아 업데이트 합니다. 필수적인 기능 구현은 마무리했고 아마 다음 주쯤이면 CSS까지 거의 다 완성되지 않을까 합니다ㅎㅎㅎ

 

 

10 / 13 (Wed)

Play 

게임 진행 상황을 스크롤 없이 한 페이지 안에 볼 수 있도록 flex 사용

정답을 클릭한 경우 useState(setScore)를 사용하여 점수 +1

게임을 시작한 직후의 경우(score = 0)를 제외하고

setTimeout을 사용하여 delay 시간만큼 각 인물이 언제 태어났는지를 보여준 후 다음 라운드로 넘어가도록 구현

 

 

 

10 / 14 (Thu)

People

유저가 이미지를 한번 클릭함으로써 하나의 라운드가 끝났음에도 다음 라운드로 넘어가기 전까지 클릭한 횟수만큼 score가 올라가는 문제 해결

삼항연산자 사용하여 header의 Boolean 값에 따라 onClick 이벤트 적용 달리 하게 함

 

Play 

게임 시작한 직후와 아닌 경우로 나누어 setTimeout의 delay에 삼항연산자를 적용함으로써 중복되는 코드 간결화

 

End 

App 컴포넌트에서 End 컴포넌트로 props를 통해 score 값 전달

 

오답을 클릭한 경우 End 컴포넌트로 넘어가도록 Hook의 일종인 useHistory 사용 예정

 

 

 

10/15 (Fri)

Play

useEffect를 두 번 사용해서 맞았을 경우와 틀렸을 경우로 나누어 기능 구현

틀렸을 경우 useHistory 사용하여 header와 result 초기화 및 End 컴포넌트 이동

 

Button

End 컴포넌트에서도 사용되는 score는 Play 버튼을 클릭 시에 초기화

handlePlayClick 함수 구현 후 onClick 이벤트 적용

 

randomApi

중복방지를 위해 기존 더미데이터에서 splice 사용했지만

제한적인 더미데이터의 한계를 보완하기 위해 splice 제거