Create Week10 Mission1

[immhyemi]

📝 미션 번호
10주차 Misson1

📋 구현 사항
영화 검색 기능 구
React.memo, useCallback, useMemo 등을 이용한 리렌더링
📎 스크린샷

✅ 체크리스트
[x] Merge 하려는 브랜치가 올바르게 설정되어 있나요?
[x] 로컬에서 실행했을 때 에러가 발생하지 않나요?
[x] 불필요한 주석이 제거되었나요?
[x] 코드 스타일이 일관적인가요?

[hyesngy]

10주차 워크북까지 정말 긴 여정이었습니다.

그동안 모두 고생 많으셨습니다! 👏🏻👏🏻👏🏻 짧지 않은 기간동안 의미 있는 시간이 되었기를 바랍니다.

이제 기본 워크북은 모두 완주하셨지만, 11-12주차 워크북도 도전해보시길 추천드립니다! 11주차에서는 Vercel을 활용한 배포와 CI/CD 구성을 다루고, 12주차에서는 WebSocket을 이용한 실시간 통신과 Cypress를 활용한 E2E 테스트를 다룹니다.

앞으로도 꾸준히 학습하고 성장하시길 응원하며, 데모데이까지 화이팅 입니다! 👍🏻👍🏻👍🏻

[hyesngy]

현재 UI와 로직이 한 파일에 모두 들어가 있는 페이지들이 꽤 있는데, 🛼 Standard Mission에 따라 컴포넌트를 기능 단위로 분리해서 관리하면 가독성, 재사용성, 유지보수 측면에서 훨씬 좋을 것 같습니다!

또한 사용되지 않는 컴포넌트 및 페이지 파일들도 제거하여 프로젝트 구조를 명확히 하면 좋을 것 같습니다!

[hyesngy]

MoviePage.tsx에서 renderedSearchResults에만 useMemo가 적용되어 있고, 일반 영화 목록 렌더링에는 최적화가 없어 페이지 변경 시마다 전체 목록이 리렌더링되고 있습니다. 일반 영화 목록도 useMemo로 감싸고, 영화 카드 클릭 핸들러도 useCallback으로 최적화하면 성능 측면에서 더 좋을 것 같습니다!

[hyesngy]

현재 MovieDetailPage.tsx와 useFetchMovies.tsx에서 any 타입을 사용하고 있는데, 영화 데이터의 구체적인 인터페이스를 정의하면 타입 안정성이 향상되고 개발 시 자동완성과 오류 방지에 도움이 될 것입니다! Movie 인터페이스를 확장하여 모든 영화 관련 데이터에 적용해보면 어떨까요?

[hyesngy]

🚀Challenge 미션에 따라 프로젝트 전체의 성능 최적화나 UX 개선에도 도전해보세요! 코드 품질 측면에서도 중복 제거, 책임 분리, 예외 처리 개선 등을 통해 가독성과 유지보수성이 좋은 코드로 리팩토링 해보면 어떨까요 😊

[hyesngy]

이 부분 실수인 것 같은데 / 가 남아 있어서, 에러 발생하므로 지워주세요~!