14일차 개인과제 (자바스크립트)

오늘의 개인과제 진행상황을 적어보려합니다!!

오늘의 목표

• 바닐라 자바스크립트만써서 코드 짜기
• TMDB에서 받아온 데이터를 브라우저 화면에 카드 형태의 데이터로 보여주기
• 카드 클릭 시에 클릭한 영화 id 를 나타내는 alert 창 띄우기
• 영화 검색기능 구현하기

🍎 TMDB에서 받아온 데이터를 카드 형태의 데이터로 보여주기

일단 TMDB에서 받아온 데이터를 브라우저 화면에 카드 형태로 데이터를 보여주는것부터 문제였다.

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization:
      'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI0ZmY1NTVkYzQ4Mzk3OTdkMzZiODZlNzE5MWZjZjgzMSIsInN1YiI6IjY0NzQ0MjBhOWFlNjEzMDEyNTdjOWRkOCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.jEHwM9rbkGkWzt14fojKA5PfuHcpxNxLYiIzB6dJM5U',
  },
};

fetch(
  'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1',
  options
)
  .then((response) => response.json())
  .then((response) => {
    let movie_list = response['results'];
    //document.getElementById('cards-box').innerHTML = '';

    let temp_html = ``;
    movie_list.forEach((i) => {
      let img_url = 'https://image.tmdb.org/t/p/w500' + i['backdrop_path'];
      let movie_title = i['title'];
      let overview = i['overview'];
      let vote = i['vote_average'];
      let id = i['id'];

      temp_html += `
      <div class="col">
        <atoken interpolation">${id})" type="button">
          <img src='${img_url}' alt="">
         <div class="info">
          <div class= wrap>
           <h3>${movie_title}</h3>
            <p>${overview}</p>
            <p>⭐ ${vote}</p>
            </div>
        </div>
       </a>
    </div>`;

      document.getElementById('cards-box').innerHTML = temp_html;
      //cardsBoxId.insertAdjacentHTML('beforeend', temp_html); 
    });
  });

이 부분은 웹개발종합반 강의에서 배웠었는데 그때는 제이쿼리 $().append() 이용하여 카드들을 붙일수 있었다. 하지만 이번 개인과제의 조건은 순수 바닐라자바스크립트만을 이용하여 구현해야하기에.. 다른 조원분이랑 같이 고민해보았다.

그래서 처음에는 현재 주석처리되어 있는 .insertAdjacentHTML을 사용해보았었다.
구글링해서 찾게되었는데 일단 카드들을 붙여주기 전에

document.getElementById('cards-box').innerHTML = '';

이렇게 입력해서 원래 있었던 카드들을 없애주고 후에

cardsBoxId.insertAdjacentHTML('beforeend', temp_html); 

이렇게 입력해서 카드들을 붙여줬었다.

하지만 후에 또 다시 다른 조원분 덕분에 지금 현재같은 방식이 있음을 알게되어
.insertAdjacentHTML()에 대해 잘 몰라 찝찝해 하고 있던 나였기에 저런 방식으로 바꾸게 되었다.

temp_html += `
      <div class="col">
        <atoken interpolation">${id})" type="button">
          <img src='${img_url}' alt="">
         <div class="info">
          <div class= wrap>
           <h3>${movie_title}</h3>
            <p>${overview}</p>
            <p>⭐ ${vote}</p>
            </div>
        </div>
       </a>
    </div>`;

      document.getElementById('cards-box').innerHTML = temp_html;

추후에 튜터님께 코드 피드백을 받기 위해 찾아갔을때 들었던 이야기로는
새로운 시도를 하는 것은 좋다는 조언을 들었다.

추후에 Map과 innerHTML을 사용하여 구현할 수 있다는 이야기를 들었는데
다시 구현해보기에는 시간이 부족할거 같아 아쉽지만 다음에 도전해보기로 했다.

위 코드를 사용함으로서 아래 필수요건을 충족할 수 있었다.

✔️ DOM 제어하기 : 하기 api 목록 중 2개 이상 사용하기
1. 문서 객체 조작

• element.innerHTML : 해당 요소 내부의 HTML 코드를 변경합니다.

✔️ 배열 메소드 : 하기 예시 중 2개 이상 사용

• forEach

---

🍎 카드 클릭 시에는 클릭한 영화 id를 나타내는 alert 창 띄우기

이 부분은 이렇게 구현해보았다.

<button type="button" onclick="search_btn()">검색</button>

function info_click(id) {
  alert(`영화 ID:${id}`);
}

---

🍎 영화 검색기능 구현하기

필수 요건으로 배열메소드를 2개 이상 사용해야했기에 이 검색 기능은 filter를 이용하여 구현해보았다.

function search_btn() {
  const movie_name_input = document.getElementById('movie_name_input').value;

  const card_arr = document.getElementsByClassName('col');

  const card_name_tag = [];
  const card_name_arr = [];
  for (let i = 0; i < card_arr.length; i++) {
    card_name_arr[i] = card_arr[i].getElementsByTagName('h3')[0].innerText; //id값 주기
    //card_name_arr[i] = card_name_tag[i][0].innerText;
  }

  const movie_filter = (movie_input) => {
    //밖으로 빼기, 함수 안에 함수 X
    return card_name_arr.filter(
      (el) => el.toUpperCase().indexOf(movie_input.toUpperCase()) > -1
    );
  };

  for (let i = 0; i < card_name_arr.length; i++) {
    card_arr[i].style = 'display:none';
  }

  let movie_name = '';
  for (let i = 0; i < card_name_arr.length; i++) {
    movie_name = movie_filter(movie_name_input)[i];
    for (let i = 0; i < card_name_arr.length; i++) {
      if (movie_name === card_name_arr[i]) {
        card_arr[i].style = 'display:inline-block';
      }
    }
  }
}

코드가 생각보다 길어지고 뭔가 엉망진창인 느낌이 들어 튜터님께 찾아가 조언을 들었다.
그리하여 튜터님께 받은 조언을 주석으로 표현해보았다.

첫번째 문제로 함수 안에 함수는 좋지 않다는것이였다.
그래서 혼자 끙끙거리며 밖으로 빼 함수호출도 해보고 그러다 다른 조원분에게 도움을 받아 수정할 수 있었다.

function search_btn() {
  const movie_name_input = document.getElementById('movie_name_input').value;
  const card_arr = document.getElementsByClassName('col');

  const card_name_arr = [];
  for (let i = 0; i < card_arr.length; i++) {
    card_name_arr[i] = card_arr[i].getElementsByTagName('h3')[0].innerText;
    card_arr[i].style = 'display:none';
  }

  let movie_name = '';
  for (let i = 0; i < card_name_arr.length; i++) {
    movie_name = card_name_arr.filter(
      (el) => el.toUpperCase().indexOf(movie_name_input.toUpperCase()) > -1
    )[i];
    for (let i = 0; i < card_name_arr.length; i++) {
      if (movie_name === card_name_arr[i]) {
        card_arr[i].style = 'display:inline-block';
      }
    }
  }
}

✔️ DOM 제어하기 : 하기 api 목록 중 2개 이상 사용하기
1. 문서 객체 생성과 선택

• document.getElementById(id) : id 속성을 기준으로 요소를 선택합니다.
• document.getElementsByTagName(name) : 태그 이름을 기준으로 요소를 선택합니다.
• document.getElementsByClassName(name) : 클래스 이름을 기준으로 요소를 선택합니다.
• document.querySelector(selector) : CSS 선택자를 이용하여 요소를 선택합니다.

2. 문서 객체 조작

• element.innerHTML : 해당 요소 내부의 HTML 코드를 변경합니다.

✔️ 배열 메소드 : 하기 예시 중 2개 이상 사용

• forEach
• filter

---

힘들었지만 그래도 겨우겨우 필수 요건들을 하나하나 채워나갈 수 있었다.
다음에는 꼭 수월하게 해낼 수 있도록 더더더 열심히 공부해야할거 같다.