20230530(화)_ JavaScript 개인과제(영화 검색 사이트 제작) 진행

금일 달성 항목

1) JavaScript 개인 과제 진행
   : 검색기능, 리스트 구조, 선택 시 얼랏 팝업 구현

2) 알고리즘 1차 특강 참여 

---

문제 해결 과정 1 -  검색 기능 구현

[문제]

인터넷을 뒤져서 다양한 방법으로 검색창을 구현하는 법을 찾아보고 시도해봤는데 되질 않았습니다.

https://www.youtube.com/watch?v=EEQ8Gi3Siyg 

https://www.youtube.com/watch?v=TlP5WIxVirU 

 

 

[시도]

검색어에 단어를 입력하면 console.log에 잘 출력이 되는 것은 확인했는데 가져오는 것을 모르겠어서 튜터님께 찾아갔다.

const searchInput = document.getElementById("search");
const searchBtn = document.getElementById("searchBtn");

searchBtn.addEventListener("click", (e) => {
  e.preventDefault();
  const value = searchInput.value.toLowerCase();
  const movieList = document.querySelectorAll(".list");
  let findMovies = [];
  movieList.forEach((list) => {
    // console.log(document.querySelector(`[id='${list.id}'] .card-title`).firstChild)
    const movieTitle = document.querySelector(
      `[id='${list.id}'] .card-title`
    ).innerText;
    const movieOverview = document.querySelector(
      `[id='${list.id}'] .card-overview`
    ).innerText;
    const movieAverage = document.querySelector(
      `[id='${list.id}'] .card-average`
    ).innerText;
    const hide =
      movieTitle.includes(value) ||
      movieOverview.includes(value) ||
      movieAverage.includes(value);
    const inputHidden = hide ? findMovies.push(list) : "hidden";
    // list.element.classList.toggle("hide", !isVisible);
    document.querySelector(`[id='${list.id}']`).style.visibility = inputHidden;
  });

1) 이벤트 요소를 사용해 입력 후 클릭 하면 검색어가 노출되는 것으로 방향을 잡았습니다.

2) toLowerCase();를 통해 대소문자를 구분하지 않게 하였습니다.

3) 가져오는 데이터가 오브젝트로 지정되어있어 innsrText를 통해 spring 으로 변환하여 검색할 수 있도록 하였습니다.

4) 중간중간 데이터가 불러오지 않아서 [id='${list.id}']로 경로를 파줬습니다.

5) hide를 통해 검색창을 사라지게 하는 방법을 사용했습니다.

 

근데 위와같은 방식으로 하니 검색하면 해당 검색된 리스트가 잘 나오긴 하나 중간중간 영역이 빈 상태로 노출되었습니다. 사라지는게 아니고 눈에 안보이게만 만든 겁니다...

 

 

[해결]

그래서 해결하기 검색을하다가 결국 못하고..  동료의 도움을 받았습니다.

데이터를 필터에 넣어서 돌린 후 받은 뒤 송출하는 방식으로 검색을 구현하였습니다.

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4M2JmMDI5ZTBhODE5OTFlZjNjMDNkMTdjZWY0ZGY4MyIsInN1YiI6IjY0NzFkM2VhODgxM2U0MDBhOGY0NTk0MSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Zul1ZGDeSjFFV13VLsDgb1aNx5CLTYX7T0mJPBmmxPo",
  },
};

const section = document.querySelector("#mainSection");

let row = []

fetch(
  "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1",
  options
)
  .then((response) => response.json())
  .then((data) => {
    row.push(data['results'])
    console.log(data)
    rows = data["results"];
    let temp_html = rows.map(
      (a) =>
        `<li class="list" onclick="showAlert(this)" id=${a.id}>
            <img src="https://image.tmdb.org/t/p/original/${a.poster_path}"class="card-image" alt="...">
            <div = "card-body">
            <h2 class="card-title">${a.title}</h2>
            <p class="card-overview">${a.overview}</p>
            <p class="card-average">${a.vote_average}</p>
        </li>`
    );

    const jointemp = temp_html.join("");
    document.querySelector("#list").insertAdjacentHTML("beforeend", jointemp);
  });


function showAlert(show) {
  let id = show.id;
  alert(`영화 아이디는 ${id} 입니다`);
}

function search (){
  let data = row[0]
  let input = document.querySelector('#search')
  let inputValue = input.value;
  let filterData = data.filter(row => row.title.includes(inputValue))
  let html_temp = ''
  filterData.forEach(a => {
    html_temp = html_temp +
     `<li class="list" onclick="showAlert(this)" id=${a.id}>
         <img src="https://image.tmdb.org/t/p/original/${a.poster_path}"class="card-image" alt="...">
         <div = "card-body">
         <h2 class="card-title">${a.title}</h2>
         <p class="card-overview">${a.overview}</p>
         <p class="card-average">${a.vote_average}</p>
     </li>`
    
  });
  let ulEl = document.querySelector("#list")
  ulEl.innerHTML = html_temp
} 

searchBtn.addEventListener("click", search)

[알게된 점]

함수와 이벤트 알고리즘을 활용해서 화면을 구성할때 해결하는 방식으로 사용하는 것을 깨달았습니다. 

그러나 동료덕분에 코드를 겨우 작성하였으나 제가 직접 작성하라고 하면 못하겠습니다.... 말은 이해는 가나 코드를 짤 수가 없습니다.

 

---

문제 해결 과정 2 -  리스트 선택 시 영화 id alert에 노출 

[문제]

li 항목에 alert을 넣고 실행하는 것은 알겠으나 그 안에 API data를 어떻게 표현해야하는지 방법을 몰랐습니다.

  let temp_html = rows.map(
      (a) =>
        `<li class="list" onclick="showAlert" id=${a.id}>
            <img src="https://image.tmdb.org/t/p/original/${a.poster_path}"class="card-image" alt="...">
            <div = "card-body">
            <h2 class="card-title">${a.title}</h2>
            <p class="card-overview">${a.overview}</p>
            <p class="card-average">${a.vote_average}</p>
        </li>`
    );

function showAlert(show) {
  let id = show.id;
  alert(`영화 아이디는 ${id} 입니다`);
}

 

[시도 및 해결]

동료의 도움을 통해 해결하였습니다.

    let temp_html = rows.map(
      (a) =>
        `<li class="list" onclick="showAlert(this)" id=${a.id}>
            <img src="https://image.tmdb.org/t/p/original/${a.poster_path}"class="card-image" alt="...">
            <div = "card-body">
            <h2 class="card-title">${a.title}</h2>
            <p class="card-overview">${a.overview}</p>
            <p class="card-average">${a.vote_average}</p>
        </li>`
    );

function showAlert(show) {
  let id = show.id;
  alert(`영화 아이디는 ${id} 입니다`);
}

 

1) onclick="showAlert에 (this)를 추가하여 지정

2) let으로 선언하여서 실행하였습니다.

 

[알게된 점]

가져온 API에 새롭게 변수를 지정해줘서 제가 원하는 것을 시도해보면 되는 것을 깨달았습니다.

 

---

특강

알고리즘 특강 - 김창민 튜터님

• 성능이 중요하므로 알고리즘이 중요하다
• 개발자는 언어능력 수학 능력이 중요
• 알고리즘을 공부할때는 운동할때 처럼 하루 30분 정도는 해야함
• 기본 코딩 능력을 탄탄하게 만들기 → 문제에 대해 생각하는 능력을 키우기 전략으로 알고리즘 고수됨