💭 PROJECT OVERVIEW
숙박 예약 웹사이트인 여기어때 를 모티브한 프로젝트
평소 에어비앤비와 같은 숙박예약 사이트를 클론코딩하면 재밌겠다라는 생각을 하고 있었는데 이번 2차프로젝트에서 비슷한 플랫폼을 가진 '여기어때' 웹사이트를 맡게 되었다! 1차 프로젝트에서는 로그인-회원가입-상품디테일-주문 부분을 맡았는데 이번 프로젝트에서는 메인-상품리스트 부분을 맡게 되어 해보지 않은 파트와 기능들을 구현할 수 있었다.
리액트 라우터를 이용한 유동 라우터기능을 많이 써보는 것이 우리사이트에는 너무 좋다!
준식멘토님의 말씀을 듣고 많이 써보자! 라는 목표를 가지고 또 쿼리를 쓰는 파트를 맡게 되어서 쿼리 스트링을 마음껏 쓸 수 있었던(쿼리 지옥에 빠졌던) 프로젝트였다
이번 2차 프로젝트에서는 질 좋은 코드, 함수형, Hooks, 스타일 컴포넌트를 적용할 수 있는지를 중점에 두며 진행했다.
작업 기간
2021.04.26 - 2021.05.07
기술 스택
프론트엔드 3명
HTML, JavaScript(ES6+),React Hooks, Styled-component
백엔드 3명
Python, Django, bcrypt, pyjwt, unittest, MySQL, AqueryTool, AWS EC2, AWS RDS, AWS S3, Docker
협업도구
slack, git, trello
⚡️ 주요 구현 사항
내가 기여한 부분은 옆에 이모티콘을 달았고, 기억하고 싶은 코드에 더욱 자세하게 적어놓았다.
- 반복되는 input에 component를 사용하여 회원가입 페이지 구현
- 카카오API를 이용한 소셜 로그인 연동
- 로그인 & 회원가입 access_token 을 이용한 유효성 검사
- 소셜 로그인 시(토큰 유무에 따른) nav bar 카카오톡 이름(닉네임), 예약내역 표시
- 메인페이지, 리스트페이지/에어비앤비 캘린더Library 활용 및 레이아웃 구현 ⚡️
- 메인 페이지, 리스트 페이지/ Query String을 사용한 통신 (숙박유형, 지역, 날짜, 인원수 선택) 에 따른 filtering ⚡️
- 필터링된 호텔 리스트 추천순, 평점순, 가격순, 성급별 sorting ⚡️
- 리스트 페이지 호텔별 성급, 리뷰에 따른 코멘트 라벨 컴포넌트화 ⚡️
- 날짜, 인원 재검색에 따른 결과 표시, Query String으로 디테일페이지 통신 ⚡️
- 호텔 상세페이지 레이아웃/카카오지도 API에 활용 및 숙박지도표시
- 필터링된 룸 타입에 따른 숙박예약
- S3를 이용한 사용자 예약여부에 따른 리뷰쓰기/리뷰등록
- Query Parameter로 숙박 정보 받기/숙박 예약하기
- 예약내역 확인/ 리뷰등록 후 예약완료에서 숙박완료로 라벨 변화
구현 화면
- 카카오 소셜 로그인/ 로그인에 따른 카카오톡 닉네임 nav bar 표시
- 휴대폰 인증을 통한 일반 회원가입/로그인 & 회원가입 access_token 을 이용한 유효성 검사
- 메인 페이지/ Query String을 사용한 통신 (숙박유형, 지역, 날짜, 인원수 선택) 에 따른 filtering
- 리스트 페이지/ 필터링된 호텔 리스트 중 다시 추천순, 평점순, 가격순, 성급별 sorting
- 리스트 페이지 호텔별 성급, 리뷰에 따른 코멘트 라벨 컴포넌트화
- 날짜, 인원 재검색에 따른 결과 표시
- 호텔 상세페이지 레이아웃/카카오지도 API에 활용 및 숙박지도표시
- 필터링된 룸 타입에 따른 숙박예약
- 예약하기/ 예약완료 페이지
- 숙박예약한 사용자만 리뷰등록 가능/ 리뷰 등록 후 예약 완료 페이지 숙박완료로 라벨 변화
💗 PROJECT REVIEW
1차때와 무엇이 달라졌나?
2차 프로젝트부터 클래스형 컴포넌트에서 함수형 컴포넌트와 Hooks를 사용하게 되었고, sass가 익숙해졌다 싶었는데 styled-component로 한 파일에서 레이아웃을 구현하게 되었다. git 또한 git rebase를 쓰며 좋은 기술들, 우리에게 필요한 기술들을 배울 수 있던 시간이었다. 아직 소화가 되지 않았다고 생각했는데 막상 새로운 것들을 접해보니 더욱 편리하다는 것을 느꼈다. 우리팀은 처음부터 모두 함수형 컴포넌트를 쓰자! 고 목표를 잡았고 다들 이해가 안되는 부분은 같이 공부하며 차근차근 해결해 나갔다. 많은 기능 구현보다는 1차부터 시작해 그동안 배운 개념들을 다시 한번 되짚고 적용해보는 값진 시간이었다.
또한 컴포넌트화가 조금은 익숙해졌다.
처음에 나눌 때는 하나의 부모 컴포넌트에서 값들을 내려줘야하는 단방향 플로우를 따라야하는 개념이 가장 중요하다. 1차 때는 이를 간과하고 데이터들이 여기저기 뿌렸었는데 1차 때 by종택멘토님의 말씀을 계속 생각하며 미리 큰 그림으로 생각했다. 컴포넌트들을 나누며 쿼리 스트링으로 이용해야 하는 state 값들을 한 곳에 모아 어렵지 않게 잘 사용할 수 있었다! 1차때의 코드는 조금 난잡한 감이 없지 않은데, 2차 때의 코드는 1차 때에 비해 가독성 있게 성장한 것같다!
역시 소통이 좋고, 통신이 좋다!
이번에도 역시 Trello에 매일 회의기록을 작성하고 정해진 시간에 standup meeting을 통해 프론트의 진행상황, 백의 진행상황 그리고 통신 맞춰볼 날짜들을 공유하며 하나씩 맞추어 나갔다. 프론트팀 또한 메인/리스트 기능을 따로 나누었었는데 막상 구현하다보니 데이터를 필터링 하고 백과 주고받는 과정에서 한 사람이 파트를 맡는 것이 낫다고 판단하여 1주차가 끝나갈 때쯤 계획을 변경하기도 하였다. 각자가 맡고 싶은 부분과 각자의 속도에 맞춘 부분을 잘 분배한 것 같다!
프론트! 파트를 나눠봅시다~ 백!무엇을 주고 받을지 맞춰봅시다~
나와 같이 쿼리파트를 맞추신 수민님은 데이터 준비가 모두 되었는데 내가 쿼리스트링으로 보내는 과정에서 자꾸 에러가 났었다. 목표했던 걸 채우지 못한 스스로에게도 화가 나고 끝까지 해보자는 마음으로 주말에 스터디 후 수민님의 노트북을 들고 집에 가서 혼자 통신해본 기억도 난다...와이파이에 따른 새 주소 때문에 ipconfig 를 처음 쳐본 짜릿한 과정...(풀스택의 기분을 잠-깐 느껴봤다)
보내는 값이 자꾸만 undefined이 뜨다가 드디어 200 OK을 보다...! ( ˃⍨˂̥̥ )
두 번 했으니 세 번, 네 번하면 더 나아지겠지?
두 번의 프로젝트를 하면서 느낀 점이다. 초기셋팅도 어렵지 않게 할 수 있었고 익숙해진 부분들이 분명 있었다.
이를 토대로 계속 해서 배워야하는 개발자의 운명에 '꾸준함'이 답이라는 깨달음을 얻었다. 개발자라는 길을 선택했을 때 이미 이런 부분은 각오를 하고, 무너지지 않도록 스스로를 단련하고자 했다. 이번 프로젝트를 통해서도 나를 단련시켰으며, 많은 로직을 접해보고 많이 생각해보고 익숙해질 때까지 부단히 노력해야한다는 것을 다시 한 번 상기했다.
이번 프로젝트에서 함수형 컴포넌트, hooks 와 styled-component를 익혀봤던 것 처럼, 한 두번의 경험들이 쌓이면서 계속하여 성장할 것을 믿는다.
그리고 이번 프로젝트 또한 너무나도 멋지고 좋은 팀원들을 만나게 되어 참 감사하다.
프론트팀은 첫 날 작은 화이트보드방에 모여 아자자를 외치며 도원결의를 했던 기억도 난다. 서로가 서로에게 존재만으로도 의지가 되어주었던 팀이었다.
마지막날까지 팀원모두가 제일 일찍 등원하여 마무리를 위해 고군분투했던 기억도 난다. 개인적으로 마지막에 잘 풀리지 않는 부분이 있어서 속상해하며 자책했던 기억도 있는데 이것들도 다 좋은개발자가 되기 위한 자양분이 되는 경험이란 걸 믿는다. 2차 또한 빈 백지에서부터 시작했는데 벌써 이런 멋진 웹사이트를 만들다니 벌써 지난 2주의 시간들이 꿈만 같고 아른거린다.
외로운 개발자의 길..?
함께해서 외롭지 않아..!고생하며 함께하는 팀워크와 커뮤니티가 얼마나 소중한지..! 이 프로젝트와 팀원들...잊지 않겠다! l 𐊮:)و ̑̑ ♡
단비짱.. 2차 넘 고생하셨어요🥺💕