[인기 영화 검색 사이트] 제작 프로젝트 #4 - 영화 ID 출력 및 검색 결과 출력

G_NooN·2024년 1월 7일

프로젝트

목록 보기

4/13

영화 ID 출력

JSON 데이터를 가공한 HTML의 movie_card에 click event 설정

const movie_result = movie_data.map((movie) => {
  let movie_html = `
  <div class="movie_card"token interpolation">${movie.title}] 의 Movie ID : ${movie.id}')">
  ... 중략 ...
  </div>`
})

검색 결과 출력

DOM 지정 및 이벤트 연결

// DOM 지정
const inputText = document.getElementById("search_text");	// 검색창
const searchButton = document.getElementById("serach_btn");	// [검색] 버튼

// 이벤트 연결 (엔터키(Enter) 입력)
inputText.addEventListener("keydown", function (e) {
  if(e.key === "Enter") {
    e.preventDefault();	// 브라우저의 기본 동작값을 스킵
    showSearchResult();	// 검색 결과를 출력하는 함수
  }
});
// 이벤트 연결 ([검색] 버튼 클릭)
serachButton.addEventListener("click", showSearchResults);

검색 결과 출력 함수

function showSearchResults() {
  // TMDB JSON 데이터 가공
  fetch(url, options)
    .then((res) => res.json())
    .then((data) => {
      const movie_data = data["results"];
      
      // 검색 결과를 Array.filter를 활용하여 return
      const searched_list = movie_data.filter((movie) => {
        return (
          // "입력 값"을 포함하는 제목을 가진 영화
          movie.title.includes(inputText.value) ||
          // "입력 값"을 포함하는 원제를 가진 영화(대/소문자 구분 X)
          movie.original_title.toUpperCase().includes(inputText.value.toUpperCase()
        );
      });
    
      // 검색 결과를 Array.map을 활용하여 HTML 형태의 배열로 저장
      const searched_result = searched_list.map((movie) => {
        let movie_html = `
    <div class="movie_card"token interpolation">${movie.title}] 의 Movie ID : ${movie.id}')">
      <div class="movie_content">
        <h2>${movie.title} (${movie.original_title})</h2>
        <p><strong>개봉일</strong> : ${movie.release_date} / <strong>평점</strong> : ${movie.vote_average}</p>
        <p>${movie.overview}</p>
      </div>
      <div class="movie_img">
        <img src="https://image.tmdb.org/t/p/w185${movie.poster_path}" />
      </div>
    </div>`;
        
        return movie_html;
      });
    
      // 새로운 HTML 입력을 위해 기존 HTML 초기화
      movie_list.innerHTML = "":
      
      // searched_result 배열을 HTML에 출력
      searched_result.forEach((movie) => {
        movie_list.innerHTML += movie;
      });
    })
    .catch((err) => console.log(err));
}

에러 발생

DOM으로 지정한 요소들이 함수로 넘어오지 않음

원인

body 태그를 읽어 오기 전에 script를 실행해버려서 document를 읽을 수 없음

해결 과정

DOM과 함수를 window.onload = funtion () {} 안에 넣어서 실행함

결과 화면

문제점 및 개선필요 부분

JavaScript도 JavaScript지만 HTML과 CSS도 만만치 않은 복병이었다.
빠른 시일 내에 HTML과 CSS를 복습해야겠다.
JSON 데이터를 가공하여 HTML로 출력하는 과정을 고쳐야 할 필요가 있다.
map과 filter, forEach를 사용하여 어찌저찌 결과물을 완성시켰지만, 중복되는 코드가 많아 개선이 필요하다.
어쩌면, 이 부분도 HTML과 연관지을 수 있을 것 같다.
코드의 분리가 필요하다.
기능별로 코드를 분리하여 export, import 기능을 사용해보자.
비동기 작업을 공부해보자.