Movie-App(2)

jb kim·2021년 12월 25일
0

Web Projects

목록 보기
37/50

https://api.themoviedb.org/3/discover/movie?api_key=본인API키값넣기&language=ko&sort_by=popularity.desc&include_adult=false&include_video=false&page=1

  1. 제목 : original_title
  2. 상세 보기 : overview
  3. 포스터 사진 : poster_path

poster_path는 /이렇게 시작 ? (상대경로)

https://developers.themoviedb.org/3/getting-started/images

https://image.tmdb.org/t/p/w500/voddFVdjUoAtfoZZp2RUmuZILDI.jpg
https://image.tmdb.org/t/p/w1280/voddFVdjUoAtfoZZp2RUmuZILDI.jpg

js

const API_URL = 'https://api.themoviedb.org/3/discover/movie?api_key=본인API키값넣기&language=ko&sort_by=popularity.desc&include_adult=false&include_video=false&page=1'
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'

영화 검색 기능

https://developers.themoviedb.org/3/search/search-movies

https://api.themoviedb.org/3/search/movie?api_key=키값&language=ko&query=spider

js

const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=키값&language=ko&query="'

const main = document.getElementById('main')
const form = document.getElementById('form')
const search = document.getElementById('search')

// 기본 화면
getMovies(API_URL)

async function getMovies(url) {
  const res = await fetch(url);
  const data = await res.json();

  console.log(data.results);
}

영화 검색시

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const searchTerm = search.value;

  if (searchTerm && searchTerm !== '') {
    getMovies(SEARCH_API + searchTerm);

    search.value = '';
  } else {
    window.location.reload();
  }
});

참고
https://ko.javascript.info/async-await
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Async_await
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Async_await

profile
픽서

0개의 댓글