영화 검색 기능 구현

새로운 과제가 나왔다. 영화를 검색하여 그 결과를 출력해주는 것이 과제의 대략적인 목표다.
아직 과제를 진행중이지만 과제의 개요와 검색하는 기능의 구현 방법에 대해 올려보겠다.

과제 내용

필수

-영화 제목으로 검색 가능하고 검색된 결과의 영화 목록이 출력돼야 합니다.
-jQuery, React, Vue 등 JS 라이브러리와 프레임워크는 사용하지 않아야 합니다.
-스타일(CSS) 라이브러리나 프레임워크 사용은 자유입니다.

선택

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

강사님의 강의를 통해 기본적으로 영화를 검색하는 방법은 쉽게 제공되었다.
omdp에서 제공하는 api를 사용하기 위한 키를 입력하여 데이터를 받아오는 것이 핵심이다.

const inputEl = document.querySelector('input')
const buttonEl = document.querySelector('.search-btn')
const moviesEl = document.querySelector('ul.movies')
const viewMoreEl = document.querySelector('.view-more')

let searchText = ''
inputEl.addEventListener('input', function () {
  searchText = inputEl.value
})
buttonEl.addEventListener('click', function () {
  getMovies(true)
})
viewMoreEl.addEventListener('click', function () {
  getMovies(false)
})

let movies = []
async function getMovies(isFirst) {
  console.log('searchText:', searchText)
  const res = await fetch(`https://omdbapi.com/?apikey=7035c60c&s=${searchText}`)
  const json = await res.json()
  console.log(json)
  movies = json.Search
  renderMovies(isFirst)
}
function renderMovies(isFirst) {
  const liEls = movies.map(function (movie) {
    const liEl = document.createElement('li')
    const titleEl = document.createElement('h2')
    const posterEl = document.createElement('img')

    titleEl.textContent = movie.Title
    posterEl.src = movie.Poster
    liEl.append(titleEl, posterEl)

    return liEl
  })
  if (isFirst) {
    moviesEl.innerHTML = ''
  }
  moviesEl.append(...liEls)
}

아직 과제를 진행 중이지만 js를 활용하는 첫 과제인만큼 어려운 부분이 있지만
그전보다 좀 더 흥미로운 작업인 것 같다.

주어진 기능 중 몇개나 구현할 수 있을지 기대된다.