2차 프로젝트 후기

vsnm25·2021년 4월 11일
2

프로젝트

목록 보기
4/4
post-thumbnail

1. 프로젝트 요약

  • 클론 사이트: 직방
  • 프로젝트 이름: 먹방
  • 프로젝트 기간: 2021.03.29 ~ 2021.04.09 (2주)
  • 팀원
    👉 프론트엔드: 나은님, 성훈님, 나
    👉 백엔드: 택향님, 호열님
  • 깃허브 링크
    👉 프론트엔드 , 백엔드
  • 사용된 기술 스택
    ✅ HTML
    ✅ Styled-Components
    ✅ React(함수형 컴포넌트, Hooks, react-router-dom, Context API)
    ✅ Kakao Map API
  • 커뮤니케이션 및 버전 관리
    📌 Slack / Trello / git / gitHub

2. 구현 페이지

  • 첫 스탠드업 미팅 때 직방 사이트를 그대로 클론하는 것에 대해 데이터 수집, 기간, 기능구현 등을 고려하여 주변 맛집들을 보여주는 방식으로 기획을 변경했다. 메인 페이지 , 로그인/회원가입 페이지 , 등록 페이지 , 검색 페이지 , 찜 페이지 총 5개로 구성됐다. 메인 컴포넌트 안에 지도/필터 를 포함하고 있는 컴포넌트, 가게 리스트 를 보여주는 리스트 컴포넌트, 특정 가게에 대한 상세정보 를 보여주는 상세 컴포넌트 3가지로 나눠져있다. 나는 지도/필터 컴포넌트 , 등록 페이지 , 검색 페이지 를 맡아 작업을 했다.

2-1. 내가 구현했던 기능

  • 가게 업종별 카테고리 선택
  • Range Slider 라이브러리를 활용한 가격 범위 선택
  • 필터 컴포넌트 토글 버튼 기능 구현
  • Kakao Map API 를 활용하여 가게 리스트 마커, 커스텀 오버레이 표시, 검색에 따른 좌표 이동, 클러스터 기능 사용
  • 커스텀 오버레이 이미지 슬라이드 기능 구현
  • 검색 결과 리스트 표시 및 클릭 시 해당 가게 좌표로 지도 이동
  • Kakao 로컬 API 를 활용하여 키워드 검색을 통한 주변역 등록
  • Kakao 우편번호 API 를 활용하여 도로명 주소 검색 결과 등록

3. 내 코드 돌아보기

3-1. 가게 데이터 요청

  • 파라미터에 필요한 객체, 배열에 담긴 값들을 쿼리스트링 문자열 형태로 바꾸어 변수에 저장했다.

  • query 변수에는 dataList 배열에 담긴 위도, 경도, 줌 레벨, window.innerWidth, window.innerHeight 값을 담고 있다.
  • query2 변수에는 선택한 카테고리 리스트를 담고 있는 converToText 배열의 값을 담고 있다.
  • query3 변수에는 선택한 최소, 최대 가격을 담고 있다.
  • 위 3개의 변수를 totalQuery 라는 변수에 담아 파라미터로 넘겨 카테고리, 가격 범위, 좌표가 변경될 때마다 데이터를 요청했다.

3-2. 가격 & 카테고리 ContextAPI 사용

  • Filter 컴포넌트 안에 priceOption , categoryOption 두 가지 컴포넌트 중 선택된 컴포넌트가 토글되는 방식이다.
  • 처음에는 각 컴포넌트에서 상태관리를 했었는데 해당 state 에 따라 활성화될 tab 을 가지고 있는 컴포넌트에 값을 전달하기 위해서는 모든 state 들을 부모 컴포넌트에서 관리해야 했고 그러면 코드가 길어지고 가독성도 떨어지기 때문에 ContextAPI 를 사용하게 됐다.
  • PriceCategoryContext 파일 안에 price , categorystate , action , 클릭 이벤트 함수 들을 정의한다.
  • 선택된 가격 범위, 카테고리 값에 따라 활성화될 tab 에 대한 조건을 줄 수 있고 활성화된 tab 의 값만 초기화 할 수 있다.

3-3. Kakao Map API

  • Kakao API 의 생성자 함수를 통해 컴포넌트 마운트 됐을 때 인스턴스들에 대한 옵션들, 이벤트 함수들을 선언하고 state 로 인트턴스를 담아 지도에 추가할 마커, 오버레이, 클러스터들이 있으면 선언된 state 로 관리한다.

  • mapInstance 가 저장된 후 넘어오는 가게 데이터 또는 좌표값의 변화에 따라 중심좌표 , 지도에 표시되는 마커/클러스터/오버레이 등을 관리하는 부분을 다른 useEffect 에 선언한다.
  • 지도 위에 있는 마커들과 오버레이 좌표값들을 배열로 관리해 넘어오는 가게 데이터 값과 비교하여 삭제, 추가, 유지를 관리하는 로직을 구현하는 부분에서 해결을 하지 못해 값들을 모두 초기화하고 다시 추가하는 방식으로 구현했다.
  • 추후 리팩토링을 진행하면서 로직을 다시 구현해볼 생각이다.

3-4. 쿼리스트링 Key & Value 분리

  • 쿼리스트링으로 넘어오는 파라미터의 key , value 값을 분리하는 로직을 구현할 때 노션에 좋은 방법이 있어 활용해 봤다.
  • 처음 넘어오는 문자열을 ? 구분자를 기준으로 나눈 뒤 다시 & 구분자를 기준으로 분리하여 key=value 형태로 만들어 준다.
  • reduce 메소드를 통해 객체 안에 [key]: value 가 누적돼 마지막으로 리턴되는 객체 안에 모든 속성들을 확인 할 수 있다.
  • 리턴되는 객체 값을 변수에 담아 속성 접근자를 통해 필요한 값을 가져올 수 있다.

  • 검색 페이지에서 좌표값이 담긴 쿼리스트링을 파라미터로 넘겨 메인 컴포넌트에서 해당 좌표로 이동되는 기능구현에 사용했다.

3-5. 리팩토링의 중요성

  • 반복되는 컴포넌트 부분은 찍어내듯이 작성하다보니 코드의 길이가 겉잡을 수 없이 길어졌고 리팩토링을 진행하며 반복되는 컴포넌트 안에서 다른 부분만 조건을 통해 렌더링하는 방식으로 코드의 길이를 훨씬 줄일 수 있었다.

4. 2차 프로젝트를 마치며

🤩 좋았던 점

  • 이전에 네이버 지도를 사용해 간단한 좌표 이동, 검색 기능을 구현해본 적은 있었지만 데이터를 활용하여 마커, 오버레이, 클러스터 등을 표시하고 관리하는 기능을 구현해본 건 처음이라 좋은 경험이 됐다.
  • 1차 프로젝트때는 컴포넌트를 찍어내기만 하고 재사용할 생각을 못했는데 이번 프로젝트를 통해 컴포넌트 재사용을 좀 더 이해하고 활용했던 것 같다.
  • Git rebase 를 통해 커밋 history 를 깔끔하게 관리할 수 있었다.
  • 처음에 스타일 컴포넌트를 왜 사용할까 했는데 사용하면서 클래스명을 사용하지 않고 props 를 통해 모든 css 를 관리하고 여러 컴포넌트에서 공통되는 스타일들을 import 하여 사용할 수 있었다.

😢 아쉬웠던 점

  • 지도 쪽 기능 구현을 할 때 막힌 부분이 생겨 너무 오랜 시간을 붙잡아 다른 기능을 구현할 시간이 부족했다.
  • 팀 프로젝트에 맞게 빠르게 합쳐보고 발생하는 에러에 대해 대응을 했어야 했는데 그런 과정에서 부족했던 점이 많았다.
  • 발생하는 문제에 대한 소통/피드백 , 스크럼 방식의 개발 프로세스 , 합쳤을 때 발생하는 에러 대응하는 부분에서 아직도 배워할 점이 많은 것 같다.

🤘 마지막으로

  • 성장했던 부분도 있지만 스스로 부족했던 점이 많아 아쉬움이 남는다.
  • 앞으로 계속 리팩토링을 틈틈히 하며 구현하지 못한 기능, 버그들을 수정할 생각이다.
  • 위코드 2차 프로젝트 동안 고생한 먹방팀! 호열님, 택향님, 나은님, 성훈님 모두 수고 많으셨습니다!
profile
Front-End Developer 😁

4개의 댓글

comment-user-thumbnail
2021년 4월 11일

승옥님 고생많이하셨습니다 ~

1개의 답글
comment-user-thumbnail
2021년 4월 11일

승옥님 시간 정말 빠르네요 2차 프로젝트까지 너무너무 수고 많으셨어요!!🏅🏅

1개의 답글