🛩 Project Overview
2차 프로젝트가 끝났다. 내가 제안했던 사이트인 스테이폴리오가 많은 투표를 받아 감사하게도 프로젝트를 진행할 수 있게 되었다. 스테이폴리오는 수많은 여행 플랫폼 중 나의 시선을 끄는 매력 포인트가 많았다.
첫번째로 정말 까다로운 조건으로 숙소를 큐레이팅하고 있다는게 한눈에 보였고, 이는 고객의 니즈를 심도있게 고민한다는 의미라고 생각했다.
두번째로 감성적인 UI와 디자인, 다양한 조건 필터링을 구현해보고 싶었고, 더불어 성장 가능성이 높은 플랫폼이라고 판단되었다.
Link
✔️ 결과물 시연 영상
✔️ Github Frontend
✔️ Github Backend
작업 기간
총 11일 : 21.01.10 - 22.01.20
인원
프론트엔드 3명 | 백엔드 2명
기술 스택
Used DevTools
JavaScript(ES6) | React.js | Styled-component
Collabo Tools
Git&Github | Slack | Trello
Libraries
React-router-dom | MUI Slide
Code Formatter
eslint | prettie
주요 구현사항
조건부 검색 페이지 담당
- 검색 버튼을 통해 원하는 조건(인원, 가격, 숙소 종류)을 설정하면, api가 호출 되는 동시에 전달 받은 데이터가 화면에 렌더링 됩니다.
Query String 및 데이터를 활용하여 조건에 맞는 호텔 리스트 시각화
- Query string 을 작성하며 블로커를 만나, 부족함을 채찍질하며 지치기도 했지만 여러 코드를 살펴보며 결국 해결해냈습니다.
- 스테이폴리오의 구조와 동일하게, ‘적용하기 버튼’ 클릭 시 query string을 붙여주고 query string이 변경되면 API를 호출했습니다.
- 하지만 ‘적용하기 버튼’ 으로 API호출을 하면 ‘SEARCH 버튼’의 존재 이유가 불분명하여 좋지 않은 UI라고 판단했습니다.
Refactoring (자세한 내용 보러가기)
- ‘적용하기 버튼’을 클릭 시 정보를 저장 후 Drop-down이 닫히며, ‘SEARCH 버튼’을 클릭 시 API 호출하도록 리팩토링 진행 중입니다.
항공권 검색 기능 Drop-down (인원, 가격, 숙소 종류)
- 고유한 ID값을 각각의 Drop-down에 설정 했습니다. 버튼의 ID와 Drop-down의 ID값이 동일하면 Drop-down이 렌더링 됩니다.
순수 CSS(Input Range)로 가격슬라이드 구현
- 버전의 의존성을 고려하지 않아 merge 과정에서 문제가 생겼습니다. 리액트의 버전 충돌로 인해 리액트 버전을 다운그레이드 했지만 MUI Slider 컴포넌트가 리액트 16버전을 지원하지 않았기 때문에 순수 CSS를 사용해 직접 구현했습니다.
- 라이브러리는 언제나 신중하게 사용해야하고, 버전의 의존성을 항상 고려해야한다는 것을 배웠습니다.
Styled Components를 학습하며 CSS-in-JS 개념을 이해하고 작성
- 컴포넌트 관리와 스타일 적용을 동시에 가능하기 때문에 편리해서 사용하게 되었습니다.
스탠드업 미팅 및 주간 회고 리드
- 틀을 기획하여 (블로킹 포인트, 어제 작업한 내용, 오늘 작업할 내용, 기타 공유 사항) 효율적인 미팅과 원활한 팀워크를 이끌어냈습니다.
구현 결과
- 메인페이지에서 FIND STAY 를 클릭하면 조건부 검색 페이지로 이동 됩니다.
- 인원, 가격범위, 스테이 유형에서 조건을 선택 후 적용하기 버튼을 클릭 하면 조건에 맞는 숙소가 화면에 구현됩니다.
Project Review
📍 무엇을 배웠을까
이전의 프로젝트에 비해서 많은 양을 배웠다고 생각하진 않지만, 개발자로서 실무에서 사용하는 내용을 학습했다. 다만 아직 쿼리스트링과 라이브리러, Recoil은 완벽하게 소화를 못하고 있다. 지금 다시 봐도 어려운데, 기업협업 이후 따로 정리하며 완전히 내것으로 소화해야겠다. 이해를 못하는 나에게 너무 화가 난다..
📌 예상치 못한 문제 발생
협업을 하며 MUI 라이브러리를 사용했는데, 버전의 의존성을 고려하지 않고 만들어서 merge를 하는 과정에서 문제가 발생했다.
분명 같은 repo에서 clone받아 프로젝트를 진행했음에도 리액트의 버전이 달라 충돌이 일어난 것이다. 직접적으로 연동된 팀원과 나의 버전 중 누구를 수정하는지에 대해 회의를 진행했고, 나의 버전을 다운그레이드 하기로 결정되었다. 하지만 엎친 데 덮친격으로 내가 사용했던 MUI Slider 컴포넌트가 리액트 버전 16를 지원하지 않았기에, 순수 CSS를 사용하여 직접 구현하여 문제를 해결했다.
이를 통해 라이브러리는 언제나 신중하게 사용해야하고, 버전의 의존성을 항상 고려해야 한다는 것을 알게 되었다. 또한, 가장 중요한 버전관리와 package-lock.json 파일을 수시로 확인하며 초기세팅과 비교시 문제가 없는지 확인의 필요성을 알게되었다.
📌 팀워크 스탠드업 미팅
이전 프로젝트에서 팀의 성과를 높일 수 있었던 방법은 스탠드업 미팅이었다고 생각한다. 모든 팀이 trello를 활용했지만, 우리팀은 조금 더 효율적이고 체계적으로 운영되었으면 하는 마음으로 이전의 방식과 노하우를 공유했다.
나뿐만 아니라 모든 팀원들도 협업에 대한 중요성과 효율성을 인지하고 있었기에 공유했던 틀을 잘 따라와주셨고, 더 좋은 아이디어로 이전보다 현실적인 체계를 잡을 수 있었다.
매일 오전 10시 스탠드업 미팅 전까지 4가지 항목 작성하기
블로킹 포인트
- 각자 전날까지 진행했던 내용에 대한 전반적인 공유
- 어떠한 문제를 만났고, 그에 대한 자신의 고민 및 해결하기 위한 노력 공유
- 해결책을 찾았다면 팀원들과 공유, 찾지 못했다면 함께 해결하기 위해 공유
어제 작업한 내용
- 디테일하게 자신의 진행상황 작성 및 공유
- 직관적으로 팀원들의 상황을 이해할 수 있으며 궁금증, 소통을 해결할 수 있는 파트
오늘 작업한 내용
- 개인별로 하루의 계획을 공유
- 하나의 파트에서 정체되어 다른 업무에 방해가 되는 사항이 있는지 체크
- 마감시간안에 해결하지 못할것으로 예상되는 업무 -> 팀원들과 협의 후 정리(다른 팀원이 진행 or 과감하게 패스)
- 전체적인 스케줄을 맞추며 마감시간안에 가능여부 체크
기타 공유 사항
- 다른 팀원에게 확인 및 질문사항 정리 후 공유
- 미팅 전 다른 팀원이 작성한 내용 전반적으로 확인이렇게 체계적인 틀을 미리 잡아놓은 후 보다 가치있는 하루를 보내기 위해 노력했다. 특히, 오전 10시 스탠딩 미팅에서의 다른 팀원들은 집중하지 못하거나 토론 주제가 삼천포로 빠지는 경우가 많았지만, 우리팀은 항상 15분안에 깔끔하게 미팅을 완료했다.
덕분에 우리팀의 스탠딩 미팅이 가장 효율적이고 깔끔하다는 멘토님들의 칭찬과 함께 성공적으로 프로젝트를 마무리 할 수 있었다. 모두가 마음을 쓴 만큼 유연하고 탄탄한 분위기 속에서 원활하게 진행할 수 있어 기업협업에서도 긍정적으로 검토해볼 수 있는 협업 방식이라고 생각한다.
📍 개선하고 싶은 점
📌 나의 역량
동기들 모두 프로젝트 이후 홀가분한 마음으로 기업협업을 준비했지만, 나는 그렇지 못했다. 협업 링크에서 확인할 수 있듯이 내가 핵심 페이지를 맡았음에도 부족한 실력으로 처음 목표했던만큼 구현하지 못했다. 말을 안했지만 자괴감이 들어 괴로웠고, 지금 후기를 쓰면서도 마음이 좋지 않다.
하지만 이렇게 고민하고 힘들어한다고 달라지는 것은 없다. 내가 부족한 부분은 더 집요하게 학습해서 내것으로 만들면 된다. 강한 부정은 강한 긍정이라는 말이 있듯, 부정적인 마음을 오히려 좋아라고 속으로 외치며 성장의 발판으로 삼아 더 레벨업 할 수 있는 내가 되려고 노력했다.
이번 프로젝트를 통해 어렵고 힘든 일에 직면했을때 어떤 자세와 태도를 통해 어떻게 멘탈케어를 해야할지에 대해 배울 수 있었다. 속으로 외쳐! 오히려 좋아!
📌 미진했던 리팩토링
모두의 찝찝함을 느낄 수 있는, 애증의 이름 리팩토링.. 끝날때 까지 끝난게 아니다!
중간중간에 코드 리뷰를 받으며 리팩토링을 진행하려 했지만? 시도하지도 못했다. 학습하고 구현하기도 시간이 부족했다. 잠을 줄여 하루에 5시간정도 취침하고 나머지 시간은 코딩에 쏟아부었지만, 너무 마음이 급했던것이 문제인가 쉽지 않았다.
프로젝트 repo를 fork한 상태로 내 git repo에 가져왔으니, 기업협업 이후 취업을 준비하며 조금씩 정리하려고 한다. (그때는 시간이 있길 바라며ㅠㅠ 이력서..)
📍 팀 프로젝트로 느낀점
연이은 프로젝트로 떨어질대로 떨어진 체력과 처참한 멘탈 상태로 모두 예민해지기 쉬운 환경에서 시작한 프로젝트였다. 그럼에도 유쾌하고 부드러운 분위기에서 프로젝트를 수행할 수 있었다.
이번 프로젝트에서 내가 검색 페이지를 맡았다는 이야기를 듣고 누군가는 '주제도 모르고 까불고있네'라고 생각했을지도 모른다. 솔직히 너무 어렵긴했고, 지금도 완벽하게 소화하지 못했다.
하지만 어려웠던 만큼 양분이되는 지식과 노하우를 습득했다. 어려운 기능뿐 아니라 멘탈관리, 팀원간의 소통 등 힘들때 어떻게 대처해야할지 학습하는 시간이었다.
내 코가 석자라 팀원들을 많이 못챙겨준게 아쉽고, 빠르게 페이지를 구현하지 못한 것에 대해서 너무 미안하다. 인턴 기간이 끝난 후 못다한 기능을 작업하고 이후에 더 완성도를 높일 예정이다.
📍 추가 예정 사항
- prefer 버튼 (최신순, 인기순 등)
- pagenation (limet & offset 설정 - 배엔드와 소통)
- input range 수정 (최종 발표 전날 conflict로 max 값으로 기능만 구현)
