📒 클론 코딩
이번 7주차는 클론 코딩 주차로 완성된 웹페이지를 최대한 똑같이 따라해보는 프로젝트이다.
미니 프로젝트와 비슷한 규모의 스코프와 도전하고 싶은 기능 한가지 정도를 정해서 진행했다.
우리 조는 전세계 숙박 관련 공간을 공유할 수 있는 airbnb 를 클론 코딩하기로 결정했다.
airbnb 의 메인페이지와 지역 카드를 클릭했을 때 나오는 숙소 리스트 페이지, 그리고 각 숙소를 클릭했을 때 나오는 상세 페이지까지가 우리의 목표였고 리스트 페이지와 상세 페이지에 있는 지도 기능이 우리가 도전하는 새로운 기능이였다.
와이어 프레임 & API 설계
airbnb 클론 코딩 노션 주소 : https://www.notion.so/99-3-81b039bf7fcb4ccfb9d1f13c073757f4
결과물
- airbnb 시연 영상 : https://www.youtube.com/watch?v=FKEtQQn_JbE
- airbnb 클론 코딩 결과물 : http://durukim.s3-website.ap-northeast-2.amazonaws.com/#
- airbnb 클론 코딩 깃허브(FE) : https://github.com/ssseok/airb2b
- airbnb 클론 코딩 깃허브(BE) : https://github.com/hyunjikeem/clone_coding/tree/hj
느낀점 & 피드백
-
개인적으로 너무나 아쉬웠던 지난 미니 프로젝트와 비교했을 때 이번 클론 코딩은 매우 성공적이라고 할 수 있을 것 같다. 전체적인 데이터 흐름을 이해하는데 어려움을 겪었기 때문에 프로젝트를 진행하는데 있어서 어려움을 겪었고 백엔드와의 협업도 처음이라 정말 고생을 많이 했었다.
그래도 이번 클론 코딩때는 지난번에 겪었던 경험때문인지 비교적 수월하게 협업을 진행할 수 있었다. 전체적인 데이터 흐름에 대한 개념도 어느정도 잡히기 시작했고 우리팀의 메인 기능이라고 할 수 있는 지도 기능을 내가 맡아서 진행했는데 아쉬운 점도 있지만 성공적으로 완성했기 때문에 여러모로 만족스러운 프로젝트였다. -
아쉬운 점이 있었다면 숙소 리스트 페이지에서 각 숙소 리스트에 마우스를 올렸을때 지도에 표시되어 있는 마커가 반응하게 하는 기능을 구현하지 못했다는 점이 아쉽고 에어비앤비의 예약 기능을 도전해보지 못한게 아쉽다. 다음에 보완한다면 꼭 이 두가지는 완성하고 싶다.
프로젝트를 진행하면서 배운점
-
지도 맵 API 활용 : 이번에 지도 기능을 담당하면서 카카오 맵과 구글 맵 두 가지를 공부하면서 사용해봤는데 지도 API를 이용하는거 자체는 어렵지 않았지만 마커를 커스텀하고, 내가 원하는 위치에 마커를 위치하게 하는 부분에서 어려움을 겪었다. 개인적으로는 마커도 커스텀 가능하니까 지도도 커스텀이 가능할 줄 알았는데 지도를 커스텀하는 자료는 찾지 못해서 지도 API를 사용하면 지도를 커스텀할 수 없는지, 지도를 커스텀하려면 지도를 따로 만들어야하는지 궁금해서 추후에 계속해서 자료를 찾아볼 예정이다.
-
UI/UX : 이번 클론 코딩을 통해 프론트엔드 개발자로서 갖춰야할 역량 중 하나인 UI/UX 부분에 대해 깊게 생각해보게 되었다.
다음 주차에 공부할 것
다음 주부터는 드디어 6주간의 실전 프로젝트에 돌입한다.
6주라는 긴 호흡으로 가져가는 프로젝트인만큼 평소 컨디션 조절과 적절한 스콥을 짜는것이 중요해보인다. 3~4주 동안 프로젝트 개발을 진행하고 실제로 런칭을 진행해 고객들의 반응을 경험해볼 수 있다. 취업전에 쉽게 경험하기 힘든 경험이므로 6주간 프로젝트에서 최대한 많은것을 얻어갈 수 있도록 힘 쓸 것이다.
