[본 캠프 10일차] 개인과제 1일차

 

const options = {
    method: 'GET',
    headers: {
        accept: 'application/json',
        Authorization: 'Bearer ...'
    }
};

fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
    .then(response => response.json())
    .then(response => {
        // fetch를 통해 받아온 영화 데이터를 response 객체의 results 속성에서 추출하여 변수에 저장하는 코드 
        const dataMovies = response.results // api 통해서 가져온 데이터 datamovies에 할당했다.
        const moviecardContainer = document.querySelector('.moviecard-container')
           // 5. 아래 내용을 부모 moviecardContainer 는 알고 있어야 한다. 
           // moviecardContainer(부모) = querySelector 로 moviecard-container 클래스 명을 가진 tag를 선택
        dataMovies.forEach((movie, i) => {   // for문과 같은 역할을 하고, movie를 i번 순회를 한다는 뜻
            const movieElements = document.createElement('div') // 2. 자식에 옷 'div' 생성
            movieElements.classList.add('moviecard') // 3. 옷의 종류을 add 추가 그 종류가 moviecard
            movieElements.innerHTML = `  // 4. 그 옷의 종류의 스타일을 빽틱 내 그린다? 스케치를 한다? 
            ${movie.poster_path}">
            <h3 class="movie-title">${movie.title}</h3>
            <p>${movie.overview}</p>
            <p>Rating: ${movie.vote_average}</p>`

            movieElements.onclick = function () { alert(`영화 id=${movie.id}`); };

            moviecardContainer.appendChild(movieElements)
           // 1. appendchild로 자식생성. movieElements 의 부모는 moviecardContainer
        });       
        console.log(dataMovies);
    })
    .catch(err => console.error(err));

 

api : 서버가 클라이언트 원하는 정보를 가지고 있는 곳?

fetch : 그 정보(api)를 가져오는 것 

then. : fetch 를 통해서 가져온 것(api)을 json 형태로 변경

 

 

일단 오늘은 여기까지 만들었고, 내일 주말이지만 좀 더 해서 검색기능을 추가하고 css를 만지면 될 것 같다.

 

for문, if문을 배우고 있는 와중에 과제를 하려니까 진짜 머릿속이 새하얘졌는데, 같은 조였던 영진님께 도움을 약간 받아서 쓰는법을 배우고, 아무것도 모르고 쓰기만 했던걸 튜터님께 질문해서 한줄 한줄 뜯어서 이해하다보니 정말 조금이지만 성장한 것 같다. 내일도 잊어버리지말고 코드 한줄한줄 이해해서 적용해봐야겠다.