Kdt5 lee chang hwi_6조

[leechanghwi]

🎬 영화 검색

주어진 API를 활용해 '완성 예시' 처럼 자유롭게 영화 검색 기능을 구현해보세요!
과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!

완성주소 링크: https://hwi-moviesearch.netlify.app/

과제 수행 및 제출 방법

KDT기수번호_이름  |  E.g, KDT0_ParkYoungWoong

1. 현재 저장소를 로컬에 클론(Clone)합니다.
2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_ParkYoungWoong)
3. 자신의 본명 브랜치에서 과제를 수행합니다.
4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_ParkYoungWoong)
5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_ParkYoungWoong)

• main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
• Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
• Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
• 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!

요구사항

필수 요구사항은 꼭 달성해야 하는 목표로, 수정/삭제는 불가하고 추가는 가능합니다.
선택 요구사항은 단순 예시로, 자유롭게 추가/수정/삭제해서 구현해보세요.
각 요구사항은 달성 후 마크다운에서 - [x]로 표시하세요.

❗ 필수

• 영화 제목으로 검색이 가능해야 합니다!
• 검색된 결과의 영화 목록이 출력돼야 합니다!
• 단일 영화의 상세정보(제목, 개봉연도, 평점, 장르, 감독, 배우, 줄거리, 포스터 등)를 볼 수 있어야 합니다!
• 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.

❔ 선택

• 한 번의 검색으로 영화 목록이 20개 이상 검색되도록 만들어보세요.
• 영화 개봉연도로 검색할 수 있도록 만들어보세요.
• 영화 목록을 검색하는 동안 로딩 애니메이션이 보이도록 만들어보세요.
• 무한 스크롤 기능을 추가해서 추가 영화 목록을 볼 수 있도록 만들어보세요.
• 영화 포스터가 없을 경우 대체 이미지를 출력하도록 만들어보세요.
• 영화 상세정보가 출력되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
• 영화 상세정보 포스터를 고해상도로 출력해보세요. (실시간 이미지 리사이징)
• 차별화가 가능하도록 프로젝트를 최대한 예쁘게 만들어보세요.
• 영화와 관련된 기타 기능도 고려해보세요.

[iamidlek]

고생하셨습니다.
전반적으로 잘 해주셨습니다.

커밋, 폴더 구조, 구현 기능에 대한 로직 확인과 같은 부분이
조금 더 필요할 것 같습니다.
root에 src, public, readme 등 두어주시면 좋을 것 같습니다.
favicon 사용은 브라우저 탭의 icon용으로 하시면 좋을 것 같고
tailwind class가 중복되어 덮어씌어지는 부분이 종종 보여서 주의하여 사용하면 좋을 것 같습니다.

[iamidlek]

alias 설정 후 사용은 안하신 것 같습니다.

[iamidlek]

decoration: 오타인 것 같습니다.

[iamidlek]

className 불필요해 보입니다.

[iamidlek]

동일한 li 가 반복되는 것 같습니다.
컴포넌트화 해보는 것도 좋은 연습이 될 것 같습니다.

[iamidlek]

바로 구조 분해하여 받으셔도 좋을 것 같습니다.

Suggested change

	export default function MovieFilter(props) {
	export default function MovieFilter({
	typeFilter,
	setTypeFilter,
	countFilter,
	setCountFilter,
	yearFilter,
	setYearFilter,
	}) {

[iamidlek]

이벤트 핸들링에 대한 함수명 컨벤션이 있어야 할 것 같습니다.
e.key === "Enter" 를 확인하는 동작이 pressEnterKey() 함수 내에서 확인될 것 같은 인식을 줍니다.

[iamidlek]

fetchMovies 함수를 호출하면 이 부분에서 한번더 요청을 보내지 않을까요?

[iamidlek]

for 요청 안에서 await fetch 하는 것은 좋지 않은 것 같습니다.
필요한 요청을 모아 Promise.all로 요청하는 것이 좋을 것 같습니다.

[iamidlek]

전체적으로 다시 로직을 생각해 보시면 좋을 것 같습니다.
예를 들어 30 개의 요청이라면 요청 개수에 맞는 페이지 수를 구하고
그에 맞게 요청을 보내 받은 값들을 합쳐서 return 해주는 것이 좋을 것 같습니다.

[iamidlek]

각 페이지마다 Header, Footer를 넣으시면
라우트 이동 시 재랜더링이 된다고 보시면 됩니다.
layout 으로 사용하고 변하는 부분만 재랜더링 되도록 해주세요