BR-Sariwon

Front-end Github
Back-end Github
시연 영상

프로젝트 소개

• Sariwon 팀의 1차 프로젝트는베스킨라빈스 사이트를 클론하는 것이었다. 나는 프론트엔드를 맡았다.

• 팀 구성

  • 프론트엔드 3명, 백엔드 2명

• 사용된 기술

  • React
  • html, scss
  • Kakao Map API

• 주요 기능

  • 회원가입, 로그인
  • 제품 목록, 제품 상세 페이지
  • 제품 검색
  • 지도에서 매장 찾기

• 내가 맡은 역할

  • 네비게이션 카테고리 목록

  • 네비게이션바 하단바에 마우스를 갖다댈 시에 확장되는 메뉴를 Animation으로 구현

  • 네비게이션 검색 창

  • [카테고리, 제품명, 알레르기 성분, 태그]별로 필터링해서 제품을 검색하는 기능 구현

  • 매장 찾기 페이지

  • 카카오맵 API를 이용해서 [도/시, 구/군, 매장명]별 매장 위치 마커로 나타내기
  • 마커 클러스터링
  • 마커 클릭 시매장 상세 정보 나타내기

• 잘한 점

  • 프론트엔드 팀원과 대화를 많이 했다.

    각자 다른 기능을 구현하면서도 막히는 부분이 있으면 해결 방법을 같이 고민해 보았다. 같은 문제에 대해 서로 다른 해결 방식을 생각할 수도 있고 대화를 하는 것 자체로 해결 방법이 떠오르는 경우가 많았기 때문에 많은 도움이 되었다.

  • 백엔드 팀원과 지속적으로 커뮤니케이션 했다.

    내가 구현한 기능은 대부분 백엔드의 데이터가 필요해서 일찍부터 백엔드API를 붙였다. 필요한 데이터는 무엇이고 어떤 형식으로 주고받아야 하는지, 중간에 변경사항이 있으면 바로 수정이 가능한지 등을 지속적으로 맞춰나갔기 때문에 나중에 가서 기능을 엎어야하는 일이 발생하지 않았다.

• 아쉬운 점

  • 우선순위

    지도 매장찾기 기능의 디테일한 부분에 시간을 많이 써서 다른 페이지를 다양하게 구현하지 못한 점이 아쉬웠다. 실제 베스킨라빈스 사이트에는 마커 클러스터링 기능이 적용되어 있지 않은데 그부분이 아쉬워서 클러스터 기능을 넣고 그 위에 클릭기능까지 구현하는데 리액트로 구현하다보니 의외로 막히는 부분이 많아서 일정이 많이 늦어졌다. 구현할 기능의 우선순위를 잘 정해서 너무 디테일한 부분은 가지치기 하고 일정을 맞춰나가는 것이 중요한 것 같다.

  • PR을 많이 날리지 않은 것

    기능을 구현하고 github에 PR을 날리면 멘토분들이 코드에 대한 피드백을 남겨주신다. 근데 2주 프로젝트 기간동안 3번정도밖에 PR을 날리지 못한 것 같다. 큰 기능을 완전히 다 구현하고 github에 올리려다 보니 쌓인 그만큼 코드의 양도 방대해져서 코드리뷰를 제대로 받지 못했다. 좀 더 기능을 세부적으로 나눠서 PR을 날려야 할것 같다.

  • 리팩토링을 미룬 것

    위의 얘기와 비슷하다. 일단 기능을 구현하고 몰아서 리팩토링을 하려다보니 코드의 양은 계속해서 방대해지고 그때가서는 리팩토링 할 엄두가 나지 않았다. 우선 평소에 항상 효율적인 코드를 짜도록 노력하고 리팩토링을 습관화 해야겠다.

• 전체적으로 팀원들과 호흡이 잘 맞았던 점이 매우 좋았다. 하지만 개인적으로는 아쉬움이 많이 남는다. 코드의 품질이나 기능 구현에 아쉬움이 많았던 프로젝트였다. 2차 코인원 프로젝트에서는 더 성장한 모습을 보여주자~!!