yongchanson/reactmaster

reactmaster

사이트를 만들면서 배우게 된 것

Framer Motion typescript styled-components react-query react-router-dom react-helmet

NomFlix

이 프로젝트에서는 Framer Motion 을 이용하여 아름다운 애니메이션과 슬라이더. 모달과 같은 인터랙션을 구현하는 방법을 배우게 됩니다. 또한 Api 를 useQuery를 이용해 Asynchronous (비동기식) 통신을 사용하였고 useLocation,usehistory 등으로 사용자가 어떻게 접근하는지에 따라서 데이터를 다르게 보여주었습니다.

만들면서 어려웠던 점

https://hell-of-company-builder.tistory.com/237 - React,노마드코더 강의// 영화 사이트 만들면서 어려웠던 부분들 5가지

1.데이터 페이지 1,2,3 합쳐서 보여주기 2.tsx 반복 사용 3.검색 query string 사용 4.youtube api 사용 5.리액트 컴포넌트 데이터 방식에 따라 prop을 설정하여 재사용하기

만들어 본 후기

재사용할 수 있는 컴포넌트를 생각해보는 기회가 되었고 , query string에 대해 알게 되었습니다. 그리고 호출한 Api 데이터를 어떻게 다뤄야 할지와 두 개의 비슷하지만 다른 데이터를 typescript에서 오류를 일으키지 않고 interface 를 사용하는 방법 등을 배우게 되었습니다. 사이트를 만들면서 실력이 크게 늘은 것 같습니다.

스크린샷

배포 사이트

https://gilpop8663.github.io/reactmaster/