TIL 9일차 (개인프로젝트 OpenAPI이용해서 영화 검색사이트제작)

오늘은 개인프로젝트 제작을 하였다.

혼자 작업을 하는거라 확실히 팀으로 작업하는거랑 조금 다른 느낌이 있었다.

우선 개인프로젝트로 TMDB의 영화 데이터를 가지고와 영화 검색사이트를 제작하는 것을 목표로 프로젝트를 진행하였다.

우선 TMDB에서 제공하는 OpenAPI를 가지고와야하는데

다음과 같이 우측 상단의 Language를 우리가 쓸 언어인 Javascript로 바꾸어 주고 Fetch Request부분의 문구를 가지고와 Fetch해주면 데이터를 가지고 올 수 있다.

다음과 같이 데이터를 가져오는 모습을 실행했을 경우 확인할 수 있다.

해당 정보는 

fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)

  .then(response => response.json())

  .then(data => {

    console.log(data);

  })

  .catch(err => console.error(err));

TMDB에서 다운 받은 API에 Fetch를 그대로 가져왔을때 다음과 같은 코드를 가져올 수 있는데

.fetch( ~~~~ .then(data => { console.log(data);}) 이부분에서 데이터를 가져오는 것을 볼 수 있다.

이정보를 가지고오면 해당 정보를 토대로 카드를 제작할 수 있기 때문에 저부분을 가지고와야한다.

data는 현재 Fetch안에서만 사용할 수 있기 때문에

전역변수 let obj를 만들어 해당 data를 obj에 넣어서 obj를 다른 함수에도 사용할 수 있도록 이용했다.

function makeCard() {

  obj.forEach(element => {

    document.querySelector('.row').innerHTML += `

                        <div class="movie-card" id="${element.id}" onclick="alert('영화 ID: ${element.id}')"">

                <div class="card">

                    <img src=${`https://image.tmdb.org/t/p/w400` + element.backdrop_path} class="card-img-top" art="...">

                    <div class="card-body">

                        <h4 class="card-title" id="card-title">${element.title}</h4>

                        <p class="card-text">${element.overview}</p>

                        <p class="card-text"><small class="text-body-secondary">${`Rating : ` + element.vote_average}</small></p>

                    </div>

                </div>

            </div>

  `

  })

  console.log(obj);

}

makecard 부분이다. 

패치부분에서 받은 obj데이터를 이용해서 forEach 문으로 obj 데이터를 하나하나 element요소에 넣고 해당 정보를 html 의 document에 클래스 row인 곳을 찾아 html 파일을 넣겠다는 뜻이고, 밑에는 해당하는 element의 id, , 이미지, 타이틀, 설명등을 넣었다. 이미지 파일은, 따로 jpg파일을 넣어야해서 방법을 검색해 해당 링크 + 주소.jpg 파일로 이미지 파일이 나오게 하였다. 그리고 makeCard함수를 실행하면

다음과 같이 이미지와 정보가 카드로 정리되는 파일을 만들 수 있다.

오늘은 카드를 만들었고, 내일은 검색시스템과 클릭시 해당 ID가 나오게하는 시스템을 개발해야겠다!

오늘은 그래도 코드가 잘짜여져서 기분이 좋은 하루였다.