TMDB 이용해서 웹사이트 만들기

안녕하세요! 오늘은 TMDB를 이용하여 웹사이트 만드는 방법에 대해 알아보겠습니다

https://developer.themoviedb.org/docs

위 사이트를 이용해 api를 받아와 웹사이트를 완성 해보도록 하겠습니다

먼저 파일을 html, css, javascript 3가지의 파일을 만들어주시고 설명 시작하겠습니다

본격적인 풀이

회원가입을 통해서 로그인을 먼저 해주시고

위와 같은 페이지에서

languge: ko-KR

해주시고 Try it! 한 다음에 fetch 코드를 복사합니다

(fetch 란? 해당 데이터에 접속해 해당 데이터를 가져오는 함수를 말합니다

출처: 생활코딩

여기서 우리는 fetch('https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1) 처럼 코드를 작성할 것이기 때문에 TMDB의 api 데이터를 가져온다고 생각하시면 됩니다)

---

카드 만들기

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJiMDcyODcyNTEzZDIxZWIwMWQwZjk3MWJlMjc3ZDI0NyIsInN1YiI6IjY1MmYzY2FlMDI0ZWM4MDBhZWNkYzY5NiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.RzzoQMlGgVCHK84-QzWPEQeYDt2kLHmdId_XaTaIbHU'
  }
};

fetch('https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

위 코드를 사이트에서 가져올 수 있었는데요

여기서 우리는 move.id, move.poster_path, movie.title, movie.overview, movie.vote_average 애들만 뽑아 오겠습니다

( + .then 함수는 여러 비동기작업을 연결해줍니다)
( + 비동기: 병렬적으로 일처리를 하며 이는 효율적으로 정보를 가져올 수 있도록 도와줍니다)

뽑은 애들은 바탕으로 html에 연결해보겠습니다

function fetchMovies(keyword = '') {
    fetch(
        "https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1",
        options,
    )
        .then((response) => response.json())
        .then((data) => {
            const movies = data.results;
            console.log(movies);
            const movieContainer = document.getElementById("movie-container");
            movieContainer.innerHTML = '';
            movies
                .filter((value) => value.title.includes(keyword))
                .forEach((movie) => {
                    const movieHtml = `
            <div class='card' onclick='getMovieId(${movie.id})'>
                <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title} Poster">
                <h2>${movie.title}</h2>
                <p class = 'overview'>${movie.overview}</p>
    
                <p class = 'vote'>평균 평점: ${movie.vote_average}</p>
            </div>`;
                    const movieContainer = document.getElementById("movie-container");
                    movieContainer.innerHTML += movieHtml;
                });
        })
        .catch((err) => console.error(err));
}

위와 같은 코드로 천천히 설명해보겠습니다

먼저 해당 코드로 다른 곳에도 쓰여야하기 때문에

function fetchMovied(keyword = '') {}

( + 그냥 함수는 선언만 해주는 것이기 때문에 fetchMovies(); 코드로 꼭 출력을 해주어야합니다)

함수로 한 번 감싸주었습니다

저는 html에 movie-container 를 만들어주었기 때문에

document.getElementById("movie-container");

선언을 해주었습니다

movieContainer.innerHTML = '';

위의 코드는 추후에 검색을 진행했을 때 해당 카드를 제외한 모든 카드들을 비워두기 위한 기능입니다

.filter((value) => value.title.includes(keyword))

위의 코드도 추후에 검색 기능에 관한 코드인데요 검색을 진행했을 때 imcludes를 통해 키워드가 확인 된 애들만 filter 로 걸러서 value를 가져간다고 보시면 됩니다

                .forEach((movie) => {
                    const movieHtml = `
            <div class='card' onclick='getMovieId(${movie.id})'>
                <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title} Poster">
                <h2>${movie.title}</h2>
                <p class = 'overview'>${movie.overview}</p>
    
                <p class = 'vote'>평균 평점: ${movie.vote_average}</p>
            </div>`;
                    const movieContainer = document.getElementById("movie-container");
                    movieContainer.innerHTML += movieHtml;
                });
        })
        .catch((err) => console.error(err));

본격적으로 카드에 관한 코드입니다

우리가 가져올 카드는 총 20개이기 때문에 forEach를 통해서 값을 반복으로 출력해 20개를 출력해봅니다

그 출력한 데이터들을

const movieContainer = document.getElementById("movie-container");
movieContainer.innerHTML += movieHtml;

위와 같은 코드로 20개를 정보를 html에 넘겨주어 20개의 카드를 만듭니다..!

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

위와 같은 코드는 혹시 로딩 과정중에서 오류가 생기는 경우 콘솔창에 오류를 출력해줍니다

(CSS 꾸미기 요소는 설명에 담지 않았습니다)

---

검색창 만들기

위에서는 카드를 만든 것을 해보았습니다

다음은 검색창을 통해 카드들을 검색할 수 있도록 해보겠습니다

저는 일단

<form class="search" id="search_form">

                <input type="text" id="search-input" placeholder="영화 제목을 검색해 보세요">
                <button class="button" onclick="search()">
                    <img src="image/Group 1.png">
                </button>
            </form>

해당 코드를 html에 작성했습니다

다시 JS로 돌아와

const search_form = document.querySelector('#search_form')
search_form.addEventListener('submit', function (event) {
    event.preventDefault()
    fetchMovies(event.target[0].value);
})

상단에 위의 코드를 적어두었습니다

querySelector 를 적어 html에 있는 #search_form 를 불러왔습니다

addEventListener 를 적어두어 특정 이벤트가 발생하도록 설정합니다

search_form.addEventListener('submit', function (event) {
    event.preventDefault()
    fetchMovies(event.target[0].value);
})

위에서는 submit을 통해 function (event)를 서버에 제출한다는 의미를 같고 있습니다

그리고 검색 버튼 클릭시 새로고침 되는 현상을 막기 위해 preventDefault() 를 작성합니다

그 다음 fetchMovies(event.target[0].value); 코드를 통해

target에 0번재인 input을 선택하여 value 값을 fetchMovied() 함수에 넣어준다고 생각하시면 될 것 같습습니다!!

이렇게 마무리하며...

이번과제는 쉬운 듯 하지만 직접 키보드에 손가락을 대는 순간 세상 어려운 과제가 되는 마법을 보았습니다...

바닐라자바스크립트로 완성을 하려고 노력했기 때문에 아마 더 어렵지 않았나 생각합니다

그래도 이번 기회를 통해서 정말 저의 코딩 실력에 심각함을 느꼈고 많이 공부를 해야겠다는 자극을 받기도 했습니다...

저는 주말동안 더 공부를 해서 꾸준히 수정을 해야될 것 같습니다...

이번에도 잠을 반납해야될 것 같습니다.. 여러분들은 꼭 잠 잘 주무시고 운동도 하시고 항상 화이팅입니다...👍🏻

(+더 공부하면서 추가적으로 담을 내용이나 수정해야하는 부분이 있을 경우 돌아와서 추가 및 수정 하도록 하겠습니다...!)