7/26 코드잇 중급 프로젝트 데일리 회고록

주요 활동

오전
무한 스크롤 훅을 제거했습니다. (용도가 확실해 질 시 다시 추가)
무한 스크롤이 같은 아이템 10개만 지속적으로 로딩하는 문제를 알아봤습니다.

원인 추정

1. fetchNext 함수가 nextCursor 값을 잘 받아오지 못하는 구조여서 fetchNext 함수가 최신 cursor를 안 보고 처음 클로저 상태를 보고 있을 수 있습니다.
2. 백엔드가 cursor값을 잘못 보내고 있을 수도 있습니다.

1에 집중해보고

const fetchNext = useCallback(async () => {
    if (loading || !hasMore) return;

    setLoading(true);
    try {
      const res = await axios.get(
        `https://winereview-api.vercel.app/16-3/wines?limit=10${cursor !== null ? `&cursor=${cursor}` : ''}`,
      );

      console.log('이번 요청에 보낸 cursor:', cursor);
      console.log('API 응답 nextCursor:', res.data.nextCursor);
      console.log('API 응답 전체', res.data);

      setItems((prev) => [...prev, ...res.data.list]);
      setCursor(res.data.nextCursor);
      if (!res.data.nextCursor) setHasMore(false);
    } catch (err) {
      console.error('데이터 호출 실패', err);
    } finally {
      setLoading(false);
    }
  }, [cursor, hasMore, loading]);

  // 첫 로딩. 페이지가 마운팅 될 때 한 번만 실행
  useEffect(() => {
    fetchNext();
  }, [fetchNext]);

 

fetchNext에 의존성 배열을 추가했습니다.

 

 

오후

 스웨거 백엔드 API가 현재 cursor 기반 페이지네이션을 지원하지 않아서 nextCursor값을 null로 주고 있는 거 같습니다.

• [ v] 해결:nextCursor를 잘못 불러오고 잘못 갱신해서 생긴 문제 였습니다.

무한 스크롤 작업은 잠시 중단하고 개인 페이지 작업을 진행하겠습니다.

 

검색창 기능 구현

 

키보드 목록 페이지 검색창 기능을 만들고 있습니다.

const handleSearch = async () => {
    const cleanQuery = query.trim().toLowerCase();
    if (!cleanQuery) {
      setResults([]);
      return;
    }

 

일단 검색 조건은
앞부분부터 포함검색(startsWith)
대소문자 구분하지 않기(toLowerCase)
입력값은 앞뒤 공백 제거 후 검색 (trim)
한글도 검색 가능하도록 (문자열 비교로 처리)
이렇게 정해두었습니다.

시안에서는 실시간으로 검색 결과가 바뀌는게 아니라
검색버튼(돋보기 아이콘)이나 엔터로 검색 결과가 반영되도록 만들라고 하여 그 부분을 구현 중입니다.

 

수정 사항
앞부분부터 포함검색(startsWith) 은 앞부분이 일치하는 검색 결과만 찾아서
문자열 안에 검색어가 포함되기만 해도 찾아주는 (includes)로 변경하겠습니다.