들어가며
위코드 2차 프로젝트로 에어비앤비 사이트를 하게되었다.
내가 의견낸 사이트인데 뽑히게되서 좋았고, 그래서 더 잘 해보고싶었다.
1차 프로젝트는 첫 팀 프로젝트라 정말 기본적인 이커머스 사이트로 진행했지만 2차땐 좀 더 도전적인 과제를 해보고 싶었다.
무한스크롤, 지도, 달력 , 소셜로그인 등 새롭고 흥미로운 기능들이 많아 관심이 간 사이트이다.
🔆프로젝트 소개
개발기간
2022/07/04 ~ 2022/07/15
개발 인원
프론트엔드(4명) , 백엔드(1명)
사이트 선정이유
사용자 관점에서 사용하기 편한 사이트라 생각되어 그 기능들을 직접 구현해보기 위해
🔆 업무관리 도구
1. trello
1차 프로젝트 때부터 사용하던 협업 툴이다.
1차땐 처음 사용해보는 터라 사용이 미숙하여 티켓을 페이지 단위로 아주 크게 잡았다.
그래서 티켓이 옮겨지는 속도가 안났고 때문에 사용이 시들해지곤 했다.
1차때의 회고를 바탕으로 2차땐 trello 활용을 잘 해보고 싶었다.
페이지 안에서도 세부 기능을 아주 잘게 쪼개서 티켓을 발생하기로 했다.
그 결과 내가 어디쯤 왔는지 한눈에 파악이 됐고, 뿐만 아니라 다른 팀원들의 진행상황 까지도 한번에 알 수 있어 정말 유용했다.
2. 구글 스프레드시트
trello로 업무 관리를 하지만 해당 기능에 대한 상세한 내용을 관리하기엔 부적절해 보였다.
그래서 엑셀을 이용해 내 업무는 따로 더 상세히 기록하고 관리하기로 했다.
이전 직종에서 엑셀로 업무를 관리했는데 그 방식대로 템플릿을 짜서 해보았다.
예전 습관이 남아있어서 그런지 사실 엑셀이 더 나한테 편했다.
이렇게 전체 기능을 한눈에 볼 수 있도록 관리해서 우선순위 파악에도 큰 도움이 됐다.
뿐만 아니라 정신없었던 프로젝트 진행 도중에도 코드 작성 도중 의문이 생겼던 부분을 기록해 놓았다.
덕분에 당장 해결하지 못하더라도 내가 공부해나가야 할 부분을 파악할 수 있었다.
🔆내가 기여한 기능들
- 숙소목록 홈 페이지
- 캐러셀
- 무한스크롤
- 숙소 card 컴포넌트 분리
- 지도목록 페이지
-
페이지네이션
-
카카오지도
- 카카오지도 연동 : 해당 숙소의 좌표에 맞는 지도 렌더
- 카카오맵 마커 : 숙소의 좌표에 맞는 마커 표시.
- 숙소 리스트에 마우스 호버시, 지도상 가격 마커 강조
- 숙소 리스트 마우스 클릭시, 지도상 오버레이 팝업
-
목록/지도 연동
- 숙소 리스트 토글
🔆 프로젝트 후기
잘한 점
1. 공통css mixin을 만들어 팀원들과 같이 쓸 수 있도록함
자주 사용되는 css 스타일을 variables.js파일로 별도로 만들었다.
사실 다른 팀원들도 멘토님들에게 variables.js파일로 만들어 쓰라는 피드백이 달렸을텐데 다들 여유가 없어보였고 또 내가 직접 해보고싶어서 도맡아하게 되었다.
이 작업을 하면서 잘했다고 생각한 점은 이렇다.
-
누군가 해야하는 일을 내가 도맡아 한 점.
-
이 작업으로 인해 다른 팀원들이 코드를 더 편하게 쓸 수 있게 기여했고, mixin 사용법 까지 포스팅하여 공유한 점.
먼저 자원해서 한 일인데 배운점과 느낀점이 많았다.
앞으로도 이렇게 주도적인 사람이 되고싶다.
2. 우선순위 파악
1차때의 회고 중 하나가 디테일한 css에 너무 공을들여 기능구현시 너무 촉박했던 점이다.
때문에 스프레드시트에 대분류 > 중분류 > 소분류 로 기능들을 아주 잘게 쪼개어봤다.
이렇게 전체 해야할 일을 펼쳐놓고 일의 순서를 정했다.
그리고 오늘 해야할 일은 따로 배경색을 지정하여 어떻게든 끝낼 수 있도록 목표를 잡았다.
또한 생각보다 잘 안되는 기능은 너무 하루종일 메여있지 않았다.
하루를 돌아봤을때 오늘 한 일이 그 기능에 메여있던것 밖에 없다면 너무 허무할 것 같아 이럴땐 마크업 작업같은 부담이 적은 일을 돌아가거나 했다.
덕분에 일의 속도도 잃지 않았고 좀 더 유연하게 프로젝트를 진행할 수 있었다.
3. 백엔드와의 소통
1차 프로젝트땐 백엔드와 어떻게 소통해야 할지가 제일 어려웠다.
그러나 한번 해본 경험이 있어서 그런지 그 부담이 좀 덜어진 느낌이였다.
일단 홈 화면을 mock data로 만든 후 백엔드 분에게 mock data를 내가 만들어서 일단 쓰고 있는데 데이터 만들때 같이 상의해보자고 얘기해놨다.
그리고 실제 받은 데이터 중에서 이 부분은 왜 이렇게 됐는지 여쭤보고 더 필요한 데이터가 없는지 같이 상의하며 순조롭게 진행이됐다.
또한 원래 홈화면에 무한스크롤이 추가구현 사항이여서 백엔드와 의논된 기능이 아니였다.
그러나 난 무한스크롤을 정말 해보고싶었고, 그래서 백엔드분께 이 기능 추가하면 여유가 되실지 의견을 먼저 여쭤봤다.
다행히 백엔드 측에선 크게 어려운게 아니라며 가능하다고 하여 진행하게되었다.
사실 백엔드 관련 지식이 많이 없어서 내가 하는 말이 백엔트 측에선 부담이나 실례가 아닐까 괜히 걱정하곤한다.
그래서 더 공손히 말하고자 했는데 서로 커뮤니케이션도 잘 됐고 화기애애한 분위기에서 잘 진행되어 다행이였다.
아쉬웠던 점
1. 캐러셀 라이브러리 설명을 못했다.
라이브러리를 처음 사용해봤다.
그래서인지 어떻게 찾아서 적용시키긴 했는데 온전히 내 것으로 만들진 못한 것 같다.
다른 동기가 캐러셀 라이브러리 적용에 어려움을 겪어 내게 물어봤는데
다른 사람 코드이기도 하고 사실 내가 어떻게 적용을 했는지 잘 생각이 안났다ㅠㅠ
내가 한 코드인데 설명을 못하다니 내 자신에게 약간 실망? 했다.
앞으로는 이런 외부 라이브러리를 쓸 때, 라이브러리에 대해 좀 더 파악하고 시작을 해야할 것 같다.
또한 젤 중요한건 대부분 협업으로 이루어지기 때문에 내 코드에 책임감을 느껴야 하겠다.
2. 디테일한 css 신경을 못썻다.
자세히 파헤쳐보면 추가해야 할 css 코드들이 많다.
더 부드럽게 작동되거나 더 사용자가 보기 편하게 만들어야 할 부분이 있는데 기능구현이 더 중요한 부분이라 이런 디테일을 신경쓰지 못했다.
이 부분은 추후에 더 작업을 해야할 것 같다.
