야외 활동, 이웃과의 소통을 유도하는 땅따먹기 게임
같은 동에서 서로 다른 MBTI 성격을 가진 사람들이 모여 땅따먹기를 하며 이웃과의 소통을 유도하는 게임입니다.
- 2022.04.29 ~ 2022.06.03
| 김재혁 | 박용태 | 박재철 | 기우석 | 박세명 |
 |
 |
 |
 |
 |
| Frontend | Frontend | Backend | Backend | Backend |
- 카카오를 통한 소셜로그인으로 간단하게 가입할 수 있어요. 이메일 회원가입에서는 중복 가입이 안되도록 중복확인을 눌러야 합니다. 본인의 mbti 를 선택 하실 수 있습니다
-
피드 작성하기, 몬스터 제거하기, 타임어택 3가지 종류의 퀘스트가 지도위에 뿌려져요. 해당 위치에 가야만 퀘스트를 수행할 수 있습니다.
-
몬스터 퀘스트는 몬스터와 직접 게임을 통해서 점수를 올릴 수 있습니다
-
퀘스트를 일정 횟수 수행하면 뱃지를 드려요. 마이페이지에서 자신이 달성한 업적을 퀘스트 타입별로 확인할 수도 있어요.
- 특정지역에서 피드를 남겨보세요. 다른 사람이 올린 피드에 댓글로 소통하고 좋아요를 눌러보세요.
- 좀 더 즉각적인 소통을 위해서 채팅방을 이용하세요. 닉네임이 공개되지 않는 익명채팅입니다.
좀 더 즉각적인 소통을 위해서 채동네 팅방을 이용하세요.
- 자신이 쌓은 포인트로 랭킹페이지에서 top 10 랭킹을 확인할 수 있습니다.
첫 페이지 부터 500에러가 발행하고 페이지가 무한 로딩이 걸리는 문제발생
현재 위치 좌표값을 Geolocation 메소드를 통해 받아오고, 그 이후 카카오 지도 API를 통해 위치 정보를 주소값으로 받아오는데, 처음부터 Gelocation 값이 오류또는 해외에 있을경우에는 처음 초기화면서 부터 서비스를 불가하는 현상이 발생하였습니다.
예외 처리를 통해 카카오API의 리턴값이 받을 수 없다면, 로컬스토리지에 미리 저장해둔 최초의 정상적인 좌표값을 불러와 서비스를 이용후 다시 좌표값을 받아 제대로된 서비스를 이용하는 방식으로 해결하였습니다.
React useState에서 값이 null 일때의 예외처리
컴포넌트 안에서 api호출을 하여 데이터를 가져오고 그 값을 useState로 저장할 경우 렌더링이 두번 일어나기 때문에 첫번째 렌더링시에 useState값이 null일 경우 예외처리를 해야합니다.
처음에는 optional chaining으로 해결을 하려고 하였으나, 가독성 문제와 optional chaining을 사용하는 상황이 따로 있기때문에 이럴경우 단순 예외처리로 useState값이 null 이 아닐경우 컴포넌트를 렌더링 시켜서 문제를 해결할 수 있습니다.
실시간 좌표값을 geolocation함수로 호출할때에 setTimeOut 으로 일정 시간이 지난후에 api 를 호출하는 방법이 있었습니다. 하지만 이럴 경우 불필요한 api 를 호출하여 performance에 지장이 있습니다.
setTimeOut 함수를 사용시 임이의 시간범위내 계속하여 불필요한 api 호출을 하게됩니다.
setTimeOut 대신 일정범위 이동시 api 를 호출하도록 해결을 하였습니다.
로그인 유지시 매번 새로고침시 서버에 로그인 유지 관련 api 를 호출하였고 이렬경우 불필요한 경우까지 api 를 호출하여 성능을 떨어뜨립니다.
로그인 유지 api를 매번 새로고침 할때마다 호출하도록 설계를 했었습니다. 지속적으로 로그인 유지에 대한 비용이 너무 많이 드는거 같았습니다.
axios에 내장된 interceptor를 이용해서 401 에러가 발생했을시에는 refresh토큰이 있는지 없는지 판단하고 만약 있다며 서버에서 refresh토큰을 발급 받을 수 있도록 했습니다.