✂️ 분배된 이슈

검색창 요청시 연관 검색어 응답하는 API 생성 #71
검색창에서 검색어 입력하기 #72
연관 검색어 클릭 시 이벤트 발생 #74

🚩 구현 목표

주요 장소 검색 기능을 완성한다.

🍀 세부 목표

검색 API 생성 api/seoul/search?areaName=<검색어>
검색창에 검색어 입력 이벤트 걸기
검색 API와 통신하여 연관 검색어 응답 확인
검색어와 연관된 장소가 있을 경우 연관 검색어 리스트로 출력
일치하는 단어 시그니처 색으로 강조
연관된 장소가 없을 경우 ‘검색 결과가 주요 50곳에 포함되지 않습니다’ 검색창 아래 출력
검색창 아래 연관 검색어 클릭 이벤트 생성
클릭 시 지도 이동 및 상세 모달창 출력

🖥️ 구현 내용

검색 API 생성

Untitled

검색 결과 출력 및 일치하는 검색어 강조

Untitled

📖 학습 내용

‘useDeferredValue’ vs ‘debounce’

🩺 의사결정

한글이 미완성된 단어일 경우(ex. 강ㄴ) 검색 API에서 연관 검색어가 없다고 응답해야 하나?

~~일단 연관 검색어가 없다고 출력함~~
프론트쪽에서 검색어 안에 자음 또는 모음 뿐일 경우 API 보내지 않도록 예외 처리

‘역’ 같이 많은 연관 검색어가 출력할 경우 리스트 크기의 제한을 해야될까?

~~일단 다 출력 시키고 있음~~
최대 6개의 연관검색어가 보이고 그 이상일 경우 스크롤 또는 드래그로 더 볼 수 있도록 함

리액트로 배열을 출력시 key값을 집어 넣어줄 때 api에서 id도 같이 보내줘야 할 것 같다.

일단 배열의 index를 집어 넣어주고 있음

연관 검색어 클릭시 해당 지역 마커로 이동 및 상세모달창 출력을 구현하기 위해 많은 상태를 전역으로 바꾸는 대공사가 필요해보임

어떻게 시작할지 모르겠음…
마커, 네이버 지도를 모두 전역으로 뽑아야 될 것 같고 연관검색어 클릭 시 어떤 마커인지 식별하는 것도 쉽지 않아 보임

연관검색어 오른쪽 돋보기 표시말고 그냥 hover시 어둡게만 하는게 깔끔해보이는데 돋보기 넣지 말까?

일단 돋보기 넣기 귀찮아서 그런거 아님

🚧 Trouble Shooting

Seoul Router 위치에 따른 라이팅 순서

// before
router.get('/', seoulController.allAreas);
router.get('/:areaName', seoulController.pastInfo);
router.get('/search', seoulController.searchArea);

// after
router.get('/', seoulController.allAreas);
router.get('/search', seoulController.searchArea);
router.get('/:areaName', seoulController.pastInfo);

before와 같이 라우터를 선언했을 경우 api/seoul/search?name=<검색어> API를 요청할 경우 /:areaname으로 라우팅이 되는 문제가 발생
그래서 /:areaname의 위로 검색 라우터의 위치를 옮겨 해결

useTransition() 사용시 한글 자음, 모음 분리 현상

const onChangeSearchBar: React.ChangeEventHandler<
    HTMLInputElement
  > = async e => {
    startTransition(() => {
      setSearchAreaName(e.target.value);
    });
  };

startTransition()으로 setSearchAreaName의 우선순위가 더 낮다는 것을 알릴 경우 중간에 pending되는 시간 때문에 한글이랑 자음과 모음이 분리되는 것 같다.
useTransition 대신 useDeferredValue을 사용하여 구현

❓ 궁금한 점

useDeferredValue을 이용해서 검색 API를 최적화 시켜보려 했으나 잘 동작하는지 모르겠음

onchange에서 로그를 찍어보니 뭔 차이가 있는지 모름

24시간 인구밀도 차트 캐싱에 대해 jotai-tanstack-query를 이용하면 어떨까?

이전 recoil에서도 이런 식으로 사용한 것을 본적이 있는 것 같음
https://jotai.org/docs/integrations/query

🎸 기타

연관검색어 리스트 너비 반응형으로 어떻게 구현할지 어려워 보임

ㅅㅈ님에게 도움 요청해야됨

feature search area - boostcampwm-2022/web33-Mildo GitHub Wiki

✂️ 분배된 이슈

🚩 구현 목표

🍀 세부 목표

🖥️ 구현 내용

검색 API 생성

검색 결과 출력 및 일치하는 검색어 강조

📖 학습 내용

‘useDeferredValue’ vs ‘debounce’

🩺 의사결정

한글이 미완성된 단어일 경우(ex. 강ㄴ) 검색 API에서 연관 검색어가 없다고 응답해야 하나?

‘역’ 같이 많은 연관 검색어가 출력할 경우 리스트 크기의 제한을 해야될까?

리액트로 배열을 출력시 key값을 집어 넣어줄 때 api에서 id도 같이 보내줘야 할 것 같다.

연관 검색어 클릭시 해당 지역 마커로 이동 및 상세모달창 출력을 구현하기 위해 많은 상태를 전역으로 바꾸는 대공사가 필요해보임

연관검색어 오른쪽 돋보기 표시말고 그냥 hover시 어둡게만 하는게 깔끔해보이는데 돋보기 넣지 말까?

🚧 Trouble Shooting

Seoul Router 위치에 따른 라이팅 순서

useTransition() 사용시 한글 자음, 모음 분리 현상

❓ 궁금한 점

useDeferredValue을 이용해서 검색 API를 최적화 시켜보려 했으나 잘 동작하는지 모르겠음

24시간 인구밀도 차트 캐싱에 대해 jotai-tanstack-query를 이용하면 어떨까?

🎸 기타

연관검색어 리스트 너비 반응형으로 어떻게 구현할지 어려워 보임

⚠️ GitHub.com Fallback ⚠️

feature search area - boostcampwm-2022/web33-Mildo GitHub Wiki

✂️ 분배된 이슈

🚩 구현 목표

🍀 세부 목표

🖥️ 구현 내용

검색 API 생성

검색 결과 출력 및 일치하는 검색어 강조

📖 학습 내용

‘useDeferredValue’ vs ‘debounce’

🩺 의사결정

한글이 미완성된 단어일 경우(ex. 강ㄴ) 검색 API에서 연관 검색어가 없다고 응답해야 하나?

‘역’ 같이 많은 연관 검색어가 출력할 경우 리스트 크기의 제한을 해야될까?

리액트로 배열을 출력시 key값을 집어 넣어줄 때 api에서 id도 같이 보내줘야 할 것 같다.

연관 검색어 클릭시 해당 지역 마커로 이동 및 상세모달창 출력을 구현하기 위해 많은 상태를 전역으로 바꾸는 대공사가 필요해보임

연관검색어 오른쪽 돋보기 표시말고 그냥 hover시 어둡게만 하는게 깔끔해보이는데 돋보기 넣지 말까?

🚧 Trouble Shooting

Seoul Router 위치에 따른 라이팅 순서

useTransition() 사용시 한글 자음, 모음 분리 현상

❓ 궁금한 점

useDeferredValue을 이용해서 검색 API를 최적화 시켜보려 했으나 잘 동작하는지 모르겠음

24시간 인구밀도 차트 캐싱에 대해 jotai-tanstack-query를 이용하면 어떨까?

🎸 기타

연관검색어 리스트 너비 반응형으로 어떻게 구현할지 어려워 보임

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️