피드백

• 필수 구현 사항을 잘 만족하신 것 같습니다. 고생하셨습니다.
• 카드 전체가 아니라 설명만 클릭 되는 것이 아쉽네요.
• 리뷰 수정 중 수정을 하지 않고 그만두려고 할 때는 새로고침 말고 방법이 없네요. 이 부분을 추가적으로 구현해주면 더 좋을 것 같습니다.
• 뒤로가기 로고가 바로 전 페이지로 이동할 것 같지만 홈페이지로 이동하네요. 사용자가 바로 직전 페이지로 이동한다고 생각할 수도 있을 것 같습니다. 로고를 바꾸거나 바로 뒤로 돌아가도록 하는 것이 혼란을 주지 않을 것 같습니다.

코드 피드백

• getJson 함수의 에러 처리를 console.error로만 하고 있네요. UI적으로 에러를 처리해주는 것이 더 좋을 것 같습니다.
  

  movie-collection/js/movie.js

  Lines 26 to 30 in 9a17ad4

  	function getJson(url, options) {
  	return fetch(url, options)
  	.then((response) => response.json())
  	.catch((err) => console.log(err));
  	}

• document.createElement("id"), document.createElement("backdrop"), document.createElement("date")과 같은 코드는 적절하지 않아 보입니다. id, backdrop, date 태그를 생성하는 것은 없기 때문에 createElement 함수의 의미를 좀 더 정확히 이해해보시면 좋을 것 같습니다. 브라우저에서 임의로 생성할 수는 있지만 일반적으로 존재하지 않는 태그라는 점을 인식해주세요.
  

  movie-collection/js/movie.js

  Line 92 in 9a17ad4

  const movieID = document.createElement("id");

  
  

  movie-collection/js/movie.js

  Line 110 in 9a17ad4

  const movieBackDropSaver = document.createElement("backdrop"); // Backdrop 링크를 전달하기 위한 방법

  
  

  movie-collection/js/movie.js

  Line 116 in 9a17ad4

  const movieRelaseDate = document.createElement("date"); // 출시일자 전달하기 위한 방법

• moviePoster와 movieBackdrop에서 }가 문자열로 끝에 추가되어 있네요. 이 부분은 추후 문제가 생길 수도 있을 것 같습니다. 수정하시는 것이 좋겠습니다.
  

  movie-collection/js/movie.js

  Lines 44 to 45 in 9a17ad4

  	moviePoster: `${imgUrl}${elem["poster_path"]}}`,
  	movieBackdrop: `${imgUrl}${elem["backdrop_path"]}}`, // backdrop_path와 release_date 를 넘겨주기 위해 display none 으로 설정하고 넘겨주기로 함

• document.querySelector(".movie-collection"); 함수는 forEach 밖에서 한 번 변수로 할당한 후 재사용하는 것이 좋겠습니다. 반복적인 DOM 조회는 성능상 문제가 발생할 수 있습니다.
  

  movie-collection/js/movie.js

  Lines 59 to 60 in 9a17ad4

  	movies.forEach((elem) => {
  	const movieCardCollection = document.querySelector(".movie-collection"); // card container 선택.

• moiveDetailHtml 변수명에 오타가 있는 것 같습니다. 작은 오타지만 추후 혼란을 줄 수 있기 때문에 수정하시는 것이 좋겠습니다.
  

  movie-collection/js/info.js

  Line 3 in 9a17ad4

  const moiveDetailHtml = `

• movieDetail.setAttribute("innerHTML", movieDetailHtml); 대신에 movieDetail.innerHTML = movieDetailHtml;를 사용하는 것이 더 적합합니다. setAttribute는 HTML 속성을 설정할 때 사용되며, innerHTML은 프로퍼티입니다.
  

  movie-collection/js/info.js

  Line 24 in 9a17ad4

  movieDetail.setAttribute("innerHTML", moiveDetailHtml);

• movie.js에서와 마찬가지로 해당 코드를 잘못 사용하고 있습니다. const movieBackdrop = document.createElement("backdrop");에서 backdrop은 표준 HTML 요소가 아닙니다. 이 부분은 div나 다른 표준 요소를 사용해야 합니다. const movieId = document.createElement("id");와 const movieRelaseDate = document.createElement("date"); 도 마찬가지입니다.
  

  movie-collection/js/info.js

  Line 129 in 9a17ad4

  const movieBackdrop = document.createElement("backdrop"); // Backdrop 링크를 전달하기 위한 방법

  
  

  movie-collection/js/info.js

  Line 146 in 9a17ad4

  const movieId = document.createElement("id");

  
  

  movie-collection/js/info.js

  Line 150 in 9a17ad4

  const movieRelaseDate = document.createElement("date"); // 출시일자 전달하기 위한 방법

• handleClick 함수에서 evt.target.parentElement.parentElement.id와 같은 방식으로 DOM을 탐색하는 것은 안정적이지 않습니다. 구조가 변경되면 쉽게 오류가 발생할 수 있습니다.
  

  movie-collection/js/info.js

  Lines 182 to 186 in 9a17ad4

  	const handleClick = (evt) => {
  	const target = evt.target;
  	const targetId = evt.target.parentElement.parentElement.id;
  	const targetImg = evt.target.parentElement.parentElement.firstChild.src;

• fetch 내부에 너무 많은 코드들이 들어있습니다. 기능적으로 나눠 함수로 분리하면 좀 더 가독성이 높아지고 관리에 용이할 것 같습니다.
  

  movie-collection/js/info.js

  Lines 90 to 180 in 9a17ad4

  	fetch(
  	`https://api.themoviedb.org/3/movie/${ID}/similar?language=en-US&page=1`,
  	options
  	)
  	.then((response2) => response2.json())
  	.then((response2) => {
  	const movieData2 = response2["results"];
  	const recommend = document.querySelector("#recommend_movies");
  	movieData2.forEach((element) => {
  	const title = element["title"];
  	const poster = element["poster_path"];
  	const backdrop = imgUrl + element["backdrop_path"];
  	const overview = element["overview"];
  	const voteAverage = element["vote_average"];
  	const id = element["id"];
  	const release_date = element["release_date"];
  	const moviePoster = document.createElement("img");
  	if (poster === null) {
  	moviePoster.setAttribute("src", "../image/No_Image_Available.jpg");
  	} else {
  	moviePoster.setAttribute(
  	"src",
  	`https://image.tmdb.org/t/p/w300${poster}`
  	);
  	}
  	moviePoster.classList.add("movie-poster");
  	const movieInfo = document.createElement("div");
  	movieInfo.classList.add("movie-info");
  	const movieTitle = document.createElement("h2");
  	movieTitle.classList.add("movie-title");
  	movieTitle.classList.add("ubuntu-bold");
  	movieTitle.textContent = title;
  	const movieBackdrop = document.createElement("backdrop"); // Backdrop 링크를 전달하기 위한 방법
  	movieBackdrop.textContent = backdrop;
  	movieBackdrop.setAttribute("class", "except"); // 보이지 않도록 설정
  	const movieOverview = document.createElement("p");
  	movieOverview.classList.add("movie-overview");
  	movieOverview.classList.add("quicksand-medium");
  	movieOverview.textContent = overview;
  	const movieRating = document.createElement("span");
  	movieRating.classList.add("movie-rating");
  	movieOverview.classList.add("quicksand-light");
  	movieRating.textContent = `Rating: ${
  	Math.round(voteAverage * 100) / 100
  	}`;
  	movieRating.innerHTML += "<br> <br>";
  	const movieId = document.createElement("id");
  	movieId.textContent = id;
  	movieId.setAttribute("class", "except");
  	const movieRelaseDate = document.createElement("date"); // 출시일자 전달하기 위한 방법
  	movieRelaseDate.textContent = release_date;
  	movieRelaseDate.setAttribute("class", "except"); // 보이지 않도록 설정
  	const movieAnchor = document.createElement("a"); // 상세페이지 링크 삽입
  	movieAnchor.textContent = `More Information`;
  	movieAnchor.setAttribute("href", "./review.html");
  	movieAnchor.setAttribute("class", "movie-detail__info__review");
  	movieAnchor.classList.add("gowun-dodum-regular");
  	const movieCard = document.createElement("div");
  	movieCard.setAttribute("id", `${id}`);
  	movieCard.classList.add("movie-card");
  	movieInfo.appendChild(movieTitle);
  	movieInfo.appendChild(movieOverview);
  	movieInfo.appendChild(movieRating);
  	movieInfo.appendChild(movieBackdrop);
  	movieInfo.appendChild(movieRelaseDate);
  	movieInfo.appendChild(movieId);
  	movieInfo.appendChild(movieAnchor);
  	movieCard.appendChild(moviePoster);
  	movieCard.appendChild(movieInfo);
  	recommend.appendChild(movieCard);
  	movieAnchor.addEventListener("click", handleClick);
  	});
  	})
  	.catch((err) => console.error(err));