과제 코드 리뷰 - Githubissues

팀 프로젝트를 매우 잘해주셨네요! PR도 활용하시면서 Github랑 더 친해지는 계기가 되셨을 것 같습니다. 아주 잘 하셨습니다!

코드에 대해서 조금만 피드백을 한 번 드려보도록 하겠습니다.

main.js

https://github.com/mimihimesama/movieSearch-Site/blob/7bbd0f965a08430e869e46c037fea5dd970326b2/src/main.js#L7-L9

API 키와 같은 매우 중요한 데이터는 코드 내에 하드코딩이 되지 않아야합니다.
우선은, 이런 것들은 나중에 dotenv와 같은 패키지를 활용해서 환경변수로 관리해야 된다는 것을 인지해주세요.

https://github.com/mimihimesama/movieSearch-Site/blob/7bbd0f965a08430e869e46c037fea5dd970326b2/src/main.js#L11

이렇게 fetch를 활용해서 API를 호출하는데 잘못된 주소 입력 및 기타 이슈등으로 데이터를 제대로 못 가져오면 어떻게 될까요?
오류 처리가 전반적으로 부재한 것 같습니다. 오류는 충분히 날 수 있으니 대비를 하셔야 합니다.
자세한 것은 try-catch와 같은 문법을 검색해서 어떻게 사용하는지 공부해보시면 좋을 것 같습니다.

코드 예제를 보여드리면 다음과 같습니다.

async function loadMovies() {
const url = "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1";
try {
    const response = await fetch(url, {
        method: "GET",
        headers: {
            accept: "application/json",
            Authorization: "Bearer [API_KEY]"
        }
    });
    if (!response.ok) throw new Error('영화 데이터를 가져오는 데 실패했습니다.');
    const data = await response.json();
    return data["results"];
} catch (error) {
    console.error("데이터 페칭 오류 발생: ", error);
}
}

이외에는 큰 이상 없을 것 같습니다! 수고 많으셨습니다!

페이지네이션에 대한 질문을 해주셨는데요.

페이지네이션을 구현하기 위해서는 우선 첫번째로 페이지당 영화를 얼마나 보여줄 것인지를 결정을 해야 됩니다. 이후에 총 페이지를 수를 파악해야 됩니다. 이것은 아래의 코드로 잘 작성하신 것 같습니다. https://github.com/mimihimesama/movieSearch-Site/blob/7bbd0f965a08430e869e46c037fea5dd970326b2/src/main.js#L171-L173

총 페이지 수 계산 시에는 전체 영화 수를 페이지당 영화 수로 나누어 총 페이지 수를 계산합니다. 단, 여기서 나머지가 있으면 페이지 수를 하나 더 추가해야 합니다.

이제 해당 페이지에 따른 영화 목록만 적절하게 출력을 하면 됩니다. 이건 페이지 번호 기준으로 시작 인덱스, 끝 인덱스를 계산하면 됩니다. 그 뒤에 인덱스에 해당하는 영화 목록을 리턴하면 끝입니다. 예시 코드를 작성해드리면 다음과 같습니다.

const startIndex = (currentPage - 1) * moviesPerPage;
const endIndex = startIndex + moviesPerPage;
return movies.slice(startIndex, endIndex);

mimihimesama / movieSearch-Site

과제 코드 리뷰 #16

main.js