TIL #5 | 23.10.19

DOM 요소에 데이터 반영하기

• createElement를 사용하여 리스트 안에 들어갈 카드를 먼저 만들고, 그 안에 들어갈 요소들도 만들어준다.
• appendChild를 사용하여 카드 안에 들어갈 데이터를 자식 요소로 넣어준다.
• 마지막으로 만든 카드를 appendChild를 이용하여 가져왔던 리스트의 자식 요소로 넣어준다.

let listCards = document.querySelector(".movie_cards");

movies.map((movie) => {
  console.log(movie);
  const listCard = document.createElement("div");
  const listImg = document.createElement("img");
  const listTitle = document.createElement("h3");
  const listRating = document.createElement("span");
  const posterPath = `https://image.tmdb.org/t/p/w500/${movie.poster_path}`;
  listImg.src = posterPath;
  listCard.appendChild(listImg);
  listTitle.innerText = movie.title;
  listRating.innerText = movie.vote_average;
  listCard.appendChild(listTitle);
  listCard.appendChild(listRating);

  listCards.appendChild(listCard);
});

id 값 가져오기

• addEventListener를 사용하여 선택 시 idAlert() 함수가 실행되도록 했다.
  - ()를 붙이지 않은 것은 즉시실행하지 않을 것이기 때문이다. (클릭 시에 호출 되도록 함)

function idAlert(e) {
        e.preventDefault();
        alert(movie.id);
      }

listCard.addEventListener("click", idAlert);

JS로 검색 기능 구현하기

구현해야 할 기능
1. 검색하지 않았을 경우의 영화 리스트를 출력한다.
2. 검색 했을 경우 대소문자를 구분하지 않고 키워드를 포함한 영화 리스트를 출력한다.

❗️ 검색 기능 구현 시 문제 상황
forEach(), map(), filter() 등의 배열 메서드를 사용하여 검색 기능을 기능을 구현하려 했다.
초기 화면을 불러오는 것은 성공했지만 이미 불러온 영화 리스트를 검색 시 어떻게 필터링 해서 출력해야 하는지 고민이었다.

• 초기 영화 리스트 출력

// 사용할 데이터 가져오기
let movies = data.results; // 재할당 할 것이기 때문에 let으로 변수 선언

const showMovies = (list) => {

  let cardList = document.querySelector(".movie_cards");
	
	// 리스트에 들어갈 객체들을 배열로 반환한다.
  list.forEach((movie) => {
		//createElement를 사용하여 요소 추가
    const card = document.createElement("div");
    const cardImg = document.createElement("img");
    const cardTitle = document.createElement("h3");
    const cardRating = document.createElement("span");
		// 영화 이미지를 불러온다.
    const posterPath = `https://image.tmdb.org/t/p/w500/${movie.poster_path}`;
    cardImg.src = posterPath;
    card.appendChild(cardImg);
	// 각각의 값을 요소의 텍스트 값으로 넣어준다.
    cardTitle.innerText = movie.title;
    cardRating.innerText = movie.vote_average;
	// 추가한 요소를 card의 자식 요소로 넣어준다.
    card.appendChild(cardTitle);
    card.appendChild(cardRating);
    cardList.appendChild(card);

  });
};

• 검색 시 해당 영화 리스트 출력
  - filter() 사용
  - filter() 배열 메서드는 true일 때 값을 도출하고, false일 땐 값을 도출하지 않는다. 그결 과를 배열로 반환한다.
  - filter() 메서드 안에 if문을 넣어 위와 같은 속성을 사용해서 필터링 할 수 있도록 한다.
  - value값이 들어오면 해당 값에 맞는 리스트 출력, 그 외엔 전체 리스트 출력

// 검색 시 input 값 가져오기
const search = document.querySelector("#search");
const searchIcon = document.querySelector("#searchIcon");

function onSearchButtonClick(e) {
      let cardList = document.querySelector(".movie_cards");
			// 영화 리스트 초기화
      cardList.innerHTML = "";

			// 
      filteredMovies = movies.filter(function (movie) {
				// 
        if (e) e.preventDefault();
				
				// input 값이 있다면 키워드를 포함한 영화 리스트 출력
        if (search.value) {
          return movie.title.includes(search.value);
        } else { // 그 외의 상황엔 전체 영화 리스트 출력
          return movie;
        }
      });
			// input value 초기화
      search.value = "";

			// 필터링 된 배열로 shoqMovies 함수 호출
      showMovies(filteredMovies); 
 }

// 검색 버튼 클릭 시 onSearchButtonClick 함수 실행
searchBtn.addEventListener("click", onSearchButtonClick);
// 영화 리스트 배열을 가져오는 함수를 호출한다. (인자로 filteredMovies를 받을 경우 검색 리스트 출력)
showMovies(movies);

---

forEach()와 map()

• 공통점: 둘 다 반복문이며, 배열 메서드로 사용된다.
• 차이점: forEach()는 return값이 없고(undefined), map()은 return값이 있다.
  - forEach()는 기존의 배열을 가져와서 변경하는 개념이고, map()은 새로은 배열을 반환할 수 있다.

---

회고

오늘은 vanila JS로만 영화 데이터를 가져와 검색 기능을 실행할 수 있는 웹페이지를 구현하는 프로젝트를 진행하였다.
실습을 진행하면서 JavaScript로 DOM 요소를 다루는 방법을 알아보았고, 배열 메서드 forEach(), map(), filter()의 사용법에 대한 이해를 할 수 있었다.