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

---

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

 

2023-02-12 21:00 6일차

 

안내
- 

 

 

---

책 요약 정리

 

4장 프로젝트 개발

4.2 레이아웃

네비게이션 바

 

chakra-ui를 이용해 네비게이션 바 UI 생성

 

4.2 개별 영화 상세 정보

 

영화 상세 정보 리졸버

 

영화의 자세한 개별 정보를 보여주기 위해서는 목록이 아닌 각 영화 하나에 대한 요청을 처리하는 필드가 필요

이를 위해 film 쿼리 필드를 생성

 

개별 영화 페이지 구성

 

영화 개별 UI를 보여주기 위해 영화별 페이지 구성 

react-router의 URL 파라미터를 통해 동적으로 구성하고 파라미터 값으로 film 필드에 대한 쿼리를 실행

 

react-router의 <Route /> 컴포넌트에서 URL 파라미터는 /:filmId와 같이 설정

react-router의 useParams 훅을 통해 변수로 접근할 수 있다.

 

flimid에서 생긴 문제는 아래 블로그를 통해 코드를 변경해서 해결했다.

"인터페이스에 index signature를 정의하거나 type으로 객체를 정의하면 된다."

https://velog.io/@giwan_dev/til-typescript-interface-object

 

.graphql 이 변경되어서 yarn codegen을 통해 새로운 코드를 생성해야 한다.

 

 

영화 상세 정보 UI

 

react-router-dom으로부터 Link 컴포넌트를 가져오고

차크라로부터 LinkOverlay를 가져와서 각 카드를 감싸 이동시킨다.

react-router-dom의 <Link/>컴포넌트는 to 속성을 통해 페이지를 이동시킨다.

 

각 카드에서 보여주고 있는 영화의 고유 id 값을 이용해 해당하는 상세 페이지로 이동하도록 구현하고

템플릿 리터럴로 /flim/:filmIdURL 파라미터 자리에 film.id를 동적으로 넣어준다.

 

https://chakra-ui.com/docs/components/link-overlay

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a