<aside> 💡 반응속도체크 웹게임 사이트를 제작하면서 공부한 내용 정리 & 코드에 대한 리뷰입니다

전체 코드 : https://github.com/Taewoong1378/ResponseCheck_Site_ErrorFix

</aside>

1. 간단 정리 :

이용 스택 : React, Node.js, MYSQL, Redux, Redux-saga, Next.js

주변 사람들이 쉽고 재밌게 할 수 있는 게임을 생각하다 만들기 시작

Ant-Design와 styled-components를 이용해 빠르게 개발

반응속도 점수를 MYSQL로 관리해 1등부터 10등까지 확인할 수 있게끔 구현

실제로 친구들에게 배포해 서비스가 정상적으로 작동하는지 테스트 (위 주소를 통해 접속 가능)

2. 세부 정리 :

1. 구현하고자 하는 UI 스케치

벤치마킹 사이트 : https://simritest.com/reaction

해당 사이트는 테스트 시작 버튼을 누르면 총 5회의 반응속도 체크를 진행하고, 5회를 진행한 후에 평균 속도를 매기고 있다. 또, 정확한 로직은 모르겠지만 인간의 평균적 반응 속도인 250밀리초(0.25초)를 기준으로 '반응속도가 느리시네요', '반응속도가 빠르시네요' 등과 같은 반응속도에 대한 검사 결과를 내주고 있는 듯하다.

하지만 해당 사이트는 따로 점수를 기록할 수 있는 시스템은 제공하고 있지 않은데, 해당 사이트와 유사한 로직의 반응속도 체크 사이트를 만들고 더 나아가 이름(닉네임) 입력 기능까지 함께 구현해서 사용자들의 점수를 기록할 수 있는 기능까지 제작해봤다. 또, MYSQL db와 연결해서 1위부터 10위까지의 순위를 공개하였으며 더 나아가 서버사이드 렌더링을 적용한 뒤, 지인들에게 배포해 실제 서비스 이용이 가능할지까지 점검하였다.