React | stayfolio 클론 프로젝트

Teasan·2020년 10월 25일
1

wecode

목록 보기
1/2
post-thumbnail

프로젝트 소개

숙박 예약 사이트인 stayfolio 의 기획/디자인을 제외한 주요 기능을 구현하였습니다.

👩🏻‍💻 👨🏻‍💻 Team stayWefolio

◼️ FrontEnd

신은선(Product Manager) / 민지연 / 김보라 / 서수연

◼️ BackEnd

김지훈

◼️ 프로젝트 기간

2020.10.19 ~ 2020.10.30 (약 2주간 진행)


◼️ 프로젝트 구현 영상

🔹 메인 화면

🔹 구현 영상 링크


◼️ 주요기능

  • slick slider 라이브러리를 이용한 슬라이더 기능
  • 동적 라우팅을 이용한 페이지 이동 기능
  • 로그인/회원가입 기능
  • 달력 기능
  • 예약 사항에 따른 금액 계산 기능
  • 예약 및 예약 확인 기능
  • google map API를 이용한 지도 기능

◼️ 기술스택

🔹 front-end

  • HTML, SASS
  • React / Javascript
  • CRA, npm
  • git / prettier / ESLint / trello

🔹 back-end

  • Python / Django
  • MySQL

🔹 협업 도구

  • Slack
  • Git + GitHub
  • Trello
  • Postman (API 관리)

🔹 추가 설치 라이브러리

  • slick
  • react-router
  • node-sass
  • react-daterangepicker
  • google-map-react
  • font-awesome

◼️ 내가 구현한 기능

  • Role : Team Member
  • Position : Front-end
  • Stack : React / Javascript / Sass / Router
  • Works :
    1) 디자인을 바탕으로 Component 설계 및 CSS를 이용한 style 구현
    2) Component 구현과 관련 API 연결
    3) 로그인 - 조건식에 따른 경고 메세지 구현, 로그인 활성화 반영
    4) 회원가입 - 조건식에 따른 경고 메세지 구현, toggle 버튼을 이용한 펼치기/숨기기 기능 구현, 전체동의 checkbox 자동 반영
    5) Booking main - API로 받은 이미지, 텍스트 데이터 반영
    6) 예약페이지 약관동의 - contents data로 분리 및 관리, map methods를 사용하여 data 렌더

◼️ 진행 과정

🔹 trello

📍 trello를 이용하여 팀의 작업 현황과 각자의 진행사항 확인 및 공유

🔹 10 minute meeting

📍매일 아침 10분간 팀원들과 각 파트별로 진행상황 발표 및 피드백 공유와 일정 조율을 하였다.

🔹 Github

📍 github에서 각 기능 별 branch를 생성하여 git을 이용한 버전관리 및 협업을 진행했다.


◼️ 기억에 남는 코드


조건식에 따른 경고 메세지를 구현했던 코드가 가장 기억에 남는다. 어찌보면 toggle 버튼을 이용한 펼치기/숨기기 기능 구현, 전체동의 checkbox 자동 반영 등의 기술 구현보다 단순한 식이라고 생각할 수도 있지만 첫번째 팀 프로젝트를 하면서 처음으로 class형 Component로 식을 작성하고 constructor에 초기값을 지정한 뒤에 그 초기값을 이용해서 조건식을 적용해본 경험이 처음이었기에 가장 기억에 남는 것 같다. 🙌🏻

◼️ 구현 영상


◼️ 팀 프로젝트 후기

좋았던 점
백엔드를 비롯한 다른 개발자(동기)들과 팀으로 작업하면서 처음으로 실무에 가까운 경험(?)을 해보고 그동안 배운 React를 사용하여 여러 기능을 새롭게 구현해볼 수 있어서 즐거웠다. 무엇보다도 같은 목표의식을 갖고 매일 함께 열심히 달렸던 시간들 덕분에 전날 새벽까지 막혔던 코드가 다음날 아침에 마법처럼 쉽게 해결되었던 일 모두 멋진 추억이 됐다. 매일 아침마다 10분씩 미팅을 하면서 팀원들과 가볍게 커피도 마시고 작업 진행 상황에 대해서 피드백도 자유롭게 공유하고 또 힘든 와중에도 실없는 농담으로 웃던 시간들 모두 즐거운 기억으로 남았다.

아쉬웠던 점
시간 분배를 제대로 하지 못했다. 또 초반에 막히는 문제가 발생했을 때 혼자서 해결해보겠다고 너무 많은 시간을 허비했던 것이 아쉽다. 좀 더 빨리 적극적으로 멘토님이나 다른 동기들에게 도움을 요청했다면 그 시간에 더 많은 기능을 구현할 수 있었을 것 같다.

그리고
팀 프로젝트는 시작하기도 전부터 걱정과 두려움이 컸다. 처음으로 다른 개발자(특히 백엔드)들과 소통하면서 그것을 바탕으로 코드를 작성해야 한다는 것과 부족한 실력으로 다른 팀원들에게 폐를 끼치지 않아야 할텐데 하는 생각, 그리고 이 짧다면 짧을 수 있는 2주라는 시간동안 제대로된 결과물을 만들어낼 수 있을지 등등과 같은 끝도 없이 쏟아지던 걱정들. 하지만 팀 프로젝트를 시작하는 첫날부터 미리 겁을 먹고 걱정했던 일이 바보같이 느껴질 만큼 좋은 시간을 보내게 되었다. 물론 운이 좋게도 또 감사하게도 좋은 팀원들을 만난 덕택이다. 아직도 어색한 부분이긴 하지만 어려운 부분이나 막힌 부분이 있을 때 생애 처음으로(!?) 소통하면서 도움을 구해보기도 하고 또 미약하게나마 다른 팀원에게 도움을 주기도 해봤다. 위코드를 처음 들어왔을 때부터 "내가 잘 할수 있을까? 나와는 맞지 않는 일이면 어떡하지?" 하는 두려움이 가장 컸는데 놀랍게도 첫번째 팀 프로젝트를 하면서 이런 고민들이 서서히 옅어지기 시작했던 것 같다. 물론 어려움도 당연히 있었다. 다른 팀원들은 이미 기능 구현을 끝내놓았는데 나 혼자서만 가장 진도가 느릴 때도 많았고 또 하루종일 붙잡고 있던 코드가 해결되지 않았을 때마다 포기하고 싶은 마음도 들었다. (솔직히 매일 집으로 가는 길에 혼자 울었던 것 같다.) 아직도 완벽하게 만족스럽지도 않고 또 아쉬운 점도 많았지만 내 나름대로 열심히 고민한 결과가 느껴지는 코드들을 보면 어쨌거나 큰 성취감을 느끼지 않을 수가 없다. 무엇보다도 근사하고 멋진 사람들과 팀으로 만나 함께 보냈던 2주가 꿈만 같다. 앞으로 남은 프로젝트와 인턴쉽을 잘 해낼 수 있을지 아직까지도 자신이 없지만 개발자로서 한 발자국씩 성장해나갈 날들이 또 기대가 된다.

PS. stayWefolio 팀과 함께해서 너무나 행복했습니다.

profile
일단 공부가 '적성'에 맞는 개발자. 근성있습니다.

0개의 댓글