Conversation
| fetchMovies(); | ||
| }, [page]); // 페이지가 바뀔 때마다 실행 | ||
|
|
||
| if (isLoading) { |
There was a problem hiding this comment.
현재 각 페이지마다 로딩 스피너 스타일을 개별적으로 작성해주신 것으로 보이는데, components/ 폴더에 공통 Loading 컴포넌트를 만들어 스타일을 한 곳에서 관리하고 페이지에서는 이를 불러와 사용하는 방식으로 변경하면 중복 코드를 줄일 수 있을 것 같습니다
| ); | ||
| } | ||
|
|
||
| if (isError) { |
There was a problem hiding this comment.
에러도 로딩과 마찬가지로 처리해주면 가독성도 높아지고, 중복 코드도 줄어듭니다 !
yewon20804
left a comment
yewon20804
left a comment
There was a problem hiding this comment.
미션 2 진행해주신거 확인했습니다 ! 현재 카테고리별로 now-showing.tsx, movies.tsx 등 거의 동일한 코드가 5개 파일에 중복되어 있는 구조입니다!
카테고리를 URL 파라미터로 처리하면 하나의 페이지로 5개 카테고리를 모두 처리할 수 있습니다. Navbar에서 링크를 /movie/popular, /movie/now_playing 형태로 정의하고, App.tsx에서 movie/:category 로 라우팅을 설정한 뒤, MoviePage.tsx하나에서 useParams()로 category를 받아 https://api.themoviedb.org/3/movie/${category} 형태로 API를 호출하는 하시면 됩니다 ! 그러면 하나의 페이지로 중복 코드 없이 훨씬 깔끔한 구조로 개선할 수 있습니다!
이 방식으로 수정 진행해보면서 미션 1에 코멘트 달아드린 console문 제거, API 키값 .env 파일에서 관리 내용이랑 미션 2에 코멘트로 달아드린 로딩, 에러 컴포넌트로 처리 후 불러오기도 함께 반영해보시면 좋을 것 같습니다! 수고하셨습니다
2 participants
📚 주차 / 미션
📌 작업 내용
✨ 상세 작업 내용
📸 스크린샷
❓ 리뷰어가 알아야 할 사항 / 질문
✅ 체크리스트