2차 프로젝트 회고록

✨✨ 에어비앤비 클론 프로젝트 ✨✨

🌷 에어비앤비란 ?

에어비앤비는 전세계 여행 및 숙박 관련 공간을 공유할 수 있는 온라인 커뮤니티 플랫폼 서비스 !

🌷 프로젝트 기간 !

2021 / 03 / 02 ~ 2021 / 03 / 12 (11일)

🌷 팀 이름 !

• “ourbnb”

🌷 팀 구성 !

• Front-End : 민지님, 연주님, 혜성님(나) / 총 3명

• Back-End : 한아님(PM), 규보님, 호진님 / 총 3명

🌷 기술 스택 !

• Front-End : HTML / CSS / JavaScript / React / CRA / React DOM / React Router DOM / Styled Components / Google Map API / DatePickerRange API / RESTfulAPI

• Back-End :

• 공통 : Notion / Slack / Trello / Git / GitHub / Zoom / Google Meet

🌷 구현 영상 !

(업로드 예정)

🌷 Work Flow !

카카오 소셜 로그인 ➡️ 메인페이지 ➡️ 검색리스트페이지 ➡️ 상세페이지 ➡️ 결제 및 예약 페이지 ➡️ 마이페이지

🌷 내가 맡은 기능 !

• 공통 footer 레이아웃 구현
• 상세페이지 / UI 컴포넌트 및 레이아웃 구현
• 상세페이지 / token 여부에 따른 UI 전환 구현
• 상세페이지 / React Router를 통해 넘어온 state값을 활용하여 숙박 일수 및 금액 계산
• 상세페이지 / 동적 라우팅을 활용하여 페이지 구현
• 마이페이지 / Data Mapping
• 마이페이지 / Menu Tap 구현
• 마이페이지 / 예약 정보 API 통신

🌷 두 번째 프로젝트 !

첫 번째 프로젝트가 끝난 지 얼마되지도 않아 또 다시 2차 프로젝트를 시작하게 되었다! 원래 월요일에 발표인데 삼일절인 관계로 3월 2일에 팀이 발표되었다! 프론트 3명 백엔드 3명 총 6명으로 “에어비앤비”를 구현하게 되었다. 1차 프로젝트 때 안해본 기능 등을 구현하기위해 많은 부분을 쳐내기도 하였다! 그리하여 우리는 소셜로그인 - 메인페이지 - 리스트페이지 - 상세페이지 - 결제페이지 - 마이페이지를 구현하였다. 1차 프로젝트 때 나는 회원가입과 로그인 페이지를 구현하였기에 이번에는 상세페이지와 마이페이지를 담당하였다. 이번에 목표는 사용해보지 않은 기능 써보기, 공부해가며 구현하기를 중점에 두었다. 그래서 프론트엔드 우리 셋은 새로운 기능을 구현할 때 다같이 붙어서 함께 진행하였다😝

🌷 communication !

이번 프로젝트에서도 Trello와 Notion을 적극 활용하였다!

특히나 key값을 맞출 때 유용한 notion!!

🌷 상세페이지 !

민지님께서 구현하신 메인 및 리스트페이지에서 넘어온 state값인 날짜와 인원수를 상세페이지에서 보여줌과 동시에 숙소id값에 맞는 데이터를 백엔드에서 받와서 상세페이지에 뿌려줘야했었다. 날짜와 인원수를 백엔드에서 받아오지 않고 프론트 컴포넌트 간의 이동이라 매우 어렵게 느껴졌다. 하지만 민지님께서 자세히 알려준 덕분에 나는 리스트페이지에서 인원수와 날짜를 받아올 수 있었으며, 이를 결제페이지에 넘겨줄 때 👉🏻 인원수 + 날짜 + 1박금액 + 총금액 + 이미지 + 타이틀 + 룸타입 + 평균점수 + 일수 + 청소비 👈🏻 를 넘겨줄 수 있었다. 이에 대한 내용이 아래 사진과 같다 ! React Router를 이용하여 component간의 데이터를 넘겨줄 수 있다. pathname, query, hashname, state 이렇게 총 4가지이다. 이렇게 넘겨준 state는 this.props.location.state로 접근이 가능하다! 그리하여 우리는 메인에서 넘어온 날짜 + 인원수를 상세페이지까지 가지고 와서 , 상세페이지에서 앞서 날짜 + 인원수를 포함하여 여러가지 데이터들을 결제 페이지로 넘겨줄 수 있게 되었다❗️

🌷 git rebase !

프로젝트 진행 중에 git rebase 세션을 듣고 이번 프로젝트는 git rebase로 진행하였다. 기존의 git commit 후 push를 하게 되면 각 feature branch 마다 merge commit이 남고 이는 branch history가 지저분하게 된다! 그리하여 git rebase를 사용하면 commit 개수가 1개로 줄기 때문에 history도 깔끔하고 보기좋다! 다만 commit의 개수가 3개 이상을 넘어가게되면 conflict가 나기 쉽기 때문에 commit이 많다면 squash를 꼭 해주어야 한다! 이때 git rebase –continue가 제일 무서웠다…..하다가 진짜 안되서 –abort도 한번 진행하였다…..!😭

🌷 최종후기 !

1차 프로젝트 후 욕심내고 싶다 생각하여 이번 2차 때는 상세페이지를 맡아서 열심히 구현하였다! 상세페이지는 들어오는 데이터가 세세하게 많아서 한아님과 초기부터 틈틈히 상의해가면서 만들었기에 완벽한 숙소에 대한 상세페이지를 구현할 수 있었다! 하지만 구현 중에 어려움도 많고 하였지만 팀원분들이 함께 으쌰으쌰 해주어서 담당되어있지 않던 마이페이지까지 구현할 수 있게 되었다! 특히나 마이페이지 같은 경우에는 규보님께서 이미 데이터를 다 만들어두신 후라 진짜 레이아웃짜고 이틀?도 안되서 바로 통신하고 완료하였다! 2차 프로젝트 2주차 진행 중에 기업협업 안내와 이력서 작성 등으로 1차 프로젝트 때 보다 시간이 조금 적었지만 하는 동안 너무 즐거웠다 ! 팀원분들과 밥 먹던 도중 6명 모두 민초파인걸 알았을 때 그 충격이란 🤣 🤣 🤣 그래서 프로젝트 기간 중에 베라 민초만 시켜서 먹기, 민초 + 다른맛해서 먹기를 하였당 ㅋㅋ 프로젝트하면서 새로운 기능을 공부하고 적용하느라 시간이 걸려서 S3를 적용하지 못한게 너무 아쉬웠다 ㅠ,ㅠ 이번에도 역시나 프로젝트 기간동안 너무 즐겁게 웃으며 프로젝트를 하였다! 민초 먹기, 미국식 덮밥 또 시켜먹기 ! 그리고 프로젝트 발표 2일전에 함께 선정릉 걷기~!~! 한아님, 규보님, 호진님, 민지님, 연주님 !! 💜 함께 프로젝트 할 수 있어서 너무 좋았다! 그리하여 우리는 도메인도 구입해두었기에 틈틈히 디벨롭하여 배포도 예정이다 !💪🏻

🙌 🙌🏻 🙌

👉🏻 민초파! 👉🏻 민초파! 👉🏻 선정릉 걷기(연주님 등장ㅎ)

• 회고