[2차 프로젝트 회고] 2022.4.11 ~ 2022.04.22

🕌 Airbnb- [가제: 돌하룻밤]🕌

 

 

세계 최대 숙박 공유 사이트 Airbnb를 모티브 한 프로젝트 회고 

 

[FE]

윤서영, 김민주, 김보윤, 김동욱

[BE]

김수훈, 한상안

 

 

 

돌하룻밤 팀의 이름의 뜻? 

=> 기존의 에어비앤비 사이트의 취지와는 다르게 '제주도에서의 달콤한 하룻밤'을 모티브로 만듬.

 

 

 

'돌하룻밤' 팀의 필수 구현 사항

• [login] 로그인 회원가입 소셜 로그인 기능 구현
• [Nav] 모달창, 숙소검색 (위치, 체크인, 인원)
• [Hosting] 호스트 등록 및 숙소 등록 기능 - Form data
• [Staylist] 숙소 목록 페이지 - 메인페이지에서 검색된 숙소 세부 필터링
• [Staydetail] 숙소 상세페이지

 

 

[FE 맡은 부분 정리]

1.서영 -  로그인/회원가입(소셜로그인기능)

메인페이지 (NAV BAR, 달력 라이브러리 이용 및 인원 필터 기능, Query string 으로 staylist 페이지 전달 기능)

사용한 기술

• React(CRA, Hooks)
• 소셜로그인 API
• Styled-Component
• AWS

 

협업 툴

• Git, Github
• Slack
• Trello

 

2.민주 - 숙소 호스팅 페이지

3.보윤 - 숙소 리스트 페이지 

4.동욱 - 숙소 디테일 페이지 

 

 

[BE 맡은 부분 정리]

1. 수훈 - ERD 구성, 호스팅, 숙소 상세정보, CSV 작성, AWS(RDS, EC2) 배포

2. 상안 - ERD 구성, 카카오 소셜로그인, 숙소 다중 필터링, AWS(RDS, EC2, S3) 배포, API 문서작성

 

 

 

우리가 협업한 방법

 

 

1. 프론트엔드 & 백엔드와 DB모델링 진행

매일 스크럼 meeting 진행 (최대 15분 넘지 않게 주의)

=> 미팅 회의록을 작성하여 기록. 

매일매일 공유하며 일을 능률을 높임.

 

2. 서로의 진행상황을 공유 할 수 있는 트렐로 작성

=> https://trello.com/b/HgFOGuAD/%EB%8F%8C-%ED%95%98%EB%A3%BB%EB%B0%A4-trello

 

 

3. 문서화 

https://simplistic-peridot-7d1.notion.site/DolHaru-256e0b5f7de24c0ba81d7e7e11644089

 

 

 

 

기억하고 싶은 코드

 

1차 프로젝트에 했던 '다중필터' 페이지와 다르게

NAV, MAIN, 소셜로그인/회원가입을 담당하게되어

모달창, Query string, 소셜로그인, 달력 라이브러리 등

다양한 기능을 구현해 볼 수 있는 좋은 기회였다.

 

⭐모달창 구현 영상

 

 

⭐소셜로그인 구현 영상

 

 

⭐보여주고 싶은 코드

import qs from 'qs';

  const queryString = qs.stringify(
    {
      maxAdult: `${personnelCount.adult}`,
      maxKid: `${personnelCount.children}`,
      maxPet: `${personnelCount.pet}`,
    },
  );

 

코드를 작성하며 1차 프로젝트 때와 달랐던 점은
전에는 쿼리 스트링의 키값과 밸류 값을 직접 하나하나 작성해 주었었다.
2차 프로젝트를 하면서는 라이브러리를 많이 사용해 보자는 목표를 잡고 'qs' 라이브러리를 사용해 보기로 했다.
'qs' 라이브러리는 쿼리 스트링을 파싱 하거나, 스트링화하는 간편한 라이브러리로
키, 밸류 값만 적으면 스트링화 시켜주며 이퀄(=)과 앰퍼샌드(&)를 자동으로 연결 넣어준다.
그로 인해 복잡한 쿼리 스트링도 하드코딩 없이 쉽게 만들어 주었다.

 

 

AWS 배포

👇

http://dolharufe.s3-website.ap-northeast-2.amazonaws.com/

 

 

 

👩‍💻마무리

이번 프로젝트를 한마디로 설명하자면
한 번도 사용해 보지 못한 라이브러리와 여러 가지 기술 셋을 익히기 위해 시작한 프로젝트라는
설명이 딱 들어맞았던 것 같다.

항상 쓰던 SASS를 벗어나 스타일 컴포넌트라는 새로운 라이브러리를 사용해보았고,

달력 라이브러리를 커스텀하는 방법을 알게 되었고 qs라이브러리사용, 또

기존의 로그인/회원가입 방식이 아닌 새로운 '카카오 소셜 로그인'을 진행해서 정말 재밌었던 프로젝트였다. 

 

 

마지막으로, 우리 팀원분들!!!!

항상 긍정적이고 도전을 끊임없이 시도하시는 분들과 함께하게 되어 영광이였습니다.
다들 감사하고 고생많으셨습니다! 👍