OurBnb 팀프로젝트 회고록

서론

프로젝트를 마치며

실무 투입 전, 2차 프로젝트가 마무리 되었다. 1차 프로젝트 때보다 처리할 데이터의 규모가 커지다보니 데이터베이스 모델링부터 ORM을 활용한 쿼리문 짜는 것까지 전부 난이도가 올라갔다. 그래도 경험이 없어서 뭐부터 할 지 헤맸던 1차와는 느낌이 달랐다

참고 웹사이트 선정

Airbnb webpage: https://www.airbnb.co.kr/
이번에 우리 팀이 참고하게 된 웹사이트는 에어비엔비였는데, 호스트와 게스트의 관계를 중재해주면서 수익을 내는 독특한 비즈니스 모델이기도 하고, 수많은 숙소와 고객 데이터를 다룬다는 점에서 흥미로워 참고하게 되었다!

개발 기간

2022/01/17 ~ 2022/01/28 (2주)

적용 기술

Frontend: React, Javascript, Styled-Component
Backend: Node.js, Express, MySQL, Prisma
Common: RESTful API
Development Tools: VScode, Github, Workbench, Postman
Community Tools: Slack, Zoom, Notion

본론

내가 담당한 기능

Backend

• 백엔드 초기세팅 - 필요한 노드 모듈 설치, 기본 폴더 생성, 서버 연결 체크, 깃허브 연동
• 카카오톡 로그인 API 구현 - 카카오톡 공식 문서에 기반하여 별다른 회원가입 절차 없이 카카오톡 계정으로 로그인 할 수 있는 기능
• 숙소 상세 정보 조회 API 구현 - 특정 숙소를 클릭했을 때 나오는 해당 숙소 상세 페이지의 전체 데이터를 불러오는 기능
• 예약 생성/조회/수정/삭제 API 구현 - 숙소 예약과 관련된 C.R.U.D 기능
• 리뷰 조회 API 구현 - 숙소 상세 페이지에서 해당 숙소를 이용한 고객들의 리뷰 데이터를 불러오는 기능

Team Convention

Branch

• Feature/<기능 or 페이지> : 새로 만들 때 사용
• Fix/<고치는 것> : 수정, 개선할 때 사용

Commit

• Add : 기능 추가할 때
• Fix : 기능 수정, 개선할 때
• Del : 기능 삭제할 때
• Merge : 파일 머지할 때

File

• 페이지 폴더 및 파일명 : Pascal Case
• 컴포넌트 파일명 : Pascal Case
• 클래스명 : camel Case

모델링 최종안

최종 결과물

KakaoTalk Login API

숙소 상세 정보 조회 API

숙소 예약 생성 및 내역 조회 API

결론

잘한 점

• 코드 간결화

  예약 관련 query문(과거 예약 내역, 현재 이용 중인 내역, 차후 예약 내역)은 queryBuilder.js에 예약 type(과거,현재,미래)은 type.js에 담아 별도 관리하여 레이어드 패턴에 어긋나지 않게 하는 동시에 가독성을 높였다
  
  상황별 query문을 queryBuilder.js에 보관
  
  상황별 예약 type을 type.js에 보관
  
  Service단에서 type.js를 호출하여 3가지 예약 type을 인자로 Model단에 전달
  
  Model단에서 queryBuilder.js를 호출하여 인자로 전달받은 예약 type별로 다른 query 적용
  
  

• 에러 처리

  고객의 예약 요청이 백엔드로 넘어왔을 때, 기존 예약이 있는 경우, 숙소 허용 인원을 초과하는 경우, 예약 요청 기간 내에 이미 겹치는 예약이 존재하는 경우를 모두 에러 처리할 수 있는 조건문을 Service단에 추가해주어 잘못된 데이터가 Database에 저장되는 경우를 막을 수 있었다
  

아쉬운 점

• 프로젝트 기획 부족
  이번 2차 프로젝트에는 팀원 모두 구현에 대한 욕심이 있어서 스케일이 커졌고, 이에 대한 정확한 일정 산정 및 우선순위 결정에 실패 하였었다. 이로 인해, 일부 필수적인 기능이 구현되지 못하는 상황이 발생하였다
• 진행 상황에 대한 공유 부족
  프론트 쪽과 현재까지의 진행 상황을 정기적으로 체크하지 못했다보니 둘 중 하나가 지체되는 상황이 발생하여 불필요한 시간 소모가 생겼다

배운 점

• mySQL 쿼리문

  이중 SELECT문과 GROUP_CONCAT 이라는 각기 다른 row를 하나의 row로 합쳐 한 줄로 보여주는 mySQL 쿼리문을 알게 되었으며, 여러개의 숙소 이미지들을 한번에 담아서 보내줄 때 사용하였다

(SELECT GROUP_CONCAT(public_imgs.img_url SEPARATOR ',') FROM public_imgs WHERE public_imgs.room_id = rooms.id AND public_imgs.is_main = 1) AS imgUrl

• SNS 로그인 처리 로직
  OAuth 2.0 방식을 통한 카카오 토큰 인증 및 처리에 대한 원리와 동작 방식을 알게되었다
  axios를 활용하여 백엔드에서 프론트처럼 비동기 외부 API 호출 방식을 알게되었다
• 프론트와 백엔드를 연결하는 실력 향상
  HTTP REQUEST Method (GET,POST,PUT,DELETE)와 REQUEST 객체가 지닌 Method (body, params, query)를 더 능숙하게 사용하게 되었다

프로젝트 관련 링크

• Frontend Github Repository: https://github.com/pd0203/ourBnb-frontend
• Backend Github Repository: https://github.com/pd0203/ourBnb-backend