[movie PJ_day4] 영화 검색 페이지 구현 - 검색 기능 구현

이전 상황

 

10일의 과제

 

어려워하는 학생들을 위해 튜터님께서 핵심 구현 기능들을 설명해주셨고

주말동안 열심히 살펴보았다.

 

개인과제 tip

 

[뼈대 만들기]

1. 순서가 없는 리스트인 ul태그와 그 내부의 li태그 작성 -> 뼈대 만들기
2. DOM에서 ul 태그에 접근하여 innerHTML을 삽입하기

[데이터 가져오기]

1. fetch 함수 사용하기
   1-1. (어딘가에 정의되어있는) fetch함수는 ‘promise’라는 객체를 return(반환)한다.
   1-2. Promise 객체는 여러 속성, 메서드 중에 ‘then’을 포함한다.
   1-3. Then 메서드는 함수를 인풋(인자)으로 갖는다.
   1-4. 이 함수에는 promise 객체의 return 값을 넣어준다.
   콜백함수 안에서는 res.json()을 통해서 JS에서 활용 가능한 객체형태로 바꿔준다.
   1-5. json() 도 promise를 return 하기 때문에 또 .then으로 받을 수 있다.
   1-6. 결국 JS에서 활용가능한 array 형태로 결과값을 얻을 수 있다.

[데이터 활용하기]

1. array(배열) 형태로 받아온 20개의 값을 활용한다.
   1-1. .innerHTML를 통해 ul태그 안에 20개의 li태그로 값을 나타낸다.
2. li태그 빈 묶음을(let emptyStr = “”) 만들고 for문 내부에 li태그를 만들기
   +) <li>내의 data-id="${res[i].id}" 는 나중에 몇 번째 id인지 확인하기 위한 것으로 딱히 필요 없긴하다..!
   +) emptyStr에 대입할 li 태그는 ``으로 감싸준다.(temp_html과 같은 방식)
3. emptyStr을 ul태그와 연결하기
   6-1. for문이 끝나고 .innerHTML을 통해 내용을 넣어준다.
   (resultUl.innerHTML = emptyStr)

[검색 기능 실현하기]

1. UI 만들기 : input태그와 button태그
2. 버튼에 이벤트리스너 부여하기
3. input에 입력된 값을 가져오기 => .value
4. 그 값으로 list를 필터링
   *검색을 위해서는 20개의 정보가 저장된 곳에 접근을 해야 함*
   => script 전체에서 데이터를 관리할 수 있는 변수로 선언하기

+)[함수 나누기]

1. 데이터를 읽어오는 함수

2. 데이터를 뿌려주는 함수 (displayPosts)

 

  5. 버튼을 눌렀을 때 검색 내용을 필터링하기
      [filter 함수]
- 인자로 함수를 갖는다.
- 콜백함수의 return에는 조건을 부여한다.

filter(function(여기){
    return 여기 >=5;
});

 

 

 

📍 구현한 코드

const moviesUl = document.querySelector("#movies");
const btn = document.querySelector(".btn");
const searchInput = document.querySelector("#searchInput");
const modal = document.querySelector(".modal");
const close = document.querySelector(".close");


let postArray = [];
console.log(postArray);

function fetchData() {
  fetch(
    "https://api.themoviedb.org/3/movie/popular?api_key=${key}&language=ko-KR&page=1"
  )
    .then(function (res) {
      return res.json();
    })
    .then(function (결과) {
      console.log(결과);
      let postArray = 결과.results;
      displayPost(결과);
    });
}
fetchData();


function displayPost(posts) {
  emptyStr = "";
  for (let i = 0; i < posts.results.length; i++) {
    emptyStr += `<li class="item" data-id="${posts.results[i].id}">${posts.results[i].title}</li>`;
  }
  moviesUl.innerHTML = emptyStr;
}


btn.addEventListener("click", function () {
  const keyword = searchInput.value;
  const filterPosts = postArray.filter(function (영화) {
    return 영화.title.includes(keyword);
  });
  console.log(filterPosts);
  displayPost(filterPosts);
});


moviesUl.addEventListener("click", function (e) {
  console.log(e.target);
  // 새롭게 fetching 하는 로직(item 하나에 대해서)
  modal.style.display = "block";
});
close.addEventListener("click", function () {
  modal.style.display = "none";
});

 

크게 fetchData() / displayPost() / btn.addEvent / moviesUl.addEvent
로 나뉘어서 보면 된다.

 

문제 상황 및 추론

 

❓문제 1. Filter 메서드가 작동하지 않음 -> postArray 가 배열이 아닌가?

❓문제 2.postArray = []; 가 전역변수로서 선언이 안 되는 듯 함

❓문제 3. console.log(postArray); 를 했으나 빈 배열이 찍힘

❓문제 4. displayPost 내부의 for문에서 .results를 제거시 화면에 리스트가 사라짐

 

문제 해석

튜터님께서 구현하시는 API 링크와 내가 사용하는 것이 다르기 때문에 상황에 맞게 변형했지만,

여러 번 시도해도 안 풀리는 부분을 여쭤봤다.

 

그 답은,

📌문제 2.

=> postArray에 배열 값을 확인하려면 지금 수준에서는 어려움.

맥락을 살펴보고 담겨있다고 가정하여 진행해야 함.

 

📌문제 3.

=> fetchData()의 인풋으로 ‘결과’가 아닌 ‘postArray’ 즉, 객체 ‘결과’ 중 results의 값을 넣어 화면에 제목 리스트를 띄운다.
&
difplayPost의 인풋(posts)는 결과의 results만 담은 배열이기 때문에 내부 for문에서 .results를 제거해야 함.

 

📌문제 4.

=> postArray =  결과.results 로 재선언했기에 리스트가 화면에 잘 뜸.

 

중요한 것은 이곳저곳에서 사용된 displayPost에 집중하여 

어느 곳에서 어떻게 사용되는지, 인풋으로 어떤 것이 들어오고 아웃풋으로 어떤 것이 나가는 지에 대해 이해하는 것이다.

 

문제 해결

 

📌 검색 기능 구현 완료

다음 단계인 '모달' 기능 구현 직전!

//main2.js : 자바스크립트 기능 구현 로직임.

const btn = document.querySelector(".btn");
const searchInput = document.querySelector("#searchInput");
const modal = document.querySelector(".modal");
const close = document.querySelector(".close");
const baseImgUrl = "https://image.tmdb.org/t/p/w500";
const cardSection = document.querySelector(".cards");

let postArray = [];
console.log(postArray); // 빈 배열인 게 맞으며, 지금 수준에서는 확인하기 어려움

function fetchData() {
  fetch(
    "https://api.themoviedb.org/3/movie/popular?api_key=${key}&language=ko-KR&page=1"
  )
    .then(function (res) {
      return res.json();
    })
    .then(function (결과) {
      console.log(결과);

      postArray = 결과.results;
      // input : 객체 '결과' 중 results의 값 (배열)
      displayPost(postArray);
    });
}
fetchData();

// input : 결과의 results만 담은 배열
function displayPost(posts) {
  temp_html = "";

  for (let i = 0; i < posts.length; i++) {
    temp_html += `
    <div data-id="${posts[i].id}" class="mvCard">
         <img id="poster" src="${
           baseImgUrl + posts[i].poster_path
         } class="card-img-top alt="poster">
         <p>${posts[i].title}</p>
         <p>평점: ${posts[i].vote_average}<span id="mvaver"></span></p>
    </div>`;
  }
  cardSection.innerHTML = temp_html;
}

btn.addEventListener("click", function () {
  const keyword = searchInput.value;

  const filterPosts = postArray.filter(function (영화) {
    return 영화.title.includes(keyword);
  });
  console.log(filterPosts);
  displayPost(filterPosts);
});

cardSection.addEventListener("click", function (e) {
  console.log(e.target.closest(".mvCard"));

  modal.style.display = "block";
});

close.addEventListener("click", function () {
  modal.style.display = "none";
});

closest(".mvCard");