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

---

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

 

2023-03-12 21:00 7일차

 

안내
-금일 진도 150p

 

 

---

책 요약 정리

 

4장 프로젝트 개발

 

명장면 스키마 설계

 

CutResolver는 cuts 쿼리 필드를 가지고 해당 필드는 filmId를 인자로 받아 해당 영화의 filmId를 지닌 Cut 배열을 반환한다.

resolver 에 CutResolver 추가

 

 

명장면 목록 정보 UI 구성

 

타입 만들고 리졸버 만들고...

요청 훅과 타입 정의를 생성하고 명장면 목록 컴포넌트를 구성

yarn codegen 을 통해 생성한 useCutsQuery에 쿼리 변수로 부모 컴포넌트로 부터 받아온 filmId를 넘겨준다.

그리고 응답된 데이터와 로딩 변수에 접근한다.

그리고 각 명장면 사진을 보여주도록 한다.

 

 

50개의 이미지, lazy loading 적용하기

 

react-lazyload 적용하고 로딩 처리가 늦게 되길 원하는 컴포넌트를 감싼다.

height를 적용하는 것이 더 좋은 사용자 경험을 만들고 once 플래그로 한 번 컴포넌트가 로딩된 이후 화면에서 벗아난 뒤 다시 화면에 보여질 때 재로딩 되지 않도록 한다.