[2024.04.29] TIL 11일차

[ 본캠프 11일차 기록 ]

🖥️ 오늘 공부한 내용 🖥️

2주차 개인과제 4

1. 구조 변경 성공!

  function createCard(movie) {
    const movieImage = movie.poster_path;
    const movieTitle = movie.title;
    const overview = movie.overview;
    const vote_average = movie.vote_average.toFixed(2);
  
    const movieCard = document.createElement('div');
    movieCard.classList.add('card');
    movieCard.classList.add('movieCard');
  
    movieCard.innerHTML = 
      `
        <div class="cardFrame>
          <div class="cardHeader">
            <img src="https://image.tmdb.org/t/p/w300${movieImage}" class="posterImg" alt="poster"/>
          </div>

          <div class="card-body">
            <h5 class="movieTitle">${movieTitle}</h5>
            <div class="textFrame">
              <p class="movieOverview">줄거리 요약<br>${overview}</p>
              <p class="movieVote">평점<br>${vote_average} 점</p>
            </div>
          </div>
        <div>

      `;
    return movieCard;
  }

• 위 코드처럼 innerHTML로 js에서 html 구조 변경도 자유롭고 영화 api 데이터들도 자유롭게 넣을 수 있게 구조를 변경했다
• 확실히 이 방식이 전에 방식보다 유지보수면에서 너무 좋은 것 같다

2. 영화 카드 아이디 알려주는 알리창

      movieCard.addEventListener('click', () => {
        movieId(movies.id);
      })
      
     function movieId(id) {
      alert(`해당 영화의 아이디 값은 : ${id}번 입니다`);
    }  

• movieData 함수 부분에 첫번째 코드를 넣어 각 영화 데이터가 담긴 카드를 클릭했을때 해당 이벤트를 감지하고 id 값을 alert창에 띄워주는 코드를 작성했다