<< 서비스명: Find-player-game>>

• Github-URL: https://github.com/software92/find-player-game

프론트엔드 개발을 준비하고 있습니다.

소개

제가 이스타tv라는 유튜브를 좋아하는데 그곳에서 월드컵 관련해서 이름을 입력해서 선수를 맞추는 간단한 게임을 하는 걸 보고 재밌겠다 싶어 만들게 되었습니다. 기존 사이트를 클론 코딩 해서 약간의 기능만 추가했습니다

기술 스택

• react

• recoil

• react-query

주요 기능

• 선수의 데이터를 불러오면 클럽의 선수 목록을 볼 수 있다

• 2글자 이상의 문자를 입력하면 해당 문자가 포함된 선수를 검색해서 자동완성 리스트를 만든다

• 임의로 선정된 선수와 입력한 선수의 정보를 비교해서 힌트를 제공한다

• 두 선수가 일치하면 블러 처리된 이미지가 선명하게 나타난다

어려웠던 점

• 축구 선수와 클럽의 정보를 가져올 때 transfermarketapi 를 사용했습니다. 부분 유료 api라 동시에 최대 보낼 수 있는 요청과 한 달 동안 보낼 수 있는 요청이 제한되어 있어 기능을 테스트를 할 때 불편함을 겪었고, 일부 클럽과 선수의 정보만 사용할 수 있었습니다.

• 비동기 데이터를 UI에 나타낼 때, 데이터의 변수를 그대로 사용할 수 있는 경우와 검증을 해서 사용 해야 하는 부분을 구분해서 작성하는 부분에서 어려움을 겪었습니다.

끝으로 제 글을 봐주시는 분들께 항상 감사합니다.

문서 작성 순서, 맞춤법, 코드 등 모든 의견에 대해 적극 환영합니다.

감사합니다