[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 04

---

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 :
설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기

 

2023-01-29 21:00 4일차

 

안내
- 3일차 115페이지까지는 별도로 따라왔음

 

 

---

책 요약 정리

 

4장 프로젝트 개발

4.1 영화 목록

페이지네이션

 

커서 기반 페이지네이션 / 오프셋 기반 페이지네이션 

 

커서 기반 페이지네이션

 

오프셋 기반 페이지네이션 방법은 DB의 처리 방식과 관련이 깊고 대중적으로 사용되고 있지만 데이터가 많아지면 많아질수록 DB에 부하가 커진다.

커서 기반 페이지네이션은 클라이언트에서 특정 데이터의 고유 정보를 서버로 전송하고, 서버는 그 특정 고유 정보 이후의 데이터만 가져온다. 고유 아이디와 같은 인덱스를 기준으로 데이터를 비교하므로 전체 데이터베이스를 스캔하지 않아, 데이터가 많아져도 성능에는 문제가 생기지 않는다.

 

 

무한 스크롤

 

Intersection Observer API를 활용

React Waypoint 라이브러리를 활용

fetchMOre 함수는 아폴로 클라이언트에서 제공하는 데이터 요청 함수로 페이지 처리된 데이터 요청에 특화되어 있다.

 

응답된 6개의 데이터 중 4번째 데이터에만 <Waypoint /> 컴포넌트를 함께 엮었다.

6개 중 4번째 영화가 화면에 보였을 때 새로운 데이터 요청이 한 번만 이루어져야 한다.

 

Apollo 클라이언트 캐시

 

캐시는 원격 데이터 소스로부터의 응답 데이터에 대한 상태 저장소

원격 데이터만들 다루는 Redux와 비슷한 위치

 

keyArgs는 캐시가 키값으로 사용하는 인자 목록을 의미하지만 잘 쓰지 않음

merge 함수는 새롭게 응답된 데이터와 기존 데이터를 어떻게 병합할 것인지에 대한 함수

이 함수를 지정하지 않으면 새롭게 응여답된 데이터가 기존 데이터를 엎어쓴다.

existing 인자는 기존의 데이터를 incoming은 새롭게 응답된 데이터를 의미