0424 TIL (출간하기를 누른 줄 알았는데 임시저장 눌러서 지금 올립니다.. )

Hwi·2024년 4월 26일

TIL

목록 보기

2/96

오늘 하루 시작

오늘도 항상 그래왔듯 엊그제부터 진행하고 있는 개인과제를 풀고 있다!

어제는 api키만 가져오고서, 어떻게 해야할지 도저히 감이 안 잡혔었는데

튜터님들께 모르는 부분에 대해 질문드리고 머리 꽁꽁싸맨 결과..

결국 영화 리스트를 불러오는 걸 성공했다 ㅠㅠ!!

문제 직면

만들기 전엔 진짜 어떻게 카드 리스트를 반복문으로 만들지.. 하고 있었는데 키 포인트는 어제의 배운 점에 있었다.

바로

배열의 특징, 순회를 돌 수 있다

이걸 잘 활용하면 그렇게 막 엄청 어려운 문제는 아니었다.

어제 하던 부분까지 하고 코드를 이어나갔다.

문제 해결 과정!

일단, html에 영화 리스트 카드를 만들어 주기 위한 함수를 작성했다
const movieListBox 라는 함수에 document.querySelector를 이용해 class="movieList"를 콕 찝어주었다.

그리고 movieListBox.innerHTML = "" 는 본격적으로 아래에서 순회하면서 반환하기 전에, 빈 값을 부여해줬다.

function showMovieList (movies) {
const movieListBox = document.querySelector('.movieList');
movieListBox.innerHTML = "";

그리고나선 movies를 forEach() 메서드로 순회하면서
영화정보가 담긴 카드를 만들어 주었다!

일단 movieCard에 div를 만들어 준 뒤, 생성한 div에
div class ="card"를 달아줬다

movies.forEach(movie => {
let movieCard = document.createElement('div');
movieCard.classList.add('card');

그리고 바로 innerHTML을 이용해 movieCard에 영화 정보를 담아낸 카드를 만들어줬다!
영화의 포스터 이미지, id, 제목, 내용, 평점은
위 api에서 따온 response.results의 배열에 위치한 각각의 키들을 가져왔다.
${movie.poster_path};

${movie.id}

${movie.title}

등 results 안에 들어있는 키 - 밸류에서 키만 쏙 뽑아오면 끝!

movieCard.innerHTML = `

                <img 소스="" img id ="">
             <id class = "id>${movie.id}</id>    
                <h4 class="movieTitle">${movie.title}</h4>
                    <p class="overView">영화 줄거리<br><br>${movie.overview}</p>
                    <p class="rating">👍평점:${movie.vote_average}</p>
                </div>
            </div>`;
    movieListBox.appendChild(movieCard);
})