내일배움캠프 6기 React WIL

2023.06.04

순수자바스크립트 개인과제

github
이 번주 동안 만든 자바스크립트를 사용한 프로젝트.
TMDB api에서 가져온 영화데이터를 화면에 보여주고 영화를 검색할 수 있는 검색 기능 구현해보기.

영화 카드 만들기

function showMovies(data) {
  data.forEach((movie) => {
    const { id, title, poster_path, vote_average, overview } = movie;
    const cardSection = document.querySelector(".card-list");
    const card = document.createElement("div");

    card.className = "movie-card";
    card.innerHTML = `
                      <img class=img src="https://image.tmdb.org/t/p/w500/${poster_path}" alt="${title}" />
                      <h2 class="card-title">${title}</h2>
                      <p class="card-rating">${vote_average}</p>
                      <p class="card-overview">${overview}</p>
    `;
    cardSection.appendChild(card);
  });
}

document.querySelector(selector) : CSS 선택자를 이용하여 요소를 선택합니다.
document.createElement(tagName) : 새로운 HTML 요소를 생성합니다.
element.innerHTML : 해당 요소 내부의 HTML 코드를 변경합니다.
element.appendChild(child) : 해당 요소의 하위 요소로 child를 추가합니다.

검색 기능

  //대소문자 구분 없이, 공백 있어도 검색 가능
  keywords = input_val.toUpperCase().replace(/\s+/g, "");

사용자에게 입력값을 받아온다.. toUpperCase() 메소드로 대소문자 구분 없이 검색 가능하도록
replace(/\s+/g, "") 메서드로 공백이 있어도 검색이 가능하게 구현해 보았다.

검색 실시간 반영

<input
        type="text"
        id="search-input"
        name="pass"
        onkeyup="movieSearch();"
        placeholder="영화 제목을 검색해 보세요"
      />

검색 input 태그에를 넣어보니 검색란에 문자를 입력할 때 마다 계속 반영이 되었다.
onkeyup(KeyCode 값) : 사용자가 키보드의 키를 눌렀다가 땠을 때
onkeydown(KeyCode 값) : 사용자가 키보드의 키를 눌렀을 때
onkeypress(ASCII 값) : 사용자가 키보드의 키를 눌렀을 때
onkeypress는 shift, ctrl 같은 아스키값이 아닌 키는 인식하지 못한다고 한다.