와.. 5월 9일 처음 항해 시작했을 때, 언제 99일이 끝날까 하고 생각했고
우리보다 앞서 시작한 기수들의 실전 프로젝트가 올라오고 있는걸 보면서 저런걸 어떻게 다 만든거지..? 라는 생각을 했는데, 정말 시간이 순식간에 지나갔고 벌써 89일차가 됐다.
사실상 모든 프로젝트는 종료됐고, 이제 이력서 및 면접 준비만 남았다.
미니프로젝트, 클론코딩 주차를 지나고 실전프로젝트까지 진행하면서 바쁘고 정신없다는 핑계로 TIL 작성에 게을러졌는데 이젠 핑계거리도 사라졌으니, 실전 프로젝트 회고를 시작으로 꾸준한 공부 기록을 남겨봐야겠다.
프로젝트 "Petsitt"
나의 실전 프로젝트 이름은 Petsitt(펫싯)이고, 원하는 지역의 반려견 돌보미들을 사용자와 매칭해주는 위치 기반 중계 서비스이다.
예를 들어, 내가 반려견 주인인데 내일 사정이 생겨서 내 반려견과 함께 산책을 해줄 수 없는 상황이라면? 근데 내 반려견은 하루에 한 번 이상은 꼭!!!! 산책을 해야만 하는 성격이라면?
그럴 때 우리 동네 주변에 등록되어있는 반려견 돌보미를 검색해서 돌보미 프로필을 확인한 뒤, 원하는 돌보미에게 서비스를 신청하고 > 문의하고 > 예약할 수 있도록 도와주는 매칭 서비스이다.
프로젝트에 관한 자세한 설명이나 코드는 깃헙에서 확인 가능!
이 중 내가 작업했던 페이지 및 기술들에 대해서 정리해보고, 아쉬웠던 점과 개선이 필요한 부분들에 대해서 회고하는 시간을 가져보려고 한다.
메인페이지 및 돌보미 검색 기능
✅ Geolocation API
사용자가 최초로 Petsitt 사이트에 접속할 경우, 사용자의 실시간 위치 정보를 받아와 근처의 돌보미 리스트들을 보여준다. 이를 위해 Geolocation API를 사용했고 검색된 위도, 경도 데이터를 기반으로 가까운 거리에 위치한 돌보미 리스트가 보여진다.
리스트뷰에서 맵뷰로 변경할 경우, 검색된 돌보미들의 마커가 지도상 각 위치에 보여진다.
🔗 Geolocation API 구현 내용 링크
✅ Daum Postcode API
돌보미가 서비스를 제공할 주소를 입력할 때에 우선 주소검색이 필요해서 도입했는데, 메인 페이지의 돌보미 검색 기능에서도 사용자가 주소를 검색해야 하기 때문에 함께 사용했다.
다만, 우리는 돌보미들의 위치 정보를 Full Address 뿐만 아니라 위도/경도도 함께 저장해야 했는데 Daum post API로 검색하여 얻어내는 데이터에는 위도/경도 데이터가 없었기 때문에 카카오 로컬의 REST API 방식을 함께 사용해 Full Address를 좌표 데이터로 변환하는 방법을 함께 사용했다.
처음에는 돌보미 검색 기능에 카카오맵의 키워드 검색 기능을 사용해볼까 생각도 했는데, 우리는 "합정동 카페"와 같은 키워드가 필용한 것이 아니라, 사용자가 실제 서비스를 제공받고자 하는 동네, 즉 주소를 검색하는 기능이 필요했기에 Daum Postcode API를 사용해 자세한 주소값을 받아오고자 했다.
✅ Kakao Map API
검색된 돌보미 리스트를 지도 위에 마커로 보여주고, 해당 마커를 클릭했을 때 돌보미에 대한 간략한 인포메이션 카드가 노출되는 기획 내용을 구현하기 위해 카카오맵 API를 활용했다.
GeoLocatin API + Daum Postcode API + Kakao Map API... 검색 기능을 위해 무려 세 개의 API를 사용..?
이렇게 주소 및 위치에 관련된 API를 무려 세개나 사용했는데, 검색 기능 하나만을 위해 이렇게 여러가지 API를 사용해야만 했을까..? 라는 아쉬움은 남는다. 각 API가 사용된 나름의 이유는 있지만, 너무 API를 남용한 것은 아닐까 하는 생각이 들기도 하고.. 근데 한편으로는 우리가 가진 기술력에서 사용할 수 있는 모든 방법을 다 사용한 것이기 때문에 나름 좋은 도전이었고, 검색기능 자체가 우리 프로젝트에서 중요한 기능 중 하나이기 때문에 이렇게라도 구현해낸 것이 어디냐..?🤔 라는 생각도 드는 부분이다.
🔗 [실시간 위치 정보 및 주소 검색을 통한 데이터 불러오기 + 불러온 데이터 카카오 지도에 마커로 뿌려주기] 보러가기 (내용 작성 후 링크 업데이트 얘정)
예약하기 기능 및 예약 내역 페이지
✅ React-multi-datepicker
사용자는 서비스를 제공받고자 하는 날짜를 선택해야 하고, 돌보미의 경우 돌보미가 자신의 본업이 아니기 때문에 항상 서비스 제공이 가능하지 않을것이므로 서비스 제공이 불가능한 날짜를 선택하는 기능이 함께 필요했다. 역시 날짜 선택에는 데이트피커가 UI 측면에서 가장 명료하다고 생각되어 이 라이브러리를 사용했다. 돌보미 상세 페이지에서 예약 불가능한 날짜를 처리하느라 애를 먹었던 것 빼고는 무난하게 사용할 수 있는 라이브러리였던 것 같다.
✅ 돌봄일지 / 다이어리
예약이 완료되면, 서비스를 제공하는 돌보미는 돌봄일지를 작성하여 반려견 주인에게 서비스 제공 내용을 공유해야 하고, 사용자의 경우 서비스 종료 후 돌보미에 대한 리뷰를 작성해야한다. 이 부분은 사실상 간단한 듯 하지만, 리뷰와 돌봄일지 작성 및 읽기, 수정등이 모달 안에서 이뤄지는 부분이었는데, 예약 내역이라는 하나의 페이지에서 따로 만들어져있는 Modal 컴포넌트를 불러와 각 기능에 맞는 데이터를 불러오고 기능을 연결하려다보니 꽤 애를 먹었고.. 코드도 꽤 난잡해지는 결과를 낳았다. 이 부분은 꼭 정리가 필요할 것 같다.
✅ 모달 컴포넌트
모달 기능 자체가 여러 페이지에서 사용될것으로 예상되어, 따로 엘리먼트 컴포넌트로 만들었는데 한 번 만들어두니 모달 기능을 구현할때마다 컴포넌트만 불러오고, 모달 버튼에 대한 이벤트는 각 기능별로 추가하면 돼서 사용하기 좋았던 것 같다.
🔗 [React-Multi-Datepicker 활용] 보러가기 (내용 작성 후 링크 업데이트 얘정)
Socket.io + Server Side Event를 활용한 실시간 채팅 및 실시간 메세지 수신 알림 표시
✅ Socket.io 의 경우 내가 맡았던 기능은 아니었는데, Server-side-event를 활용해서 로그인된 사용자에게 새로운 메세지가 도착했을 경우 실시간으로 새로운 메세지가 도착했음을 알려주는 기능을 추가하게 됐다. 이 기능이 Socket.io와 함께 어우러져야 했고, 그에 맞게 기존에 구현되어있던 Socket.io의 코드에도 변경이 필요했기 때문에 Socket.io도 처음부터 다시 구현하는 과정을 거치게 되었다.
Socket.io나 Server-side-event는 생소한 기술이었기 때문에 약간의 도전과제라고 생각했는데, 생각했던 것 보다는 클라이언트쪽에서 작업해야 하는 내용이 간단하고 많지가 않아서 오히려 가장 큰 문제 없이 구현됐던 기술인 것 같다.
물론 이 작업을 함께한 백엔드 리더님께서 미리 많은 공부와 준비를 해오셨던 덕이 가장 크지만..!!!
🔗 [Socket.io + SSE를 활용한 실시간 채팅 기능 구현] 보러가기 (내용 작성 후 링크 업데이트 얘정)
Acccess Token 및 Refresh Token을 활용한 로그인 기능 구현
✅ Refresh Toekn
Access Token이 탈취당했을 경우의 위험성과 비교적 짧은 유효기간을 보완하고자 Refresh Token을 도입했다. Refresh Token을 사용해 Access Token을 재발급 받는 과정을 구현하기 위해 axios의 interceptor 기능을 활용하였다.
🔗 [Refresh Token을 활용한 Access Token 재발급 기능 구현] 보러가기 (내용 작성 후 링크 업데이트 얘정)
