여기어때 클론 프로젝트
프로젝트 소개
- 팀명: 야,여기 어때
- 설명: 종합숙박 O2O 서비스 여기어때 사이트 클론 프로젝트
개발 기간
- 21.4.26 ~ 21.05.07 (11일)
개발 인원
- 프론트엔드: 김효진 박단비 박성은
- 백엔드: 백승찬 신지원 황수민
프론트엔드 기술스택
- JavaScript(ES6)
- React.JS(함수형 컴포넌트, Hook)
- Styled-Component
- Kakao Map API
- Kakao Login API
- JSX(HTML)
협업도구
- Git, Github : 버전관리 및 협업
- Trello : 일정 관리
- Slack : 비대면 소통
프론트엔드 주요 구현 사항
Front-end 3명이서 구현해야할 페이지를 아래와 같이 분담하였다.
(직접 구현✅ 팀원 구현 🟩)
🟩 로그인, 회원가입(일반/소셜 로그인) 및 Navbar
🟩 메인 페이지 및 호텔 리스트 페이지
✅ 호텔 디테일페이지, 예약 및 예약내역, 리뷰 생성 기능
로그인,회원가입(일반/소셜 로그인) 및 Navbar 구현
🟩 카카오 소셜 로그인/ 로그인에 따른 카카오톡 닉네임 nav bar 표시
🟩 휴대폰 인증을 통한 일반 회원가입/로그인
메인페이지 및 호텔 리스트 페이지
🟩 메인 페이지 / 숙박유형, 지역, 날짜, 인원수 선택 에 따른 필터링 검색
🟩 호텔 리스트 페이지 / 필터링된 호텔 리스트 중 다시 추천순, 평점순, 가격순, 성급별 필터링
호텔 디테일페이지, 예약 및 예약내역, 리뷰 생성 기능
✅ 호텔 상세페이지 / 카카오 지도 API를 활용한 지도 표시, 룸 타입에 따른 숙박예약
✅ 상세페이지에서 선택한 룸 예약 및 예약 후 내역 페이지
✅ 예약을 한 사용자에게만 리뷰쓰기 권한 부여 및 Amazon S3를 이용하여 리뷰등록
프로젝트 소감
위코드에서 진행한 두 번째 클론 프로젝트.
이번 프로젝트에서는 1차에서 겪었던 문제점을 보완하고자 많이 노력했다.
나는 호텔 디테일 페이지, 예약 및 리뷰 생성 페이지를 맡게 되었다. 이전 프로젝트에서 class형 컴포넌트를 사용하여 작업했기에 이번에 우리팀은 함수형 컴포넌트 및 hooks로, 스타일 작업에서는 기존의 SASS가 아닌 styled-component를 사용하여 구현하기로 했다.
1차와는 다르게 새로운 기술을 적용하는 만큼 공부를 병행하며 작업을 진행해야했다. 함수형을 처음 적용해보았고 초반에는 익숙하게 사용하는 것에 어려움이 있었지만 차츰 익숙해지면서 점차 class형보다 훨씬 간결하고 직관적인 코드를 작성할 수 있어서 좋았다.
styled-component를 이용한 스타일 작업 역시 스타일 파일을 따로 두어 작성하지 않아도 되는 점, 기존의 방식처럼 요소 자체에 class명을 부여하여 스타일링 작업을 하는 것이 아니라 아래와 같이 스타일링 부분 자체에서 props를 받아 로직을 작성하는 조건부 스타일링 처리가 가능한 것 또한 편리해서 좋았다.
개인적으로 이번 프로젝트는 1차에서 시행착오를 겪었던 부분을 다시금 단단하게 다질 수 있게 해줌과 동시에 새로운 기술을 습득하는 것에 대한 두려움을 덜게 해준 매우 유의미한 프로젝트였다.
잠깐이었지만 진정 개발자의 삶을 사는 것이 어떠한 것인가에 대해 알 수 있었던 경험이었다.
항상 새로운 기술은 있었고, 내가 이걸 할 수 있을까 두려움이 앞섰던 것은 사실이지만, 결국에는 공부를 해서 적용할 수 있었다는 것, 구현을 해냈다는 사실이 매우 뿌듯하다.
새로움에 대한 두려움을 버리고 도전하는 것, 그것이 개발자가 되기 위한 여러가지 덕목 중 하나가 아닐까 한다.
🎬야,여기어때 전체 구현 영상 : https://www.youtube.com/watch?v=HhGPW_Zb-p4
🎈야,여기어때 프론트엔드 깃헙 주소 : https://github.com/wecode-bootcamp-korea/19-2nd-betterChoice-frontend
