[React] 아웃소싱 프로젝트

우지끈·2024년 12월 5일

React

3일 동안 팀원들이랑 지도 API를 활용한 서비스 제작 프로젝트를 진행했다.
주제를 같이 한참 고민하다가 맛집 추천 -> 흑백 요리사 -> 흑백 요리사 식당 리뷰 서비스로 결정했다!

서비스 명은 흑백 요리사 밈을 활용해 이븐한맛집으로 정하게 되었다.

프로젝트의 전반적인 기능은 다음과 같다.

프로젝트 기능

1️⃣ Kakao map API

Kakao map에서 제공하는 API를 이용하여 매장 주소를 좌표 값으로 변경(Geocoder)하여 지도 이동
매장 주소에 Marker & Custom Overlay 표시

2️⃣ Supabase를 활용한 CRUD

로그인, 회원 가입
- Authentication에서 제공하는 api를 이용하여 로그인, 로그아웃, 회원 가입 구현
- 소셜 로그인(google) 구현
- 로그인, 회원 가입 실시간 유효성 검사 구현
메인 페이지
- 매장 정보, Storage 이미지를 활용하여 slick slide 구현
검색 페이지
- 매장 정보 기반 리스트, 지도 구현
상세 페이지
- 리뷰 추가, 수정, 삭제 기능 구현
- 좋아요 추가, 삭제 기능 구현
- 매장별 정보 카드, 지도 구현
마이 페이지
- 작성된 리뷰, 좋아요 데이터를 활용한 삭제 기능 구현
- 닉네임, 프로필 사진 변경 기능 구현

3️⃣ Tanstack Query를 활용한 서버 상태 관리

useQuery를 사용한 data fetching과 서버 상태 관리
useMutation을 통한 낙관적 업데이트 및 수정 삭제 기능 구현

4️⃣ Zustand를 활용한 클라이언트 상태 관리

Zustand를 사용한 유저 상태 전역 관리
persist사용 -> 유저 정보를 로컬 스토리지에서 관리 -> 페이지 전환시 로그인 상태 유지
getState를 사용한 상태 외부 접근

5️⃣ RRD(React Router DOM)을 활용한 페이지 라우팅

페이지 라우팅 구현
로그인 된 유저가 접근할 수 있는 페이지와 아닌 페이지 구분(GuestRoute, PrivateRoute)
Layout과 Outlet을 사용하여 일관된 UI 제공

6️⃣ Custom Hook을 이용한 비즈니스 로직과 UI 로직 분리

개발 시작 전에 각자 맡을 페이지를 정했는데, 로그인/회원가입을 구현해 보고 싶었으나 사다리 타기에서 떨어져 검색 페이지를 담당하게 되었다...

처음엔 조금 아쉬웠지만 검색 페이지 개발하다 보니 정이 들어서 재밌게 공부하면서 진행할 수 있었던 것 같다 ㅎㅎ 그리고 지도 API도 만져볼 수 있어 좋았다.

페이지 설명

Supabase에서 식당 데이터를 받아와 Tanstack Query로 관리
카테고리별 필터링
- 전체, 흑, 백 버튼을 통해 카테고리별 식당 목록 필터링
실시간 검색 기능 구현
지도에 모든 식당의 마커 표시
4.1. Supabase에는 매장의 주소만 저장되어 있으나, kakao map API는 좌표값 기반으로 마커를 생성
4.2. Geocoder를 사용해 주소를 좌표로 변환하여 사용
좌측 리스트와 지도 연동
- 리스트에서 식당 클릭 시 우측 지도의 중심을 식당 주소로 이동 + 마커 표시
마커 클릭 시 커스텀 오버레이 생성
- 자세히 보기 버튼 클릭 시 해당 매장의 디테일 페이지로 이동

목표했던 모든 기능을 구현했으나, 커스텀 오버레이가 중복 표시되는 문제가 발생했다.

예를 들어:
1. 식당 1의 마커를 클릭해 커스텀 오버레이가 생성된 상태에서,
2. 식당 2의 마커를 클릭하면 식당 1의 오버레이가 사라져야 하지만 사라지지 않는 문제가 있었다.

kakao map API는 오버레이를 삭제하는 메서드로 Overlay.setMap(null)를 제공하고 있는데, 해당 메서드로 아무리 시도해도(active Overlay의 상태를 useState로 관리하거나 useRef로 관리하거나 삭제 함수를 따로 만들어서 실행시키기 등) 오버레이가 삭제되지 않았다... 다른 방법이 있는지 살펴보았으나 오버레이를 지우는 방법은 저것밖에 없었다.

물론 오버레이에 id 값을 부여한 뒤, DOM에 직접 접근하여 강제적으로 삭제하는 방법도 있으나 이는 정말 좋지 않은 방법인 것 같아 패스했다...

차후에는 처음부터 마커 전환 시 오버레이 자동 삭제를 염두에 두고 코드를 작성해보거나, kakao map API 공식 문서를 더 꼼꼼히 살펴 해결 방안을 모색할 계획이다. (해결된다면 포스팅 해야쥐...)

그래도 문제를 해결하기 위해 이것저것 만져보는 과정에서 지도 API랑 많이 친해진 것 같아 그 점은 큰 성과였다고 생각한다 😂

KPT 회고

Keep - 현재 만족하고 있는 부분

컨벤션 잘 지킨 것
폴더 구조를 적절하게 잘 나눈 것
lighthouse를 사용하여 성능 최적화를 시도한 것
커스텀 훅을 적극적으로 사용하여 비즈니스 로직과 UI 로직을 분리한 것
좋은 팀 분위기!!!! → 적극적인 의사소통👍
모든 팀원이 PR 때 리뷰 꼼꼼하게 작성한 것 + 서로의 코드를 리뷰하며 작성 의도를 공유한 것
서로의 피드백을 빠르게 반영한 것
적극적인 지식 공유

Problem - 불편하게 느끼는 부분

시간 부족 이슈…
개발보다 디자인에 조금 더 초점이 맞춰진 느낌
해야할 일이 정리가 덜 돼서 계속 딜레이된 것
오류 발생시 팀원들과 공유하며 트러블 슈팅을 진행하지 못한 것
tailwind CSS가 익숙하지 않아 많은 시간을 할애하게 된 것
역할을 페이지 기준으로만 나눈 것
발표 준비 미흡

Try - Problem에 대한 해결책, 당장 실행 가능한 것

계획, 일정 관리 확실하게 할 것 → 협업 툴 사용
개발 기간을 고려하여 개발/디자인 비중 정하기 + 기술 스택 정하기
오류가 발생하면 바로 공유 + 기록해두기
공식문서 확인 잘하기
기능 기준으로도 역할 분담해보기
발표 전에 어느정도는 틀 잡아두기

프로젝트 마친 후, 팀원들이랑 진행한 KPT 회고를 마지막으로 글을 마무리 해보겠다.
이번 프로젝트를 통해 얻은 경험과 지식을 발판 삼아 다음 프로젝트 땐 더 잘하고 싶다!!!!! 프로젝트 전까지 공부도 더더더더 열심히 하고!!!!! 회고의 Try 부분에서 나온 개선점을 항상 생각하고 고민하며!!!!!! 더 나은 프로젝트를 진행할 것이다!!!!!!!!!! 화이팅!!!!!!!