TMDB에서 영화리스트 가져오기

 TMDB사이트에 가입해서 TOP20개의 영화 리스트를 가져왔다.

const options = {
    method: 'GET',
    headers: {
        accept: 'application/json',
        Authorization: 'Bearer MYCODE'
    }
};
const url = 'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1';
let movies; //fetch로 가져온 영화리스트를 담을 전역변수

document.addEventListener('DOMContentLoaded', function () { //DOM이 로드되고 나서 실행됨
    document.getElementById('search-input').focus(); //커서 위치하기

    fetch(url, options)
        .then(response => response.json())
        .then(data => { //영화리스트 받아오기
            movies = data.results;
            movies.forEach((movieInfo) => {
                createCard(movieInfo); //페이지를 로드하면서 카드를 생성
            });
        })
        .catch(err => console.error(err));

    const searchButton = document.getElementById('search-btn'); //검색버튼 할당 *DOM이 로드되기 전에 실행시 addEventListner를 읽을 수 없음
    searchButton.addEventListener('click', function (event) {
        // 기본 동작 방지
        event.preventDefault();

        // 검색 함수 호출
        search();
    });
});

 

fetch를 사용하여 영화 리스트를 받아온 뒤, 페이지를 로드하면서 카드를 생성했다. 이 때 검색버튼이 DOM이 로드되고 나서 실행되어야 하기 때문에

document.addEventListener('DOMContentLoaded', function () {}

 

위의 함수를 사용해서 DOM이 로드된 후 검색버튼을 할당했다.

 

search버튼의 경우 form에 있는 기본동작으로 인해, 화면이 새로고침되면 search()를 할 수 없기 때문에 아래의 함수를 사용해서 기본 동작을 방지하였다.

// 기본 동작 방지
event.preventDefault();