${movie.original_title}

${movie.overview}

function renderMovies(movies) {
    const container = document.getElementById("movie-container");

    movies.forEach(movie => {
        const col = document.createElement("<div>");
        col.className = 'col';

        col.innerHTML = `
            <div class="card h-100">
                <img src="${movie.poster_path}" class="card-img-top" alt="${movie.original_title}">
                <div class="card-body">
                    <h5 class="card-title">${movie.original_title}</h5>
                    <p class="card-text">${movie.overview}</p>
                </div>
            </div>
        `
    })
}

fetch를 통해 받아온 데이터를 card 형식으로 화면에 적용하려고 한다. 그런데 에러가 발생했다.

첫 번째 오류는 404 에러로 경로를 찾을 수 없다는 에러.

두 번째 오류는 createElement 에서 <div>를 찾을 수 없다는 에러.

첫 번째 에러는 html 파일에서 발견했다. bootstrap에서 카드 형식을 가져오는데 <img>의 src를 가져오지 않은 것. 경로를 적절히 처리하니 오류가 사라졌다.

두 번째 에러는 createElement()의 사용법을 실수 했다.

const col = document.createElement('div');

이렇게 사용을 해야 한다. 태그라고 생각하고 “<div>”라고 했는데 잘못 알고 있었다.

이것을 다하고 나니 다른 오류가 발생했다.

오류가 갑자기 많이 생겼다.

function renderMovies(movies) {
    const container = document.getElementById("movie-container");

    movies.forEach(movie => {
        const row = document.createElement("div");
        row.className = 'row row-cols-1 row-cols-md-3 g-4';

        row.innerHTML = `
            <div class="col">
                <div class="card h-100">
                    <img src="${movie.poster_path}" class="card-img-top" alt="${movie.original_title}">
                    <div class="card-body">
                        <h5 class="card-title">${movie.original_title}</h5>
                        <p class="card-text">${movie.overview}</p>
                    </div>
                </div>
            </div>
        `
    })
}

오류가 발생한 코드이다.

 <http://localhost:63342/t6HJH3gXtUqVinyFKWi7Bjh73TM.jpg> 404 (Not Found)

jpg 파일에서 404 Not Found 에러가 발생한 것을 보니 이미지 경로를 찾지 못해서 발생한 오류로 보인다.

 "poster_path": "/xUkUZ8eOnrOnnJAfusZUqKYZiDu.jpg",

데이터에서 받아온 포스터 경로이다. 아마 해당 url 앞에 추가적인 url이 필요한 듯 싶다. 이미지 url에 대해 검색해보니 다음과 같은 api 정보를 얻을 수 있었다.

• 이미지 API