개인과제 마무리

처음으로 코드를 하나하나 직접 코딩하며 영화 검색 웹페이지를 만들어 보았다.
https://hyochang5147.github.io/personal-project/

HTML과 CSS 부분은 클론코딩의 연습으로 어느정도 수월하게 코딩할수 있엇지만 JS의 기능구현을 하기위한 코딩이 가장 힘들었던것 같다.

이번 과제의 핵심부분인 영화사이트의 API를 불러와 카드로 구현하는 부분이 개인적으로 가장 힘들었던것 같다.

과제에서는 'API데이터를 가져와 데이터를 기반으로 카드를 만들어라' 어떻게 접근할지 몰라
반대로 생각을 하게 되었다.

API사이트를 변수로 지정하고 API항목을 querySelector함수로 설정하여 카드에 API데이터를 넣는것으로 코딩을 하였다.

const MY_API_KEY = `5d59af4f23d0d20dbd878aad8ac9a2fd`;
const API_URL = `https://api.themoviedb.org/3/movie/popular?`;
const IMAGE_URL = `https://image.tmdb.org/t/p/w1080`;

let popularTop20Document = document.querySelector(".most-popular");

const movieCardDom = (movies) => {
  popularTop20Document.innerHTML = "";

  movies.forEach((movie) => {
    popularTop20Document.innerHTML += `<div class="movie">
        <img class="movie-image" src="https://image.tmdb.org/t/p/w500${movie.poster_path}"token interpolation">${movie.id}')">
        <div class="movie.info">
          <h3>${movie.original_title}</h3>
          <p>${movie.overview}</p>
          <span>Rating: ${movie.vote_average}</span>
        </div>
    </div>`;
  });
};

const getpopularTop20Moviews = async () => {
  const request = await fetch(`${API_URL}api_key=${MY_API_KEY}&language=ko-KR`);
  const { results } = await request.json();

  movieCardDom(results);
};

위와 같이 코딩함으로써 API의 영화 정보 20개를 forEach문을 사용해 20개의 영화카드로 만드는데에 성공 하였다.

다음으로 API검색기능을 만드는것을 구현해 보았다.

async function searchMovie(keyword) {
  const response = await fetch(
    `https://api.themoviedb.org/3/search/movie?api_key=${MY_API_KEY}&query=${keyword}&include_adult=false&language=ko-KR&page=1`
  );
  const { results } = await response.json();
  movieCardDom(results);
}

const searchForm = document.querySelector("#search_form");
searchForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const keyword = event.target.children[0].value.toLowerCase();
  searchMovie(keyword);
});

API기반의 검색기능을 구현하여 처음 불러온 popular API의 데이터뿐만 아닌 API를 제공하는 TMDB의 영화 데이터 전부를 검색할수 있도록 구현하였다.

처음 하는 개인과제라 아직 코드에대해 설명도 많이 부족하고 튜터님들의 도움도 많이 받았지만 이제 시작이라고 생각한다.

이번과제를 계기로 더욱더 발전하는 내가되자!!