2024.02.26(월)

📋화면 요구 사항

1. 도서 목록을 fetch하여 화면에 렌더
2. 페이지네이션 구현
3. 검색 결과가 없을 때, 결과 없음 화면 노출
4. 카테고리 및 신간 필터 기능 제공
5. 목록의 view는 그리드/목록 형태로 변경 가능

🏗️구조

🔄Query String 업데이트

• 나는 Backend 프로젝트 때 category_id → categoryId, news → recent로 구현했기 때문에 이에 맞게 수정했다.

✨구현하면서 새롭게 알게 된 지식

구현 코드 PR 바로가기

🪝useSearchParams Hook & useLocation Hook

import { useSearchParams, useLocation } from 'react-router-dom';

const [searchParams, setSearchParams] = useSearchParams();    // 현재 location의 URL에 있는 query string을 읽고 수정하기 위해 사용하는 Hook
const location = useLocation();    // 현재 location 객체를 반환하는 Hook

🔍URLSearchParams

• useSearchParams Hook의 state value인 searchParams는 문자열
• URLSearchParams를 사용하면 URLSearchParams 인스턴스를 생성할 수 있고 get, set, delete 등의 메서드를 사용하여 query string을 쉽게 조작 가능

const newSearchParams1 = new URLSearchParams();
const newSearchParams2 = new URLSearchParams(searchParams);
const newSearchParams3 = new URLSearchParams(location.search);

🎨CSS Layout: 🤸‍♂️Flex & 🏢Grid

• 참고하면 좋은 flex 자료

  display: flex;

  • flex: flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성

• 참고하면 좋은 grid 자료

  .grid-container {
    display: grid;
    /* repeat() 함수 사용법 */
    grid-template-rows: repeat(2, 1fr);         /* 1fr 1fr */
    grid-template-columns: repeat(3, 1fr 2fr);  /* 1fr 2fr 1fr 2fr 1fr 2fr */
  }

  • grid-template-columns, grid-template-rows: 그리드의 열과 행의 크기를 정의
  • repeat(반복횟수, 그리드 트랙 사이즈 배열)
  • Fraction(fr) 단위: 그리드 컨테이너의 여유 공간을 비율로 나눠서 설정

코드 올리기 귀찮아서 이제부터 PR로 대체!