1. 프로젝트 개요
프로젝트 기간
2023.03.30 - 2023.04.03
팀 구성
Frontend 2명, Backend 3명
기술 스택
Frontend : React, Redux-Tookit, Styled-Components, Axios
Deploy : AWS (S3, Route53, ACM, Cloudfront)
기획 동기
서비스 소개
주요 기능
BEST
- BEST 스타일 : 지난 24시간 좋아요 수 기준 매시 정각 업데이트, TOP 3 스타일 출력
- BEST 미용실 : 지난 24시간 좋아요 수 기준 매시 정각 업데이트, TOP 10 미용실 출력
스타일북
- 작성된 모든 미용실 리뷰 사진들 모아보기
- 무한 스크롤 구현
- 스타일에 대한 좋아요 기능
- 해당 스타일(리뷰 사진)의 미용실 상세페이지로 이동 기능
내 주변 미용실 찾기
- 서울시 내 애견 미용실 가져오기 : 위치 정보를 제공받아 거리순으로 출력
- 무한 스크롤 구현
미용실 상세 페이지
- 홈 : 미용실 상세정보와 해당 미용실 좋아요 기능
- 예약 : 가능한 날짜 선택 ➡️ 가능한 시간 선택 ➡️ 미용 옵션 선택 ➡️ 등록한 강아지 선택
오늘 기준 한달까지 예약이 가능하며 예약이 완료되었거나 지난 시간은 예약 불가능 - 리뷰 : 해당 미용실의 리뷰보기, 페이지네이션 구현
마이페이지
- 나의 정보 : 닉네임 변경, 비밀번호 변경, 회원 탈퇴 기능 및 예약, 리뷰, 강아지 정보에 대한 요약 정보 제공
- 예약 관리 : 예약 내역보기 및 예약 취소 기능, 예약 시간이 지난 예약내역은 예약취소 버튼이 방문완료 버튼으로 변경
- 리뷰 관리 : 방문 완료된 예약을 대상으로 리뷰 작성 가능, 작성한 리뷰 탭에서 수정 및 삭제 가능
- 강아지 정보 : 강아지의 정보를 입력한 뒤 등록, 조회, 수정, 삭제 가능
2. 회고
Keep
- 역량과 기간에 따른 개발 영역 분배
처음 기획단계에서 계획했던 기능들을 역량과 시간을 고려하여 적절히 분배하였고, 그 결과 기한에 맞춰 서비스를 완성할 수 있었다.
프로젝트를 진행하면서 각자의 개발 속도가 달랐고, 비교적 속도가 빨랐던 나는 조금 더 많은 기능들을 맡게 되었다. 그러면서 자연스레 프로젝트의 기여도가 높아지게 되었다.
- 커뮤니케이션 룰 지키기
회의를 하루에 2번 나눠서 하기로 했었는데 팀원들이 모두 잘 지켜주었다. 그래서 작업 상황과 어려운 점들이 잘 공유되었고, 개선해야 할 부분과 조정이 필요한 부분을 빠르게 조정해나갈 수 있었다.
리덕스 툴킷을 모두 처음 사용해보아서 초반에 자료라던지 레퍼런스를 자주 공유했었다. 그리고 내가 작성한 코드를 리뷰해주기도 하면서 서로의 코드를 이해하는 시간을 갖기도했다.
- 맡은 부분은 책임감을 갖기
각자 맡은 부분은 책임감을 갖고 잘 개발해준 것 같다. 팀빌딩 시간에 팀원 분 중 한 분이 안 풀리는 부분을 붙잡기보다 다른 팀원에게 물어보고 해결하고자 하는 의지까지도 책임감이라고 말씀을 해주셨다. 모두 각자 어려운 부분은 시간이 지체되면 도와가며 해결해나갔다.
내 파트만의 에러를 파악하기보다 서비스 전반의 에러와 버그를 찾아보고 발견이 되면 즉각 공유를 했었다. 내가 미처 파악하지 못했던 곳에서 발생한 에러나 버그들을 많이 고칠 수 있었고, 그 부분이 완성도를 높이는 데 기여를 한 것 같다.
Problem
- 순탄하지만은 않았던 커뮤니케이션
프로젝트 초기에 서비스에 대한 요구사항은 정했지만, 프론트엔드와 백엔드 간의 요구사항은 제대로 정하지 못했었다. 그러다 보니 api를 연결할 때에 생각하지 못한 문제들이 많이 있었다. 예를 들면 body에 보내는게 number인지 string인지 제대로 협의하지 않아 그 부분에서 에러가 계속 발생했었는데 뒤늦게 알게 되었던 상황도 있었다.
그 이후에는 프론트와 백 둘다 요구사항을 명확하게 해서 어떤 타입으로 어떻게 보내줄 것인지에 대해 이야기를 나눴었고, 그 부분을 문서화해서 혼동을 방지하기도 했다.
- advanced한 기능에 대한 아쉬움
기획 단계에서 다양한 아이디어를 더하고, 아이디어를 덜어내는 방법으로 서비스를 기획했었다. 아이디어를 더하는 시간에서 결제기능, 채팅기능 등과 같이 다양한 advanced한 기능들이 많이 언급됐었는데 아이디어를 덜어내는 시간에 많이 덜어냈었다.
결과적으로는 구현한 기능들에 있어 완성도는 높였지만 한 두가지는 더 advaced한 기능을 추가했으면 좋았겠다는 아쉬움도 크다. 개인적으로 지도로 보기나 채팅기능을 추가했었으면 더 좋겠다는 생각이 든다.
Try
- 백엔드와의 소통과 요구사항을 명확히 하기
프리프로잭트를 통해 문서화의 중요성을 깨달았다면, 메인프로젝트에서는 요구사항을 명확히 하는 것에 대한 중요성을 깨달았다. 특히 백엔드는 타입이 중요한데 나는 그 점을 조금 간과했던 것 같다. 다음 팀프로젝트에서는 소통할 때 요구사항을 명확히 해서 내가 요구한 것이 잘 전달이 될 수 있게 해야 곘다.
- 타입스크립트 공부하기
자바스크립트는 선언을 할 때 타입을 지정해주지 않기 때문에 예상하지 못한 버그가 발생할 수도 있다. 프리 프로젝트에서는 개발 규모가 작아서 타입스크립트의 중요성을 잘 느끼진 못했지만, 메인 프로젝트에서는 개발 규모가 보다 커져서인지 타입스크립트에 대한 중요성을 느낄 수 있었다. 자바스크립트는 타입으로 인한 오류는 잡아주지 못해서 배포한 이후에 오류가 있음을 알게 된 적이 여러 번 있었다. 그래서 다음에는 타입스크립트를 공부하고 프로젝트에 적용해볼 예정이다.
3. 프로젝트 링크
Figma
https://www.figma.com/file/2AJqsZvAB9tN8PmBlACyIL/UDog?node-id=0%3A1&t=cUcmLkBZCLCoG8S9-1
GitHub
https://github.com/codestates-seb/seb42_main_016
URL
FrontEnd Developer