231020 TIL

어제 나를 애먹였던 API 호출하는 방법이다.

드디어 해냈다.

fetch('https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=1', options)
    .then(response => response.json())
    .then(response => {

        const movies = response.results;

        let temp_html = '';


        for (let i = 0; i < movies.length; i++) {
            const movie = movies[i];
            temp_html += `
            <div onclick="test(${movie.id})" class="movie-card" id="${movie.id}"><img class="posterimg" src="https://image.tmdb.org/t/p/w342/${movie.poster_path}" alt="poster">
                <h2 class="movie-title">${movie.title}</h2>
                <p class="overview">
                  ${movie.overview}
                </p>
                <h3>${movie.vote_average}</h3>
                </div>`;
        }


        document.getElementById('movie-list').innerHTML = temp_html;
    

TMDB API를 이용, 평점 높은 영화 리스트를 받아오는데.
웹페이지에 그리게 하는 것은 꼭 필요로 하는 것들만 불러온다.
(과제에 필요한 id, img, title, overview, rating.)

물론, 완전 스스로 해낸 것은 아니다 ㅠ...

한참 강의를 뒤져보기도 하고, 팀원 분의 코드도 보면서 어떤 것을 어떻게 다뤄야할지 고민했다.

하지만 결국 멍해지는 상태에 이르러, 튜터님께 질문을 드렸고 튜터님께서는 방향성을 잡아주셨다.

그런데...일단은 코드 해석을 조금 더 해보고...내일 추가적으로 써야겠다.
내가 충분히 설명이 가능할 정도로 말이다.
3시간 밖에 못 잔 탓인지 영 머리가 굳은 느낌이다.