Kdt5 lee chang hwi_6조 #73

leechanghwi · 2023-05-10T11:17:35Z

🎬 영화 검색

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

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

과제 수행 및 제출 방법

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

현재 저장소를 로컬에 클론(Clone)합니다.
자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_ParkYoungWoong)
자신의 본명 브랜치에서 과제를 수행합니다.
과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_ParkYoungWoong)
저장소에서 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 · 2023-05-11T16:04:12Z

vite-moviesearch/vite.config.js

+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: [{ find: "~", replacement: `${__dirname}/src` }],


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

iamidlek · 2023-05-11T16:05:14Z

vite-moviesearch/src/components/Footer.jsx

+              <span className="text-regal-yellow opacity-30 ">OMDbAPI</span>.COM
+            </a>
+          </li>
+          <li className="text-regal-yellow opacity-30 decoration: underline">


decoration: 오타인 것 같습니다.

iamidlek · 2023-05-11T16:05:25Z

vite-moviesearch/src/components/Footer.jsx

+          </li>
+          <li className="text-regal-yellow opacity-30 decoration: underline">
+            <a
+              className=""


className 불필요해 보입니다.

iamidlek · 2023-05-11T16:07:11Z

vite-moviesearch/src/components/Header.jsx

+          <li
+            className={`w-20 m-0 h-10 flex items-center justify-center ${
+              location.pathname === "/"
+                ? "bg-regal-yellow text-white"
+                : "active:bg-regal-yellow hover:text-yellow-300 "
+            } rounded-lg py-2 px-4`}
+          >
+            <a href="/">Search</a>
+          </li>


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

iamidlek · 2023-05-11T16:07:55Z

vite-moviesearch/src/components/MovieFilter.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+
+export default function MovieFilter(props) {


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

Suggested change

export default function MovieFilter(props) {

export default function MovieFilter({

typeFilter,

setTypeFilter,

countFilter,

setCountFilter,

yearFilter,

setYearFilter,

}) {

iamidlek · 2023-05-11T16:34:24Z

vite-moviesearch/src/components/SearchInput.jsx

+        placeholder="Search for Movies, series & more"
+        value={inputText}
+        onChange={(e) => setInputText(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && pressEnterKey()}


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

iamidlek · 2023-05-11T16:37:13Z

vite-moviesearch/src/core/movie.js

+  if (countFilter) {
+    let result = [];
+    for (let i = 1; i <= countFilter / 10; i++) {
+      const { data } = await axios({


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

iamidlek · 2023-05-11T16:39:23Z

vite-moviesearch/src/core/movie.js

+
+  if (countFilter) {
+    let result = [];
+    for (let i = 1; i <= countFilter / 10; i++) {


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

iamidlek · 2023-05-11T16:41:36Z

vite-moviesearch/src/core/movie.js

+      });
+      result = result.concat(data.Search || []);
+    }
+    return result.slice(0, countFilter);


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

iamidlek · 2023-05-11T16:42:54Z

vite-moviesearch/src/routes/MovieDetail.jsx

+
+  return (
+    <>
+      <Header />


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

leechanghwi added 7 commits April 26, 2023 16:14

firstcommit

ff802c8

수정본

145e17b

secondcommit

a2a6d13

새로운기능추가

afd07ca

이미지화질변경

24f78da

commit

4ce9f99

commit2

000fc7c

iamidlek reviewed May 11, 2023

View reviewed changes

iamidlek assigned leechanghwi May 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kdt5 lee chang hwi_6조 #73

Kdt5 lee chang hwi_6조 #73

leechanghwi commented May 10, 2023 •

edited

Loading

iamidlek left a comment •

edited

Loading

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

iamidlek May 11, 2023

		@@ -0,0 +1,63 @@
		import React from "react";

		export default function MovieFilter(props) {

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

Kdt5 lee chang hwi_6조 #73

Are you sure you want to change the base?

Kdt5 lee chang hwi_6조 #73

Conversation

leechanghwi commented May 10, 2023 • edited Loading

🎬 영화 검색

과제 수행 및 제출 방법

요구사항

❗ 필수

❔ 선택

iamidlek left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leechanghwi commented May 10, 2023 •

edited

Loading

iamidlek left a comment •

edited

Loading