wecode 2차 프로젝트: Air BnB 클론 프로젝트

eunsonny·2020년 11월 15일
0

🙋 프로젝트 소개

숙박 예약 사이트 Air BnB 클론 프로젝트

  • 기간: 2020.11.02 - 2020.11.13 (2 weeks)
  • 팀 구성인원 : 프론트엔드 4명, 백엔드 2명
    (프론트엔드는 경민님, 양효님, 수명님 나 그리고 백엔드는 승호님, 창곤님이 함께 해주셨다!)
  • 프로젝트 소개 : 숙박 예약 사이트인 Air BnB의 주요 기능을 구현 하였습니다.
    디자인 및 기획은 본래의 사이트를 참조 하였으며, 기능은 처음부터 끝까지 직접 구현하였습니다 🙂 !!!


😙 사용기술

  • Front-End : React, Java Script(ES6), Redux, Styled component
  • Back-end : Django(python), Bcrypt, JWT
  • Version Control System : Git
  • Project management tool : Trello
  • Communication : Slack

****

😙 메인화면 이미지

📌  프로젝트 시연영상 : Air CnB


😙 내가 구현한 기능

📌  라이브러리와 CSS를 이용한 디자인 구현
📌  Component 구현과 관련 API 연결

** 📌  상품 디테일 페이지 구현**

  • url parameter를 이용한 동적라우팅 기능
  • 저장하기 버튼 누를 시 하트 색 변경 및 서버에 post method로 정보 전송
  • 리뷰 더 보기, 인원 설정, 달력 모달창 구현
  • 리뷰 더 보기 모달 창에서 스크롤 이벤트를 통한 무한 스크롤(Pagination) 기능 구현
  • Google Map API를 이용한 좌표 및 마커 설정 기능
  • React dates를 이용한 날짜(Check-In, Check-Out) 선택 기능
  • Redux를 이용하여 날짜 및 인원 정보 연동 기능
  • Slick slider를 이용한 image carousel 기능 구현

****

😙 기록하고 싶은 코드

모달 창을 좀 더 센스 있게 만드는 방법!

이번에 내가 만든 리뷰 모달창은 위의 사진과 같이 전체화면 위로 올라오는 형태였다. 이러한 모달 창은 모달창이 레이어의 최상단에 위치 해야 하는데, 나의 경우에는 다른 컴포넌트들이 CSS의 position 속성을 갖고 있는 경우가 많았고, 전체화면 모달창을 여러개 만들어야 하다보니 z-index를 이용하여 쌓임맥락을 정리하는 것이 상당히 어려웠다.
쌓임맥락과의 전쟁을 치루던 중 전체화면 모달창을 아주 손쉽게 만드는 법을 발견! 바로 portal을 이용 하는 것이다.
portal을 이용하면 react에서 부모 컴포넌트의 DOM 계층 구조 바깥의 DOM node에 children을 렌더할 수 있게 된다.

방법은 다음과 같다.


index.html 파일에 id="root"인 div 아래에 id="modal"div 태그를 만들어준다.

ModalPortal이라는 컴포넌트를 만들고 ModalPortal의 children은 index.html에 만들어 준 id="modal"<div> 에 렌더링 될 수 있도록 코드를 작성한다.

그리고 렌더링 시키고 싶은 Modal 컴포넌트를 <ModalPortal> 컴포넌트의 자식 컴포넌트가 되도록 작성한다. 이렇게 되면 <ReviewModal> 컴포넌트는 Review.js와는 다른 DOM node에 렌더링 되므로 쌓임 맥락에 상관없이 최상단에 노출 될 수 있게 된다.

<ReviewModal>의 CSS는 styled Component를 이용했으며 내용은 다음과 같다.



🥰 잘한 점

** 📌  라이브러리 뜯어보기**
지난 번 클론 프로젝트에서도 react-datepicker라는 달력 라이브러리를 사용했었지만 시간적인 부족함으로 인해서 샅샅히 뜯어보고 사용하지는 못했었는데 이번에는 처음부터 라이브러리를 제대로 사용해보고자 하는 목적으로 시간을 들여 react-dates를 꼼꼼히 뜯어보았다. 결과적으로 내가 원하는 달력기능을 다 구현할 수 있었다. 기본적으로 라이브러리에서 제공하는 기능은 물론, 해당 기능을 이용해서 커스텀 해야하는 부분들도 있었다.
react-dates의 컴포넌트 구조 하나 하나를 뜯고보고, 수없이 구글링 했던 것 같다(ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)
덕분에 stackoverflow 검색 능력 상승과 다음에도 라이브러리를 살펴볼 때 어떻게 살펴보아야 할지에 대한 감을 잡을 수 있었다!

** 📌  새로운 기술 스택 빠르게 익히고 적용하기**
이번에는 react class형과 Sass를 사용했던 것과 달리 react Hooks와 Styled-component를 사용하게 되었다. 짧은 시간 안에 새로운 기술 스택을 익혀서 바로 프로젝트에 적용한다는 것이 말 처럼 쉽지는 않았지만 일단 빠르게 공식문서와 자료들을 훑어보고 코드를 치면서 익혀가기 시작했다. 문제가 생길때마다 구글링하며 해결하다 보면 어느새 능숙하게 쓰고 있는 나를 발견하게 된다 (ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ) 한달 전 쯤의 나를 생각한다면 너무나 신기한 일이다.

🤢 아쉬운 점

** 📌  CSS animation의 사용**
사실 1차 프로젝트를 할 때에도 CSS의 사용보다는 Java Script를 이용한 기능구현 부분이 더 많았던 지라, 개인적으로는 이번 프로젝트에서는 CSS, 특히 Animation이나 keyframe 같은 것을 사용해 보고 싶었지만 아쉽게도 맡은 부분에서는 이러한 기능을 사용해 볼 부분이 없었다. 물론 추가적으로 내가 원하는 것들을 시도해 볼 수도 있었지만 .... 안타깝게도 시간적인 제약 때문에 그렇지 못했던게 아쉬운 부분이다 😂

profile
코린이 🙆

0개의 댓글