[프로젝트] 2차 프로젝트 회고(JustBnB 프로젝트)

 

 

 

1.  🎞 프로젝트 소개

• Justbnb-FrontEnd

xxziiko - Overview

 

2차 프로젝트는 만장일치로 AirBnB 사이트가 선정되었다. 

AirBnB는 숙소 예약 및 호스팅 서비스를 제공하는 사이트이며 사이트의 디자인과 기획만을 참고하여 개발을 진행했다. 

AirBnB는 Air Bed & Breakfast을 줄인 말이라고 한다. 에어비앤비의 창업자들이 자신의 에어베드와 아침식사를 여행객들에게 제공해주었던 경험에서 아이디어를 얻어 서비스를 만들었다고 한다.

 

우리의 사이트명은 JustBnB. Justcode + BnB 의 합성어이다. 

 

 

시연영상

• 진행기간: 2022.04.18~2022.04.29
• 구성: Front-End 5명 , Back-End 1명

 

 

 

 

2.  ⚒️ 기술 스택

 

FrontEnd

- React.js
- Router
- StyledComponents
- Restful API
- Git & GitHub

 

 

3.  🧱 Modeling & Backend Architecture

 

 

 

4. Front  구현기능 

• Header UI 및 기능

• 스크롤 시 Header 에니메이션 & 헤더 레이아웃 로그인/로그아웃에 따라 조건부 렌더링
• 로그인/로그아웃에 따라 조건부 렌더링
• list & detail page header 검색시작하기 버튼 클릭 시 search UI 띄우는 기능

 

• Search UI 및 기능

• 위치, 체크인 & 체크아웃, 인원 및 반려동물 동반 여부 검색 기능
•  date picker라이브러리를 이용하여 캘린더 구현

 

• Login & signup Modal UI 및 기능

• 회원가입로그인 클릭 시 모달 팝업
•  회원가입 시 이메일 형식 여부 체크 비밀번호 유효성 검사 정규표현식 적용
•  아이디비밀번호 오류 시 예외처리
•  로그아웃 시 Localstorage에 저장된 JWT 토큰 삭제

 

• Main Page UI 및 기능

 

• 5개 주요 도시 숙소 바로가기 Carousel 구현
• 반응형

 

• Footer UI
  
  • 반응형

 

 

 

📝 회고를 해보자 

 

💡 이번 프로젝트에서 실천하고자 한 것

 

• React hooks 에 대해 이해도 높이기
• 프로젝트 일정 맞추기

 

 1차 프로젝트를 하고 나니까 시원 섭섭한 느낌이 있었다. 전반적으로 만족 했지만 아쉬웠던 부분을 토대로 다음 프로젝트에서

채우고 싶은 목표를 생각해 보았다. 

일단 React Hook에 대한 전반적인 이해도를 높이고 싶었다.

페이지의 최적화를 고려한다면 적절하게 react hook을 사용해야 하기 때문에 react hook을 적절한 상황에 맞게 사용해보고자 했다. 

그리고 이번 프로젝트 중간에 이사계획이 있기 때문에 프로젝트 일정에 차질이 생기지 않게 신경써야 했다. 

 

 

1차 프로젝트를 마무리 하고 나서 어느정도 자신감이 붙어있었다. 그래서 1차때 제안했던 cream 사이트를 한 번 더 들고 갔다!ㅋㅋㅋ 

내가 크림을 꼭 해보고 싶던 이유는 커머스, 소셜 구현을 동시에 접할 수 있고 전체적인 UI가 깔끔해서 사용자 인터페이스 부분에서도

배울게 있다고 생각했기 때문이다. 

팀원 모두 사이트 두 개씩 뽑아서 결정하기로 했는데,  만장일치로 에어비앤비를 선택해서 2차프로젝트는 에어비앤비가 되었다.

1차에 비해 구현 해야할 양이 몇 배로 늘었다. 막상 에어비앤비가 뽑히고 나니까 걱정이 밀려왔었다.

내가 프로젝트 첫 주에 이사를 해야 했기 때문에 물리적인 시간이 부족할 것 같았다.

 

 

 

예상대로 이사랑 병행하면서 프로젝트를 하는 것은 힘들었다. 이삿날이 프로젝트 첫 주 금요일이었는데,

금토일 3일동안 코딩에 손도 못댔다. 가장 코딩을 많이 할 수 있는 시간을 못썼기 때문에 너~~~~무 걱정됐었다.ㅠㅠ

 

 절대로 프로젝트 진행속도에 뒤쳐지면 안된다고 생각해서 그 다음주 월요일부터 위워크에 매일 나갔고, 밥 먹는 시간 빼고 하루종일 개발만 해서 진행 속도를 쫓아갔다.

잠을 줄여서라도 하루에 목표한 계획은 다 이행했고 block이 생기면 바로 공유해서 지체하는 시간을 줄였다. 

이렇게 프로젝트 진행 속도를 따라가서 맡은 페이지들의 기능 구현을 끝낼 수 있었고, (배포 직전에 버그가 생겨서 완성도는 떨어졌지만....ㅠㅠ) 개발 마무리 단계 쯔음 새벽에 프론트 팀원만 줌으로 모여서 구현되지 못한 기능들을 공유했는데 남은 작업물을 추가적으로 같이 도와 드릴 수 있었다.

 

 

 

 

 

 

👯👯 협업의 경험

 

 

 너무나도 다행히 이번 팀원들과도 분위기가 너무 좋았다.

 

우리는 데일리 미팅을 10시 30분에 했었는데 매일 서로 전 날 한 일, 오늘 할 일, block 상황을 공유하여 진행 속도를 맞추어 나갔다.

구현 사항에 대해 고민되는 문제가 있다면 같이 의견을 공유하고 답을 찾아나갔다.

돌이켜보면 매일 그렇게 했기 때문에 그 많은 기능을 구현할 수 있었던 것 같다. (그리고 그 속에서 혜원님의 리드와 공이 많이 컸다..!)

 

 내가 구현하기 제일 힘들었던 부분은 검색기능 구현이었는데, 처음부터 막막하기만 했다.

유저가 클릭한 것들을 어떻게 담아서 어떻게 보내야하는거지..? 혼란스럽고 어렵게 느껴졌었다.

내가 담은 검색정보를 혜원님이 맡은 페이지에 보내야 했기 때문에 혜원님과의 소통이 필수였는데, 혜원님께 조심스럽게 물어보니

"아 이거 이렇게 ~~ 해서 제 페이지로 보내시면 돼요" 이 한마디로써 내 고민이 사라졌다. 

 

2주차에는 5월 5일 어린이날(이라고 쓰고 어른이날이라고 읽는)이 끼어있었는데, 프론트 팀원만 모두 줌으로 모여서 도커를

이용한 배포를 시도했었다.

반나절이 걸리도록 해결이 안되고 똑같은 것을 여러번 반복하는 과정도 있었지만 모두가 싫은 내색 하나 없이 끝까지 시도해봤다.

결국엔 도커로 배포하는 것은 실패하고 다음 날 aws를 이용하여 배포를 마무리 했다!

지체되는 시간 속에서 트러블이 날 수도 있는 상황이었는데,

긍정적인 팀 분위기 안에서 마무리 하게 되어서 개인적으로 좋은 기억으로 남았고 팀원들에게도 배운 점이 많았다. 

 

한 가지 반성할 점도 있다.

이번 프로젝트에서 우리팀의 팀워크도 정말 좋았다.

한 팀원분께서 맡으신 페이지의 구현 기능들이 많고 어려웠는데,

block 상황들을 바로 공유해주셔서 팀원 중 몇 분이 그 페이지의 기능을 나누어서 같이 구현하셨다.

나는 그때 내가 맡은 페이지를 구현하느라 급급해서 신경을 많이 못 썼었다.

사실 '에이~ 다른 분들이 잘 도와주고 계실거야. 내가 맡은 거나 잘 하자!' 라는 생각을 했다.

프로젝트가 끝나고 내가 안일하게 생각했고, 나무만 보고 있었다는 것을 알았다.

맡은 일을 완성도 있게 진행하고 마무리하는 것도 중요하지만,

그 과정에서 다른 팀원들의 진행 상황도 함께 볼 줄 알아야 한다고 느꼈다. 

 

 

 

 

🌝 회고를 마치며 ..

 

2차 프로젝트가 끝났을 때는 1차에 비해 더 아쉬움이 컸다. 이제 동기들과 헤어진다는 아쉬움...

하지만 1차에 비해 얻어가는 경험과 생각도 많다. 

함께 했던 팀원들에게도 많은 인사이트를 얻었던 프로젝트였다. 

 

처음 위코드(아니 저스트코드)를 등록할 때만 해도 내가 잘 할 수 있을지, 동기들은 어떨지 걱정과 고민이 많았었다.

그런데 그런 걱정이 무색할만큼 좋은 동기들을 만날 수 있어서 참 행복한 3개월이었다. 

3개월동안 나는 도움을 준 것 보다 받은게 많았다. 앞으로 멋찌게 성장해서 나도 다른 동료들에게 이런 시너지를 주고싶다.