오늘 공부한것 & 기억할 내용
reactQuery, FramerMotion을 사용해 netflix페이지 만들기
- api에서 받아온 데이터를 뿌리면서 데이터에 맞게 이미지도 노출시키기 위해 Util.ts에 유틸리티 함수를 만들어 사용하였다.
유틸리티 함수(utility function) 란 특정 작업이나 기능을 수행하기 위해 설계된 작은 재사용 가능한 함수
//Util.ts
export function makeImagePath(id:string,format?:string){
return `https://image.tmdb.org/t/p/${format ? format : "original"}/${id}`
}
//Home.tsx
<Banner bgPhoto={makeImagePath(data?.results[0].backdrop_path || "")}>🚨 의문
작업을 하면서 api.tsx에 만들어서 사용해도 되지 않나? 라는 의문이 들어 검색해보았다.
1. 구조화와 역할 분리
- API 관련 함수: api.tsx는 주로 API 호출과 관련된 함수들만 두는 것이 좋다. (API와 관련된 로직을 한 곳에서 관리할 수 있어 유지보수가 수월)
- 유틸리티 함수: makeImagePath와 같은 함수는 이미지 경로를 생성하는 유틸리티로, Util.tsx와 같은 파일에 두는 것이 가독성이 좋다. (이 함수는 API 호출과는 관련이 없고, 주로 데이터 표현을 위한 함수)
2. 재사용성
makeImagePath를 Util.tsx에 두면 다른 컴포넌트나 파일에서도 쉽게 재사용할 수 있다. 여러 곳에서 같은 유틸리티 함수를 사용할 경우, 이를 한 곳에 모아두는 것이 좋다.
3. 가독성
파일 구조를 잘 나누면 함수가 어떤 역할을 하는지 명확히 알 수 있는 구조
-
Animation기능을 만들면서 특정 부분만 Scale이 되는 방향이 달라야할때
css에서transform-origin속성을 사용하여 원하는 방향으로 커지도록 지정을 해준다. -
AnimatePresence의 onExitComplete속성
onExitComplete은 animation이 끝났을때 실행시킬 함수를 넣는다. -
useScroll의 scrollY
- useScroll을 사용하여 페이지가 얼마나 내려와있든 상관없이 똑같은 위치에 팝업을 보여주고 싶을때 사용
(position:fixed를 사용해도 되지만 scollY로도 사용할 수 있음)
const {scrollY} = useScroll();
style={{
position:absolute;
top:scrollY // scollY의 값에 픽셀을 추가하고 싶다면 .get()메소드 추가 scrollY.get() + 20
}}배운점 & 느낀점
여태까지 배웠던 react-query, recoil, hook-form,framerMotion을 전부 사용하여 넷플릭스 클론 코딩을 해보았는데, 한번에 전부 다 사용하려 만드려니 정신이 가출할뻔 했다. react-query를 사용하여, 이번에는 유틸함수를 만들어 따로 파일을 만들어 사용했는데 이부분에 대해 더 공부해야할거 같다. 어떤 기준으로 파일을 나눠야 하는지 아직 감이 오지 않는다.
FramerMotion을 사용하여 슬라이드, 팝업 등등 모든걸 애니메이션으로 구현했는데 이게 과연 좋은것인가에 대해 의문이 들었다...
slider라이브러리나 팝업 컴포넌트를 사용해도 좋지 않나..? 아직 어떤게 더 좋은지 모르겠지만 애니메이션도 더 사용해보며 손에 익혀야겠다.
