끼니 프로젝트 회고

2023.02.14 ~ 2023.03.15 까지 진행한 맛집 모임 서비스 끼니 회고

이번 프로젝트는 프론트 엔드 3명(나 포함)과 백엔드 4명이 팀을 이뤄서 진행을 하였다.

프로젝트 설명

끼니는 현재 위치 기반 맛집 추천 및 밥 모임 모집 서비스 이다.

배고프면 합류하라..! 무엇을 먹을지, 누구랑 먹을지 고민하지 마라!

🧭 현재 위치 기반 맛집 추천

🍚 밥모임 기능

카카오 지도 API를 사용해 현재 위치를 전역 상태로 저장해놓고, 해당 위치를 기반으로 검색합니다. 300m, 500m, 1km 반경으로 테스트를 해보았을 때, 주변 식당이 가장 잘나오는 거리가 1km 라서, 1km내의 식당만 검색 되도록 하였습니다.
카카오 지도 API로 맛집 카테고리 검색을 진행합니다. 해당 API는 사진을 넘겨주지 않았는데, 사진이 없다면 사용자 측면에서 검색한 식당을 제대로 파악하기 힘들것이라 생각하였습니다. 따라서, 카카오 사진 검색 API에 해당 가게의 주소 (동 이름) + 가게 이름으로 검색하여 사진도 가져옵니다.
카카오 지도 API와 검색 API의 검색 결과는 프로미스 객체를 반환하지 않아서 비동기 로직 순서를 보장 패턴을 사용하기 힘들었습니다. 그러므로 promise 객체를 return 하는 함수로 만들어 순서를 보장했습니다.
카카오 지도 API 검색으로 받아온 10개 이하의 검색 결과의 사진을 모두 받아오려면 많은 요청을 보내야 했습니다. 성능적으로 이슈가 발생할 수 있겠다는 생각이 들어 병렬적으로 처리할 수 있고, 실패하는 경우에도 동작을 계속 하며, 순서를 보장하는 Promise.allSettled로 사진 검색을 진행했습니다.

처음부터 모바일 어플리케이션을 생각하고 개발을 시작하였습니다. 자연스럽게 저희가 쓰는 맵을 사용하는 어플리케이션을 자주 찾아보게 되었고 드래그 가능한 Bottom Drawer가 사용자 경험적으로 좋다고 생각하여 개발을 진행했습니다. touchStart, touchMove, touchEnd 이벤트에 따라 동작을 다르게 하며 translateY를 조정해주었습니다. Next.js 을 사용하여 ssr이 진행될 때, window.innerHeight를 못받아오는 이슈가 있었습니다. 브라우저에서 받아와야 하는 값은 customHook으로 만들어 해당 값을 리턴받아 사용했습니다.

제목, 카테고리, 인원, 날짜, 시간, 설명을 입력받아 진행했습니다. react-hook-form 라이브러리를 사용하는데 해당 라이브러리를 효율적으로 사용하려면 상태들이 많을 때, 비제어 컴포넌트로 사용하는게 더 알맞겠다는 생각이 들어 비제어 컴포넌트로 관리했습니다. form 상태들을 등록했다가 밥모임 생성 API 통신할 때 해당 정보들을 객체로 한번에 넘겨주었습니다.

리뷰 페이지에서 리뷰하기로 결정한 사용자의 역할에 따라 리뷰 state가 달라져, 방장 리뷰, 멤버 리뷰를 따로 진행했습니다. 프로필 (유저 정보, 내 정보 수정) UI 및 기능 구현
유저 정보(유저 프로필 사진, 닉네임, 한줄소개, 매너온도, 맛잘알 점수)를 보여주었습니다. 내 정보 수정에는 프로필 사진 수정, 닉네임과 한줄 소개 수정이 있는데, 프로필 사진을 따로 s3 사진을 저장하여 저장한 url을 사용하기 위해 분리하였습니다. 바꾼 유저 정보를 react-hook-form으로 formData를 관리하여 API 통신 하였습니다.

항상 느끼는 거지만 아직 너무 부족하다는 생각이 든다. 배움에 끝은 없다고는 하지만 이 느낌에 익숙해져야 한다고 생각하고 한번 더 다짐하게 되었다.
함께 성장하는 재미를 계속 느끼고 있어 너무 좋다. 혼자였으면 해당 프로젝트의 기획, 디자인, 구현 단계에서 이렇게 성장하지 못헀을 것이다. 팀원들고 함께 많이 성장한 것 같아 기분이 너무 좋았다.