14-2 도서 목록 페이지

14-2 도서 목록 페이지

도서 목록 화면 요구사항

---

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

도서 목록 페이지 구조

Books : 페이지 컴포넌트
BookFilter : 카테고리, 뷰 스위쳐
BookList : 화면 중앙에서 책 목록을 표시
BookItem : 책 정보
BookEmpty : BookList가 없을시 빈 화면임을 알려줌
Pagination : 페이지조절 컴포넌트 (데이터 조절)

Fetch

네트워크 요청을 보내는데 사용되는 JS의 내장 API입니다.
브라우저에서 서버와 통신하여 데이터를 가져오는 방법중 하나.
API 요청을 통해서 데이터를 비동기적으로 받아옵니다.

chat gpt
fetch는 기본적으로 GET 요청을 보내지만, HTTP 메서드(GET, POST, PUT, DELETE 등)를 변경하여 다른 종류의 요청도 보낼 수 있습니다. 이 메서드는 Promise를 반환하므로, then()과 catch()로 응답을 처리하거나, async/await를 사용하여 처리할 수 있습니다.

cf.
http 메서드중에 발음이 비슷한 patch와의 차이

patch : 서버에 저장되어있는 데이;터를 부분적으로 수정하는 메서드입니다. (put은 전체 변경)
fetch : http요청을 보내는 메서드입니다. (HTTP 메서드도 사용가능)

chat gpt

fetch의 특징
비동기 처리 : fetch는 Promise를 반환하므로, then()과 catch()를 사용하거나, async/await를 사용하여 비동기 처리할 수 있습니다.

응답 객체 : fetch의 응답은 Response 객체로 반환됩니다. 이 객체는 상태 코드, 헤더, 본문 데이터 등을 포함합니다. 본문 데이터는 .json(), .text() 등의 메서드를 사용하여 처리할 수 있습니다.

CORS: 다른 출처의 리소스를 요청할 때는 CORS (Cross-Origin Resource Sharing) 정책을 준수해야 합니다. 이 경우, 서버에서 Access-Control-Allow-Origin 헤더를 설정해야 클라이언트가 요청을 할 수 있습니다.

fetch(url, options)
  .then(response => response.json())				// 응답을 JSON 으로 반환
  .then(data => console.log(data))					// 데이터 사용
  .catch(error => console.error('Error:', error)	// 오류

fetch options

method : 요청의 HTTP 메서드 (GET, POST, DELETE, PUT 등)
headers : 요청 헤더 설정 (Content-Type, Authorization 등)
body : 요청 본문에 포함할 데이터 (POST, PUT, 요청에서 사용)
credentails : 인증 관련 설정 (omit, same-origin, include 등)

fetch(url, {
  method: POST
  headers: {
  ''Content-Type' : 'application/json'
  },
  body: JSON.stringify({
    title: 'abcd',
    body: 'ebg',
    userId: 1,
    })
  credentails: 'include',
})
  .then(response => response.json())				// 응답을 JSON 으로 반환
  .then(data => console.log(data))					// 데이터 사용
  .catch(error => console.error('Error:', error)	// 오류

쿼리스트링 업데이트

쿼리스트링(querystring)
URL에서 서버에 데이터를 전달할 때 사용되는 문자열입니다.

URL에서 ? 이후부터 쿼리스트링으로

https://search.naver.com/search.naver?where=nexearch&sm=top_sug.pre

위 링크에서
https://search.naver.com/search.naver : URL,path
? : 쿼리스트링의 시작부분
where=nexearch : 첫 번째 파라미터로 where이 키, nexearch는 값 입니다.
& : 파라미터를 구분합니다. key1=value&key2=value

• 검색기능, 필터기능, 페이지네이션에 사용될 수 있습니다.

도서 사이트의 경우

1. <Filter /> 컴포넌트에서 각 필드(category, news, view 등)에 쿼리스트링(QS)를 변경하도록 요청합니다.

2. URL에서 변경이 일어납니다.

3. useBooks커스텀 훅이 QS의 변화를 감지합니다.
   ㄴ books(도서검색결과)에 대한 목록 API를 반환하는 훅

4. 감지된 변화를 fetch함수에 파라미터로 전달해서 새로운 데이터로 갱신합니다.

5. books가 갱신됩니다.

6. 갱신된 데이터는 `렌더 화면에 갱신되어 나타납니다.

필터에서 쿼리스트링을 변경 -> 쿼리스트링은 상태를 유지 -> 그 상태를 useBooks에서 감지 -> 화면 상태 갱신