wecode 1차 프로젝트: Stay Folio 클론 프로젝트

eunsonny·2020년 11월 1일
1

🙋 프로젝트 소개

숙박 예약 사이트 Stay Folio 클론코딩 프로젝트

  • 기간 : 2020.10.19 - 2020.10.30 (2 weeks)
  • 팀 구성인원 : 프론트엔드 4명, 백엔드 1명
    (지연님, 보라님, 수연님, 지훈님 그리고 나!)
  • 프로젝트 소개 : 숙박 예약 사이트인 stayfolio의 주요 기능을 구현하였습니다.
    디자인 및 기획은 본래의 사이트를 참조하였으며, 기능은 처음부터 끝까지 직접 구현하였습니다 🙂 !!!

****

😙 사용기술

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

****

😙 메인화면 이미지

📌  프로젝트 시연영상 : stayWeFolio


😙 주요기능

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

  • 로그인, 회원가입 기능
  • Slick-slider 라이브러리를 이용한 슬라이더 기능
  • 동적 라우팅을 이용한 페이지 이동 기능
  • react-daterangepicker 라이브러리를 이용한 check-in, check-out 날짜 선택 기능
  • 숙박 예약 및 예약 확인 기능
  • query string을 이용한 pagination 및 필터링 기능

****

😙 내가 구현한 기능

📌  상품리스트 페이지 및 숙박 예약 페이지 구현

  • map method와 컴포넌트 재사용을 통한 상품 리스트 나열 기능
  • query string을 이용한 pagination 및 상품 필터링 기능
  • 페이지 선택에 따른 페이지 버튼 전환 기능
  • 필터링 옵션 선택 모달창 구현
  • 유동 라우터를 이용한 페이지 전환 기능
  • 달력 라이브러리(react-dateRangePicker)를 이용한 check-in, check-out 날짜 선택기능
  • 숙박일자 및 숙박 옵션 선택에 따른 금액 계산 기능
  • post method를 이용한 숙박예약기능

****

😙 기록하고 싶은 코드

페이지 선택에 따른 페이지 버튼 전환 기능

위의 버튼은 내가 실제로 구현한 페이지 전환 버튼이다. 사실 pagination (query string) 코드는 상당히 쉽게 해결했는데, 문제는 페이지 선택에 따른 버튼의 디자인 전환이였다. 상당히 다양한 조건 값을 맞춰야 했는데 그 조건들은 다음과 같다.

Max page는 20으로 설정

  • 선택된 현재 페이지는 배경색이 검은색으로 변경됨.
  • 1,2,3,4 페이지까지는 버튼의 숫자 배열이 변하지 않으며, 1,2,3 페이지의 경우 현재 페이지로
    선택 되더라도 위치가 변하지 않음.
  • 그러나 숫자4 이상의 페이지가 선택되면, 선택된 현재 페이지가 가운데로 중앙 정렬 됨.
  • 마지막 페이지의 경우에도 최우측의 숫자가 20이 되면 즉 17, 18, 19, 20 페이지가 현재 페이지로 선택 될 경우 숫자의 배열이 바뀌지 않으며, 18, 19, 20 페이지의 경우에는 현재 페이지로 선택되어도 위치가 변하지 않음.
  • 이전 페이지, 다음 페이지로 이동하는 꺽새 버튼의 경우에도 1, 2, 3, 18, 19, 20이 선택될 때는 중앙의 버튼이 아닌 선택된 위치의 버튼의 색을 변경시켜야 함.
  • 1 페이지와, 20 페이지가 선택 되었을 경우 꺽새 버튼을 눌러도 넘어가지 않도록 해야함.

이 모든 조건을 맞추기 위한 나의 코드는 다음과 같다.

상당히 긴 코드(함수)이긴 하지만 자랑하고 싶은 점은

  • switch 문을 사용해 1,2,3, maxPage, maxPage-1, maxPage-2, <, >가 선택 됐을 경우에 대한 값을 모두 설정해 주었다. 사실 처음에는 if문을 사용했었는데, 기능적으로는 문제가 없으나 가독성이 많이 떨어졌었는데 리팩토링을 통해 switch문을 사용하니 보기도 훨씬 깔끔하고 기능도 눈에 더 잘 들어오게 되었다.

  • maxPage 라는 변수를 선언해서 사용함으로써, 페이지의 한도를 높이고 싶은 경우 코드를 변경할 필요 없이 maxPage만 바꿔주면 된다. (즉, 유지보수 성이 높아진다)


****

🥰 잘한 점

📌  협업!!!
확실히 프론트엔드와 백엔드가 함께 프로젝트를 해보니, 어떻게 협업을 해야 하는지에 대해 잘 알 수 있었다. 처음에는 조금 감이 안왔는데 최대한 자주 소통하면서 맞춰가기 위해서 노력했고 결과적으로 큰 문제 없이 모든 페이지들을 잘 맞출수 있었다. 소통의 중요성도 크게 느꼈고 이 경험을 바탕으로 다음 프로젝트에서는 더 잘 할 수 있을 것 같다는 생각이 들었다

📌  유동 라우터의 다양한 활용
내가 맡은 Pick Page는 상품리스트나열 페이지였는데, 여기에는 필터 박스를 이용한 3중 필터링 기능은 물론 pagination 기능이 있는 페이지였다. 따라서 해당 기능을 구현하기 위해서 Query string을 사용했다. 단순 pagination 뿐만 아니라 filtering 기능이 같이 되어야 했고, filtering 조건값이 없는 상태에서 3, 4페이지를 보고 있었더라도 filter가 걸리는 순간 filtering된 데이터의 1페이지로 가게 해야하는 점이 까다롭게 느껴졌다. 하지만 새벽 두시까지 고민한 끝에 결국 성공!
뿐만 아니라 상품 리스트 페이지에서 상품 상세페이지로 넘어가는 기능을 구현하면서 url parameter도 이용하게 되어 유동라우터에 대해서 더 잘 알수 있게 되는 계기가 되었다

📌  적절한 목표 설정과 스케쥴 관리
우리 팀은 너무 과한 목표 보다는 현실적으로 실현가능한 목표에 집중하기로 했고 덕분에 모두가 1차 스프린트로 설정한 목표를 달성할 수 있었다. 그리고 수시로 서로의 작업 상황에 대해서 공유하며 스케쥴을 조정했기에 2차 스프린트로 목표한 것들도 모두 달성할 수 있었고 오히려 나중에는 추가 작업이 가능한 시간들도 생겼다. 모두 목표를 달성하다 보니 성취감도 높아지고 완성도도 높아질 수 있었던 것 같다!


🤢 아쉬운 점

📌  commit 라인 관리
아직 그 때 그 때 마다 commit 하는 습관이 안 들어서 그런지, 자꾸 push하기 직전에 몰아서 한번에 add, commit, push를 하게 됐다 😥 그러다보니 commit message에 마지막으로 구현한 것만 적게 되고(?) 실제로는 commit과 commit 사이에 많은 일들이 일어났음에도 불구하고(?) commit message에 제대로 표현할 수 없게 되었다. 다음 프로젝트에서는 꼭! 하나 하나씩 정리될 때 마다 commit을 남겨서 아름다운 commit line을 가지는 것이 목표이다.

📌  달력 라이브러리의 사용
이번에 사용한 라이브러리는 react-dateRangePicker 였다. 우리는 숙박예약을 위해서 data range를 가져와야 했기 때문에 이 라이브러리를 사용하게 되었다. 사실 달력 라이브러리 여러개를 다운받아서 살펴 보았는데 제일 처음 사용하고자 했던 것은 react-dates라고 하는 라이브러리였다. 이 라이브러리는 airBnB에서 제공해 주는 것으로 사용하기에 다소 복잡(?)하기는 하지만 많이 쓰인다고 해서 욕심이 났었는데, 시험용으로 한 번 다운 받아보니 보다 시간을 들여 뜯어보아야지 제대로 사용할 수 있겠다는 판단이 들었다.
하지만 그 때 당시 나에게 주어진 시간이 그다지 많지 않았으므로 욕심을 버리고 좀 더 사용이 용이한 dateRagePicker를 사용하게 되었다. 이 경험을 통해서 라이브러리를 쓴다고 해서 반드시 쉽고 빠르게 해결이 된다는 것은 아니라는 점(?)을 깨닫게 되었다. 그리고 조만간 시간이 될 때 react-dates를 꼼꼼히 살펴보는 시간을 갖도록 해야겠다!

profile
코린이 🙆

0개의 댓글