프로젝트 피드백 - 예병수 튜터

[DevelopSoo]

피드백

• 기본 기능을 아주 잘 구현하셨습니다. 고생하셨습니다.
• 본인들만의 정확한 컨셉이 있네요. (호러)
• 음악 구현 및 mute 기능을 넣어 으스스한 분위기를 잘 내셨습니다.
• 스크롤 top 기능으로 자바스크립트 추가 기능도 구현하셨네요.
• 비밀번호를 안보이게 하고, 좀 더 상세한 유효성 검사를 하면 좋을 것 같습니다.

코드 피드백

• main.js에서 기본적으로 함수의 기능이 잘 나누어져 있습니다. 코드 가독성이 높네요. 다만 기능별로 파일도 분리하셨다면 더 읽기 쉬운 코드가 될 것 같습니다.

• 이벤트 위임처리로 이벤트를 하나만 등록하게 하셨네요. 좋습니다.
  

  Help/js/main.js

  Lines 104 to 127 in 4b71759

  	document.addEventListener("click", (event) => {
  	const viewModal = event.target.closest(".card");
  	const modalId = viewModal.id;
  	const movieData = movies.find((movie) => movie.id === parseInt(modalId));
  	if (viewModal && movieData) {
  	openModal(`
  	<div class="modalContent2" id="${modalId}">
  	<img
  	class="movieImg"
  	src="https://image.tmdb.org/t/p/w500/${movieData.poster_path}"
  	/>
  	<div class="movieInfo">
  	<p class="movieTitle" id="movieName">
  	${movieData.title}
  	</p>
  	<p class="movieOverview">${movieData.overview}</p>
  	<p class="movieVoteAverage">Rating: ${movieData.vote_average.toFixed(
  	1
  	)}</p>
  	</div>
  	</div>`);
  	}
  	});

• 불필요한 주석은 삭제해주세요.
  

  Help/js/main.js

  Lines 93 to 95 in 4b71759

  	// closeBtn.onclick = function () {
  	// closeModal();
  	// };

• main.js와 review.js의 fetchMovies 함수에 비슷한 코드가 많이 있네요. 이 부분을 분리하고 재사용할 수 있는 방법을 찾아보시면 도움이 될 것 같습니다.
  

  Help/js/review.js

  Lines 15 to 111 in 4b71759

  	async function fetchMovies() {
  	let movies = [];
  	for (let page = 1; page <= 3; page++) {
  	const response = await fetch(
  	`https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=${page}&sort_by=popularity.desc&with_genres=27`,
  	options
  	);
  	const responseJson = await response.json();
  	const pageResults = responseJson.results;
  	// for (const movie of pageResults) {
  	// const creditsResponse = await fetch(
  	// `https://api.themoviedb.org/3/movie/${movie.id}/credits?api_key=7e82827d6ffa944c4567ae823e15e2df`,
  	// options
  	// );
  	// const creditsData = await creditsResponse.json();
  	// movie.credits = creditsData;
  	// }
  	movies.push(...pageResults);
  	}
  	//리뷰페이지 영화 정보 fetch
  	const credits = movies.map(async (movie) => {
  	const creditsResponse = await (
  	await fetch(
  	`https://api.themoviedb.org/3/movie/${movie.id}/credits?api_key=7e82827d6ffa944c4567ae823e15e2df`,
  	options
  	)
  	).json();
  	return { ...movie, credits: creditsResponse };
  	});
  	//모든 비동기화를 병렬로 진행하여 속도향상 -> 하나라도 오류시 문제 발생하는게 단점
  	movies = await Promise.all(credits);
  	//리뷰페이지 영화 정보 fetch 여기까지
  	const content = document.querySelector(".content");
  	movies.forEach((movie) => {
  	const posterImg = movie.poster_path;
  	const title = movie.title;
  	const overView = movie.overview;
  	const average = movie.vote_average.toFixed(1);
  	const id = movie.id;
  	const releaseDate = movie.release_date;
  	const director = movie.credits.crew.find(
  	(director) => director.job === "Director"
  	).name;
  	const actor = movie.credits.cast
  	.slice(0, 4)
  	.map((actor, index) => {
  	if (index === 0) {
  	return actor.name;
  	} else {
  	return `<p class="actorName">${actor.name}</p>`;
  	}
  	})
  	.join("");
  	const movieData = movies.find(() => movie.id === parseInt(movieId));
  	if (movieData) {
  	content.insertAdjacentHTML(
  	"beforeend",
  	`
  	<div class="modalContent2" id="${id}">
  	<div class="movie_container">
  	<img
  	class="movieImg"
  	src="https://image.tmdb.org/t/p/w300/${posterImg}"
  	/>
  	<div class="movieInfo">
  	<p class="movieTitle" id="movieName">
  	${title}
  	</p>
  	<div class="info2">
  	<div class="left">
  	<p class="movieOverview">${overView}</p>
  	</div>
  	<div class="right">
  	<p class="movieDirector"><span>Director</span><br> ${director}</p>
  	<p class="movieActor"><span>Actor</span><br> ${actor}</p>
  	</div>
  	</div>
  	<div class="other_info">
  	<p class="movieVoteAverage">Rating: ${average}</p>
  	<p class="movieReleaseDate">releaseDate : ${releaseDate}</p>
  	</div>
  	</div>
  	</div>
  	</div>
  	`
  	);
  	}
  	});
  	}

• review.js에서 카드를 만들 때 onclick 속성을 html 태그에 바로 넣어주네요. 이 방식은 일반적으로 권장되지 않습니다. 해당 이유에 대해 학습해보신 다음 addEventListener를 사용하여 이벤트를 등록해주세요.
  

  Help/js/review.js

  Line 185 in 4b71759

  <button type="button" class="delBtn" onclick="DeleteComment(${render.id})">삭제</button>

• review.js에선 하나의 영화 정보만 가져오면 될 것 같습니다. 굳이 모든 영화 정보를 가져오지 않게 수정해보세요. 이렇게 한다면 Promise.all도 굳이 사용하실 필요가 없어질 것 같습니다.
  

  Help/js/review.js

  Lines 19 to 24 in 4b71759

  	const response = await fetch(
  	`https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=${page}&sort_by=popularity.desc&with_genres=27`,
  	options
  	);
  	const responseJson = await response.json();
  	const pageResults = responseJson.results;

  
  

  Help/js/review.js

  Line 49 in 4b71759

  movies = await Promise.all(credits);

• 불필요한 주석은 삭제해주세요.
  

  Help/js/review.js

  Line 223 in 4b71759

  // event.preventDefault;