[TIL] 개인 : 영화 검색 사이트2 - 함수 분리

함수 분리

import fetchData from './FetchData.js';

export const moviesList = async () => {
	const app = document.getElementById('app');
	const section = document.createElement('section');
	const movieList = document.createElement('ul');

	section.id = 'section';
	movieList.id = 'movie-list';
	app.appendChild(section);
	section.appendChild(movieList);

	const movies = await fetchData();

	console.log(movies);

	const card = movies
		.map((movie) => {
			return `
      <li class="movie-item" id=${movie.id}>
				<a href="">
					<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}"> 
					<div class="info">
						<h3> ${movie.title}</h3>
						<span>⭐${movie.vote_average}</span>
					</div>
					<div class="overview">
						<h3>overview</h3>
						<strong>${movie.title}</strong>
						<p>${movie.overview}</p>
					</div>
				</a>
      </li>
    `;
		})
		.join('');
	// '' 빈 문자열을 표시하지 않으면 ',' 가 뜨는 이유가 뭘까
	// 리스트을 순회 할때마다 재할당 되어 join('') 으로 합쳐짐

	movieList.innerHTML = card;

	const handleClick = (e) => {
		const target = e.target;
		if (target === movieList) return; 
		target.matches('.movie-item') ? alert(`id : ${target.id}`) : alert(`id : ${target.parentNode.id}`);

	movieList.addEventListener('click', handleClick);
};

export default moviesList;

과제 수행중 함수 분리가 필요해 함수를 분리하려고 하다 보니 script 파일에서 section 부분이 null로 나오는 문제가 발생했다. 그 덕분에 footer 하단에 export 되는 상황 + id가 어째서인지 나오지 않았다.

id 문제 : card의 a태그부분을 삭제 해 해결
null 문제 : movieList.innerHTML = CreateCard(movies);

null 문제 : movieList.innerHTML = CreateCard(movies);의 위치를 하단으로 조정 후 import 부분 전부 수정