4주차 - 라우터 & 검색 및 필터 구현

개발진행 상황

레이아웃 및 디자인 작업을 디테일하게는 아니지만 크게 완료하고 페이지 라우터 처리를 구현하면서 json-server로 db.json에 연결하여 메인페이지와 상페에이지에 데이터 연동 작업을 진행했다.

메인페이지

슬라이드는 slick-carousel을 사용하여 구현했고, 나머지는 ANTD에서 가져와서 커스텀 해서 구현했다. 막상 데이터를 붙여보니 이미지가 없는 공원도 있어서 예외처리를 해줘야 할 것 같다.

상세페이지

지도를 제외한 나머지 컨텐츠를 가져와서 작업했고, 데이터를 붙여보니 홈페이지가 없는 경우가 있어서 그 부분도 메인과 마찬가지로 예외처리를 해야 할 것 같다. 상세페이지에는 리뷰가 들어가야 하는데 아직 리뷰쪽은 작업을 못했고, 우선 메인에 검색쪽을 작업 하기로 했다.

마이페이지

마이페이지의 탭 같은 경우는 ANTD에서 가져다 사용했고 USER API가 완성되지 않아서 메인과 마찬가지로 임시로 json-server에 데이터를 불러오도록 해놓았다.

라우터

이번 프로젝트는 java spring프로젝트 안에 front 파일을 포함해서 heroku를 통해서 배포하게 되는데, SPA는 entry 가 1개인데 해쉬처리가 없으면 라우팅으로 다른 페이지 접근시에, 진입점을 찾지 못해서 따로 백단에서 route resolve가 필요해서 HashRouter를 사용해야 한다고 해서 기존 BrowserRouter를 사용해서 구현했던 것을 HashRouter로 변경 하였다.

function App() {
  return (
    <div className="App">
      <HashRouter>
        <AuthProviders>
          <Routes>
            <Route path="/" element={<MainPage />} />
            <Route path="/mypage" element={<MyPage />} />
            <Route path="/detail/:id" element={<DetailPage />} />
            <Route path="/signup" element={<SignupPage />} />
            <Route path="/slide" element={<BestParkSlide />} />
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </AuthProviders>
      </HashRouter>
    </div>
  );
}

검색 및 필터 구현

기획 할 때는 깊이 생각하지 못했는데, 검색과 필터링 부분이 생각보다 복잡했다.

내가 생각한 검색조건은

1. 기본적으로 검색창에 입력하면 공원이름으로 검색된다.(baseURL?keyword="남산공원")
2. 구 별 태그를 클릭하면 (baseURL?area="성북구")
3. 검색어& 구별 태그 (baseURL?area="성북구"&eyword="남산공원")

이었지만 백엔드 멘토님이 공원이름으로 검색하는것 보다는 지역명 혹은 주소로 검색하는게 사용자 입장에서 더 편하지 않겠냐는 피드백을 주셔서 이 부분은 백엔드 분들과 계속 얘기하면서 진행하기로 했다.

또 지역을 필터링 하는 부분을 태그로 만들려고 했는데 막상 구현 해 보니 지역구가 너무 많아서 화면에 다 들어가지도 못할 뿐만 아니라 레이아웃도 틀어지게 되었다.

셀렉트 박스로 변경해서 진행하고 있는데 바뀔 수도 있을 것 같다.

프론트 멘토님께서 검색 구현시 인풋박스에 throttling 혹은 debouncing 으로 최적화 하면 좋다는 피드백을 받고, debouncing을 사용해서 구현 해 보았다. useDebounce라는 custom Hook을 만들어서 검색 구현 시 사용했다.

useDebounce

import { useEffect, useState } from 'react';

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

4주차 피드백

수업 때 말했던 깃 커밋 네이밍 사용한 것은 좋으나 커밋 이름을 좀 더 통일성 있게 지어야 한다는 피드백을 받았고, prettier와 eslint를 적용하여 코드 스타일도 일관성 있게 작성하면 좋을 것 같다는 피드백을 받았다. 그 외에도 비동기 호출 코드 custom Hook 으로 분리 고려해야 한다. 비동기 코드는 useEffect의 실행부 내부에 선언해야 한다 등 여러가지 피트백을 받았다.

느낀 점

본격적인 코드 구현에 들어가니까 알고있다고 생각했던 개념들도 잘 구현이 되지 않아서 고생했다. 코드를 분리하고 일관성있게 작성하는 것이 참 어려운 일인것 같은데 피드백을 좀 더 반영해 보도록 해야겠다. 배운것도 많고 피드백도 많이 받고 이것 저것 정신이 하나도 없지만 프로젝트를 잘 마무리 할 수 있었으면 좋겠다.