무엇을 먹을지, 누구랑 먹을지 고민하는 현상을 해결하기 위한 현재 위치 기반 맛집 추천 및 밥 모임 모집 서비스
프론트엔드 3명, 백엔드 4명이서 작업하였습니다.
배포 주소: https://kkini.vercel.app/
사용 기술: Next 13, React 18, React Query, Axios, Recoil, Chakra UI, Emotion, React Hook Form, Vercel
코드 포맷팅: ESLint, Prettier, StyleLint, CommitLint, Husky, Lint-Staged
채팅 구현
- 밥모임 상세 페이지에서 댓글을 통해 비동기적으로 대화를 하기보다는, 밥모임 약속을 구체적으로 형성하기 위해 사용자끼리 원활한 소통을 할 수 있도록 채팅을 도입하였습니다.
- stompjs, sockjs-client 라이브러리를 활용하여 채팅방 화면을 구현하였습니다.
- 자신이 작성한 채팅은 오른쪽에, 다른 유저의 채팅은 왼쪽에 배치되도록 구현하였고 배경 색깔을 다르게 하여 작성자가 누구인지 구분하였습니다. 또한 날짜는 카카오톡과 유사하게 한 번만 렌더링 될 수 있도록 구현하였습니다.
초기 프로젝트 셋팅
- ESLint, Prettier와 더불어 css 스타일링 또한 포맷팅을 개발자 간에 일치시키기 위해 StyleLint를 도입했습니다.
- 또한 Github Repository에 각자의 코드가 올라가기 전에 commit 단계에서 각종 linting 검사를 husky와 lint-staged를 통해 강제화하였습니다.
- Github Issues와 Pull Request 게시글도 형태를 일관성 있게 가져가기 위해 Template을 작성하였습니다.
카카오맵 렌더링 및 랜덤 맛집
- 카카오맵을 화면에 렌더링시키고, 그 위에서 사용자의 현재 위치에서 랜덤 맛집을 뽑을 수 있는 기능을 구현하였습니다.
- 한 화면에서 기능이 고도화 되면서 많은 useState, useEffect를 사용하게 되었고, 이에 따라 page에서 코드를 추상화시키기 위해 기능별로 Custom Hook을 만들었습니다.
- 여러 Custom Hook에서 공통적으로 사용하는 state를 전역으로 저장하기 위해, 그리고 불필요한 재렌더링을 줄이고자 Context API보다는 Recoil을 선택했습니다.
- 하지만 Recoil의 경우 atom으로 저장할 때 write 로직이 들어가고, 이는 read-only 객체인 kakao map에도 적용되었기에 에러가 발생하였습니다. 따라서 kakao map은 write 로직이 들어가지 않는 Context API를 활용하여 문제를 해결하고 정상적으로 kakao map을 전역에서 사용할 수 있었습니다.
서버 에러 시 보여줄 공통 에러 컴포넌트 구현
- 각 페이지에서 React-Query의 useQuery에서 error 객체가 undefined가 아닐 시, 즉 에러가 발생했을 때 보여줄 화면이 필요했습니다.
- 각 페이지에서 많은 useQuery가 사용되고, 그 때마다 에러 화면을 코드로 작성하기에는 개발 비용이 크다고 판단하여 공통 에러 컴포넌트를 구현하였습니다.
- 이를 통해 useQuery를 사용하는 페이지에서 개발 생산성을 높일 수 있었습니다.
- 사용자가 대략적으로 어떤 에러인지 파악할 수 있도록 에러 문구는 인자를 통해 받을 수 있도록 하였습니다.