🛩 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 | Recoil

Collabo Tools
Git&Github | Slack | Trello

Libraries
React-router-dom | MUI Slide

Code Formatter
eslint | prettie

주요 구현사항

검색 페이지
✔️ 조건 선택, 쿼리스트링 및 백엔드 데이터 활용으로 호텔 리스트 시각화
✔️ Filter Menu Drop-down 구현
✔️ 상수 데이터를 활용한 카운터 구현
✔️ Input Range 가격 슬라이드 구현 (MUI 라이브러리 package.json 문제로 삭제)
✔️ Query String 및 데이터를 활용하여 조건에 맞는 호텔 리스트 시각화
✔️ Styled Components를 학습하며 CSS-in-JS 개념을 이해하고 작성

Project Review

📍 무엇을 배웠을까

이전의 프로젝트에 비해서 많은 양을 배웠다고 생각하진 않지만, 개발자로서 실무에서 사용하는 내용을 학습했다. 다만 아직 쿼리스트링과 라이브리러, Recoil은 완벽하게 소화를 못하고 있다. 지금 다시 봐도 어려운데, 기업협업 이후 따로 정리하며 완전히 내것으로 소화해야겠다. 이해를 못하는 나에게 너무 화가 난다..

📌 내 실력을 빠르게 인정하고, 그에 맞는 전략을 세웠다.

이번 프로젝트는 나에게는 큰 도전이었다. 잘한다는 동기들도 힘들어하는 조건부 필터링 페이지(쿼리 & 버튼 지옥)를 맡았기 때문인데, 이는 내가 쿼리스트링을 심도있게 학습해보고 싶은 마음에 선택하게 되었다. 스테이폴리오는 쿼리 스트링을 매우 적극적으로 사용하고 있었으며, 사실 이 사이트의 핵심이라고 얘기해도 과언이 아니었다.

쿼리스트링을 처음 접했을때 너무나 혼란스러웠다. 페이지네이션과 쿼리스트링, useLocation.search 등 새로운 내용을 하루 ~ 이틀만에 전부 이해하고 코드에 사용해야했다. 내가 이렇게 멍청한 놈이었나라는 자괴감이 밀려왔다. 아래의 링크는 삽질의 흔적인데 아직 정리 중이며, 기업협업 끝난 후 천천히 수정 및 추가 예정이다. (훨씬 더 많은 삽질을 했지만, 급한대로 핵심만 기록했다.)

쿼리 삽질1
쿼리 삽질2
쿼리 삽질3

아직 완벽하게 소화하지도 못했음에도 칭찬해주고 싶은 점은 나의 자세였다. 일단 내 실력을 빠르게 인정하고 그에 맞는 전략을 세웠다. 내가 당장 이해할 수 있는 파트(자바스크립트 용법, 페이지네이션 기능 원리)는 무엇인가, 멘토님에게 질문해서 이해해야 하는 파트(쿼리스트링, useLocation, useParams 등)는 무엇인가를 정확하게 나눴다.

스스로 이해할 수 있는 파트는 구글링을 통해 학습했고, 이해가 안가는 파트는 멘토님을 붙잡고 이해가 될때까지 설명을 들었으며 따로 노트에 정리했다. 덕분에 쿼리스트링에 친숙해졌고, 기능을 구현할때 어떠한 마인드셋이 필요한지 배웠다.

📌 팀워크 스탠드업 미팅

이전 프로젝트에서 팀의 성과를 높일 수 있었던 방법은 스탠드업 미팅이었다고 생각한다. 모든 팀이 trello를 활용했지만, 우리팀은 조금 더 효율적이고 체계적으로 운영되었으면 하는 마음으로 이전의 방식과 노하우를 공유했다.

나뿐만 아니라 모든 팀원들도 협업에 대한 중요성과 효율성을 인지하고 있었기에 공유했던 틀을 잘 따라와주셨고, 더 좋은 아이디어로 이전보다 현실적인 체계를 잡을 수 있었다.

협업 링크 보러가기

매일 오전 10시 스탠드업 미팅 전까지 4가지 항목 작성하기

블로킹 포인트
- 각자 전날까지 진행했던 내용에 대한 전반적인 공유
- 어떠한 문제를 만났고, 그에 대한 자신의 고민 및 해결하기 위한 노력 공유
- 해결책을 찾았다면 팀원들과 공유, 찾지 못했다면 함께 해결하기 위해 공유
    
어제 작업한 내용
- 디테일하게 자신의 진행상황 작성 및 공유
- 직관적으로 팀원들의 상황을 이해할 수 있으며 궁금증, 소통을 해결할 수 있는 파트

오늘 작업한 내용
- 개인별로 하루의 계획을 공유
- 하나의 파트에서 정체되어 다른 업무에 방해가 되는 사항이 있는지 체크
- 마감시간안에 해결하지 못할것으로 예상되는 업무 -> 팀원들과 협의 후 정리(다른 팀원이 진행 or 과감하게 패스)
- 전체적인 스케줄을 맞추며 마감시간안에 가능여부 체크

기타 공유 사항
- 다른 팀원에게 확인 및 질문사항 정리 후 공유
- 미팅 전 다른 팀원이 작성한 내용 전반적으로 확인

이렇게 체계적인 틀을 미리 잡아놓은 후 보다 가치있는 하루를 보내기 위해 노력했다. 특히, 오전 10시 스탠딩 미팅에서의 다른 팀원들은 집중하지 못하거나 토론 주제가 삼천포로 빠지는 경우가 많았지만, 우리팀은 항상 15분안에 깔끔하게 미팅을 완료했다.

덕분에 우리팀의 스탠딩 미팅이 가장 효율적이고 깔끔하다는 멘토님들의 칭찬과 함께 성공적으로 프로젝트를 마무리 할 수 있었다. 모두가 마음을 쓴 만큼 유연하고 탄탄한 분위기 속에서 원활하게 진행할 수 있어 기업협업에서도 긍정적으로 검토해볼 수 있는 협업 방식이라고 생각한다.

📍 개선하고 싶은 점

📌 나의 역량

동기들 모두 프로젝트 이후 홀가분한 마음으로 기업협업을 준비했지만, 나는 그렇지 못했다. 협업 링크에서 확인할 수 있듯이 내가 핵심 페이지를 맡았음에도 부족한 실력으로 처음 목표했던만큼 구현하지 못했다. 말을 안했지만 자괴감이 들어 괴로웠고, 지금 후기를 쓰면서도 마음이 좋지 않다.

하지만 이렇게 고민하고 힘들어한다고 달라지는 것은 없다. 내가 부족한 부분은 더 집요하게 학습해서 내것으로 만들면 된다. 강한 부정은 강한 긍정이라는 말이 있듯, 부정적인 마음을 오히려 좋아라고 속으로 외치며 성장의 발판으로 삼아 더 레벨업 할 수 있는 내가 되려고 노력했다.

이번 프로젝트를 통해 어렵고 힘든 일에 직면했을때 어떤 자세와 태도를 통해 어떻게 멘탈케어를 해야할지에 대해 배울 수 있었다. 속으로 외쳐! 오히려 좋아!

📌 미진했던 리팩토링

모두의 찝찝함을 느낄 수 있는, 애증의 이름 리팩토링.. 끝날때 까지 끝난게 아니다!
중간중간에 코드 리뷰를 받으며 리팩토링을 진행하려 했지만? 시도하지도 못했다. 학습하고 구현하기도 시간이 부족했다. 잠을 줄여 하루에 5시간정도 취침하고 나머지 시간은 코딩에 쏟아부었지만, 너무 마음이 급했던것이 문제인가 쉽지 않았다.

프로젝트 repo를 fork한 상태로 내 git repo에 가져왔으니, 기업협업 이후 취업을 준비하며 조금씩 정리하려고 한다. (그때는 시간이 있길 바라며ㅠㅠ 이력서..)

📍 팀 프로젝트로 느낀점

연이은 프로젝트로 떨어질대로 떨어진 체력과 처참한 멘탈 상태로 모두 예민해지기 쉬운 환경에서 시작한 프로젝트였다. 그럼에도 유쾌하고 부드러운 분위기에서 프로젝트를 수행할 수 있었다.

이번 프로젝트에서 내가 검색 페이지를 맡았다는 이야기를 듣고 누군가는 '주제도 모르고 까불고있네'라고 생각했을지도 모른다. 솔직히 너무 어렵긴했고, 지금도 완벽하게 소화하지 못했다.

하지만 어려웠던 만큼 양분이되는 지식과 노하우를 습득했다. 어려운 기능뿐 아니라 멘탈관리, 팀원간의 소통 등 힘들때 어떻게 대처해야할지 학습하는 시간이었다.

내 코가 석자라 팀원들을 많이 못챙겨준게 아쉽고, 빠르게 페이지를 구현하지 못한 것에 대해서 너무 미안하다. 인턴 기간이 끝난 후 못다한 기능을 작업하고 이후에 더 완성도를 높일 예정이다.

📍 추가 예정 사항

• prefer 버튼 (최신순, 인기순 등)
• pagenation (limet & offset 설정 - 배엔드와 소통)
• input range 수정 (최종 발표 전날 conflict로 max 값으로 기능만 구현)