2024.01.13 프로젝트 마지막 단계. 코드 합치기

내가 작성한 코드와 팀원이 작성한 코드 합치기

 

 

< 팀원이 작성한 코드 sub.js >

const urlParams = new URLSearchParams(window.location.search);
const itemId = urlParams.get("id");
console.log("Item ID:", itemId);
const API_KEY = "api_key=2f7ff395e001967bcd029e4d663de74c";
const BASE_URL = "https://api.themoviedb.org/3/movie/";
const FULL_URL = `${BASE_URL + itemId}?language=en-US&${API_KEY}`;

const fetchMovieDetails = () => {
  fetch(FULL_URL)
    .then((response) => response.json())
    .then((movie) => showMovieDetails(movie))
    .catch((err) => console.error(err));
};

fetchMovieDetails();

const showMovieDetails = (movie) => {
  console.log(movie);
  const chosenMoviePage = document.getElementById("chosen-movie-page");
  const IMG_URL = "https://image.tmdb.org/t/p/w500";

  chosenMoviePage.innerHTML = `
    <article id="movie-article">
      <section id="poster-section">
        <img src=${IMG_URL + movie.poster_path} />
      </section>
      <section id="info-section">
        <h1>${movie.title}</h1>
        <p class="releas-date">${movie.release_date}</p>
        <p class="vote-star">
          <img src="../assets/main/star.svg" />
          ${Math.ceil((movie.vote_average / 2) * 10) / 10}
        </p>
        <div class="details-box">
          <div class="film-box">
            <img class="film-bar" src="../assets/main/film_bar_gray.png">
            <img class="back-porster" src=${IMG_URL + movie.backdrop_path} />
            <img class="film-bar" src="../assets/main/film_bar_gray.png">
          </div>
          <div class="info-box">
            <p class="tag-line">"${movie.tagline}"</p>
            <p class="plot">${movie.overview}</p>
            <a class="homepage-btn" href="${movie.homepage}" target="_blank">
              <img src="../assets/main/logo_arrow.png"/>
            </a>
          </div>
        </div>
        <div id="review-box">
        </div>
      </section>
    </article>
  `;
  updateReviewList(movie.id);
};

 

 

< 팀원 코드에 합쳐야 하는 나의 코드 statelist.js >

function updateReviewList() {
  const reviewList = document.getElementById("reviewlist");
  const reviews = JSON.parse(localStorage.getItem("reviews")) || [];
  const reviewListUl = reviewList.querySelector("ul");
  reviewListUl.innerHTML = "";

  reviews.forEach((review) => {
    const li = document.createElement("li");
    li.innerHTML = `
		<em>${review.stars}</em>
		<br>
		<br>
		<em>${review.name}</em> <em>${review.impressions}</em>
		<br>
		<br>
		<em>${review.aspects}</em> <em>${review.emotions}</em> <em> ${review.date}</em>
    `;
    reviewListUl.appendChild(li);
  });
}

document.addEventListener("DOMContentLoaded", updateReviewList);

 

우선 상기 코드는 작성된 리뷰를 localstorage에서 리스트로 보여주는 부분이다.

 

위 코드를 전달하기 위해 import를 사용해 전달하고자 했다.

 

 

<그래서 수정된 나의 코드 statelist.js > 

export default function updateReviewList(value) {
  const reviewList = document.getElementById("reviewlist");
  const reviews = JSON.parse(localStorage.getItem("reviews")) || [];
  const reviewListUl = reviewList.querySelector("ul");
  reviewListUl.innerHTML = "";

  reviews.forEach((review) => {
    console.log("1");
    console.log(value);
    console.log(review.id);
    if (Number(review.id) === value) {
      const li = document.createElement("li");
      li.innerHTML = `
    <em>${review.stars}</em>
    <br>
    <br>
    <em>${review.name}</em> <em>${review.impressions}</em>
    <br>
    <br>
    <em>${review.aspects}</em> <em>${review.emotions}</em> <em> ${review.date}</em>
    `;
      reviewListUl.appendChild(li);
    }
  });
}

 

 

❗ ❗ import로 전달한 이유

 

⬇️내가 작성한 코드의 역할

우선 영화의 상세페이지에 구현될 리뷰리스트이기 때문에 

각각의 영화 아이템이 가지고 있는 id로 상세페이지가 열리면 

동일한 id를 가지고 있는 리뷰만 화면에 띄워줘야 한다.

 

그러기 위해서는 상세페이지에서 urlParams로 받아오는 id와 

작성된 리뷰에서 함께 저장한 id 값을 비교해야한다.

 

localstorage 에서 가져오는 reviews에는 movie ID가 저정될 수 있도록 했다. 

그리고 urlParams로 받아오는 id를 가져와야 하는데 

addEventListener를 사용해서 urlParams로 받는 id를 가져올 수 없었다.

 

**addEventListener

=이벤트가 발생하면 미리 등록해둔 이벤트 발생시켜 준다.

** DOMContentLoaded

=돔트리가 완성되었을때 해당 함수를 자동으로 불러주는 event 

즉,  DOMContentLoaded 이벤트가 발생되면 addEventListener가 지정된 함수를 실행해 준다.

 

그래서 해당 코드를 export해서 인자로 urlParams로 받는 id의 값을 받아야 한다.

 

그런데 여기서 당황했다.

  reviews.forEach((review) => {
    console.log("1");
    console.log(value);
    console.log(review.id);
    if (review.id === value) {
      const li = document.createElement("li");

 

원래 처음에는 위에 값처럼 작성했다.

분명 콘솔을 찍을때는 값을 value와 review.id 는 잘 가지고 오는데 아무런 값을 가져 오지 않았다.

 

문제는 review.id는 "문자" === value는 "숫자" 로 각각 id값을 받아오기 때문에 값을 가져오지 않았던 것이다.

그래서 review.id를 Number로 감싸 숫자로 읽힐 수 있도록 했다.

 

import updateReviewList from "./statelist.js";

// 기재된 코드...

const showMovieDetails = (movie) => { 
//기재된 코드...
	;
    updateReviewList(movie.id);
};

그리고 sub.js 상단에 import로 statelist.js에 작성된 함수를 불러왔다.

 

** { } 중괄호를 삭제한 이유!

import { updateReviewList } from "./statelist.js";

export를 할때 default를 사용할 경우 { } 중괄호를 생략해야 한다.

 

 

addEventListener로 자동실행 되지 않기 때문에 updateReviwList(movie.id); 로 함수를 호출해서

urlParams로 받아온 id를 인자로 전달할 수 있고

urlParams로 받아온 id를 받아 === review.id 와 비교해 맞는 일치하는 리뷰만 꺼낼 수 있다.

 

<script type="module" defer src="../src/sub.js"></script>

그럼 HTML에서 type="module"를 지정해 주고 안전한 장치역할을 해주는 defer를 함께 붙여준다.

 

** type="module" 와 defer를 작성한 이유

type="module" 은 package.json이 있는 경우 package.json에 type="module" 작성하면 전역에 적용되지만

현재는 없음으로 해당 페이지의 모듈을 직접 설정해 주기 위해 작성.

defer은 작성하지 않아도 되지만 안전장치로 작성해 주었다! (나중에 공부해 보기로.)