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

---

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

 

2023-03-26 21:00 8일차

 

안내
-금일 진도 161p
-다음부터는 5장

 

<한 번 정리해보는 graphQL 사용법>

 

서버에서 엔티티 만들고, 리졸브 만들고

리졸브를 가지고 올 수 있는 쿼리를 만들고

codegen으로 제너레이트 해주고 프론트에서 가져다 쓴다.

 

---

책 요약 정리

 

4장 프로젝트 개발

 

명장면 자세히보기

 

모달 ui를 구현하기 위해서 명장면 쿼리 필드를 구성한다. 

cutId를 이용해서 동일한 명장면을 반환하고 필드 리졸버를 구성해서 film 필드를 구성.

@Root() 데코레이터로 상위 필드인 Cut에 접근하여 filmId값을 기준으로 id값이 일지하는 영화를 찾아 반환.

 

 

명장면 상세 정보 모달 창 구현

 

cut.graphql 파일을 생성하고 yarn codegen 으로 타입 정의를 생성한다.

cutId를 통해 요청된 데이터를 모달창에서 보여준다.

useBreakpointValue hook을 이용해서 차크라UI에서 화면의 가로 크기에 따라 다른 변수를 할당할 수 있도록 해준다.

모달은 모바일, 태블릿 크기에서는 화면을 꽉 채우고 그 이상의 화면에서는 고정 크기로 보인다.

차크라를 이용해 Modal 이용해서 모달 UI를 만든다. 

 

useDisclosure도 Chakra-UI의 훅으로 열고 닫는 기능이 필요한 컴포넌트의 상태를 쉽게 활용할 수 있도록 구성 

 

차크라 chakra에서 <LinkBox />안 쓰니까 id 값 전달이 요상하게 되는 현상이 있었음!