1. 개인과제 (TMDB 영화 검색 사이트를 제작)

 

1. 순수 바닐라 자바스크립트만으로 영회리스트 조회 및 검색 UI 구현
2. 학습해온 자바스크립트 문법을 최대한 활용
3. 스타일링 작업하며 css 와 친해지기

TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기.

 

TMDB Top rated 자바스크립트 Fetch문.

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhZDFkOGRjMDdmYTNkZjZhYmNkZTYzNGZhYTVlYTg2NyIsInN1YiI6IjY0NzA5NGM4MTNhMzIwMDBiZjUyMDVkYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.A4JyVxsc1cjWYkhJGZmhI-mJsL2NsmcIxnsObZbQT9w'
  }
};

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

VSCode상에서는 기본적으로 src안에 css / js (index.js = 기본화면 / search.js = 입력했을 시 화면)/ html 로 나눈다.

 

의사전달 코드

 

1. TMDB에서 FETCH 복사 -> js파일 각각 넣기

2. src [ js (index.js / search.js) /  css (index.css) ]  /  index.html

3. 와이어프레임 작성

4. FETCH 코드에서 에러문 지우고, 마지막 results 문을 forEach문으로 만듦. (스파르타피디아 참조)

 

 

영화순서를 배열형식으로, Index 0 부터 19까지 총 20개. 위와같이 나열.

 

1. TMDB에서 받아온 데이터를 브라우저 화면에 카드 형태의 데이터로 보여주기.

2. 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 4가지정보 필수.