🎬 영화 검색 사이트를 만들며 배운 것들

OMDB API (The Open Movie Database)를 활용해 영화 검색 사이트 만들며 발생한 문제와 그 해결 과정을 기록합니다 !

1. X is not iterable

API값으로 영화 정보를 불러오는 중 발생한 문제입니다..

영화 제목을 검색할 경우, 검색한 제목이 포함된 모든 영화를 출력하는 작업을 수행하고 있었습니다. 하지만 검색 결과가 반환되지 않았고, 콘솔창에는 ‘movies(영화 정보를 담은 객체) is not iterable’이 찍혔습니다 💢


문제를 해결하고자 구글링을 해보니

you have to use Object.keys or Object.entries, to iterate over the properties or entries of an object.

라는 해결 방법이 있었습니다.

제가 이해한 바로는 .. 'movies가 순회 불가능한 객체이기 때문에 해당 객체의 key값 혹은 value값을 통해 순회가 가능하도록 만들어라!' 라는 뜻인 듯 하여 .. const movie of Object.values(movies)으로 문제를 해결하려고 했는데요

이번엔 TypeError: Cannot convert undefined or null to object라는 또 다른 문제가 발생했습니다.

아래의 getMovies 함수는 바로 문제의 그 함수로 API에서 영화 정보를 가져와야 하는 아이입니다.

async function getMovies(page = "", title = "", year = "") {
 const url = `https://omdbapi.com/?apikey=7035c60c&s=${title}&page=${page}&y=${year}`;
 console.log(url);
 const res = await fetch(url);
 const { Search: movies } = await res.json();
 console.log(movies);
 return movies;
}

저의 경우 page, title, year 값을 parameter로 넣었고, 어떤 값이 비었는지 확인하기 위해 movies를 콘솔에 찍어보았습니다. 그 결과, page는 정상적으로 출력되지만 title과 year이 비어있는 것을 확인했습니다.

OMDB API 사이트를 확인해보니 parameter 중 title은 필수값으로 반드시 필요한 인자라는데요.. 저는 title이 빈값이라 배열이 반복되지 않고 undefined를 계속 뱉어낸 것이었습니다 아놔

async function getMovies(page = "", title = "frozen", year = "") {
  const url = `https://omdbapi.com/?apikey=7035c60c&s=${title}&page=${page}&y=${year}&type=${genre}`;
  const res = await fetch(url);
  const { Search: movies } = await res.json();
  console.log(movies);
  return movies;
}

이를 해결하기 위해 영화 검색 시 제목을 입력하지 않을 경우 alert창을 띄워 제목을 필수로 입력하도록 하고, title이 비어 모든 기능이 중단되는 것을 방지하고자 제목의 기본값을 frozen으로 지정하자 영화가 정상적으로 출력되었습니다 !

2. select의 기본값

제목 검색을 통해 영화 정보 불러오기 미션을 수행한 뒤, 개봉연도로 검색할 수 있는 기능을 추가하고자 했습니다. 그런데 select태그를 추가하자 검색 결과로 2022년 영화만 불러오는 문제점이 발생했습니다. 문제가 무엇인고 찾아보니 ..

저는 설정한 적 없는 option의 기본값이 2022년으로 지정되어 있었습니다

//첫번째 방법
<option value="">All year</option>
//두번째 방법
<option value="all-year" selected>All year</option>

select는 기본값을 지정하고 싶을 경우 해당 option의 value값을 비워놓거나, 기본으로 지정하고 싶은 값의 option 태그에 selected를 적으면 됩니다. 그렇지 않을 경우 가장 상단의 option이 기본값이 됩니다.

저는 영화 제목을 검색할 때 모든 연도의 영화를 불러오는 것이 기본값이 되어야 하는데, 기본값을 따로 지정하지 않아 가장 상단의 2022년이 기본값이 되어 2022년 영화만을 불러와 문제가 발생한 것이었습니다 ..^^

3. X.classList.add('hidden')이 적용되지 않음

.hidden{
	display: none;
}

moreBtn.classList.add('hidden')

더보기 버튼은 경우에 따라 보이거나 보이지 않도록 구현해야했습니다. 처음에는 이것을 hidden class로 관리하려 했지만, 더보기 버튼에 이미 display: flex가 설정되어 있어 hidden class가 먹히지 않았습니다.

/* 이전 코드 */
main .actions .more-btn {
  display: flex
}
/* 바뀐 코드 */
.more-btn {
  display: flex
}

css 적용시 같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 먼저이기 때문에 아래와 같이 부모 요소를 지우고 해당 class만 남겨두자 hidden class가 바로 적용되었습니다 !

---

아직 모르는 것 투성이라 갈 길이 멀지만 .. ^^ 하나 둘씩 문제점을 찾아가며 깨달음을 얻고있는 중입니다 .. 사실 js 이론 강의만 듣다가 이렇게 직접 코드를 구현하려니 어려움이 많았는데요 ㅜ 나름 재미도 있어서 빨리 더더 많은 프로젝트를 진행해 보고 싶다는 욕심이 들어요 ! 열심히 공부할게요 빠샤