[TIL] 개인 : 영화 검색 사이트3

진행사항

main 컴포넌트로 section 만들기

export const createSection = async () => {
   	const app = document.getElementById('app');
   	const section = document.createElement('section'); // 돔 그리기
  	... 중략
    const data = await getPopularData();
  	console.log(data.results);
  	... 중략
    movieUl.innerHTML += cardList(data);
  	... 중략
   	app.appendChild(section); // 사건의 발단
  
    movieUl.addEventListener('click', (e) => {
      // 가장 가까운 요소 찾기(class)
      const cardList = e.target.closest('.movie-item');
      if (cardList) {
        const id = cardList.getAttribute('id');
        handleCardClick(id);
      }
    });
}

일단 모든 요소를 HTML이 아닌 JS에서 그려야 한다는 것에 엄청난 압박감이 생겼다. const section를 통해 section부분을 선언하고 Element들을 차례로 만들어 나가는 형식으로 작업하였다. 나중에 알았지만 append로 하면 여러 가지 createEl을 넣어 쉽게 해결할 수 있었다. appendChild이건 자식요소가 한번에 한개만 들어가기도 하고, 헤더나 푸터같은 다른 곳에서 사용 할 때, 순서가 똑바로 들어가지 않았으며 자꾸 에러를 뱉어 내었다.

alert 영화 정보 띄우기

// id event
const handleCardClick = (id) => {
  alert(`id : ${id}`);
};

movieUl.addEventListener 이런 식으로 async가 먹힌 최 상단의 함수에서 모든 이벤트들을 처리해 주고 싶었고, 요소가 많이 복잡해 e.target.value는 작동이 되질 않았다. 게다가 matches(), include(), child, parents.. 등등 다양한 방법을 써 보아도 타겟이 제대로 잡히지 않고, false만 뱉어내거나 ul 태그 혹은 그 자식태그만 찾아대서 li가 아닌 다양한 태그들을 호출 하였고, 결국 e.target.closest('.movie-item')를 통해, 카드가 존재 할 때, 카드 리스트의 id속성을 가져와 처리하였다.

카드 리스트 만들기

// cardlist
const cardList = (data) => {
  const dataResult = data.results;
  let cardTemp = dataResult
    .map((movie) => {
      const { title, poster_path, vote_average, overview, id } = movie;
      return `
        <li class="movie-item" id=${id}>
        <img src="https://image.tmdb.org/t/p/w500${poster_path}" alt="${title}">
        <div class="info">
          <h3 class="movie-title">${title}</h3>
          <p>⭐${vote_average}</p>
        </div>
        <div class="overview">
          <h3>overview</h3>
          <strong>${title}</strong>
          <p class="movie-content">
            <span>${overview}</span>
          </p>
        </div>
        </li>
      `;
    })
    .join('');
  return cardTemp;
};

카드 리스트 역시 함수 밖 section스코프에서 사용하기 위해, dataResult라는 변수에 result를 선언해 data라는 매개변수를 통해 데이터를 받아오게 하여 처리 하였다. 역시 외부로 빼기 위해 let으로 cardTemp 변수를 만들어 데이터를 맵을 통해 한장한장 만들어 나가고, join으로 리스트들을 순회 할 때마다 재할당 되어 합쳐지게 하였다.
마지막으로 카드데이터를 리턴하여 재사용 가능하게 만들어 주었다.

느낀점

사람들이 괜히 html로 구조를 잡고 다른 부수적인 것들을 작성는게 아니다. 다 이유가 있다. 하지만 하면 할수록 점점 더 능숙해 지고 있는 느낌이 든다.