TMDB 오픈 API를 이용하여 인기 영화 데이터 가져오기!
(1) API키 발급
- TMDB회원가입 및 이메일 인증
- 프로필 설정에서 API키 요청
- Developer로 등록 후 API키 발급
(2) Fetch로 API데이터 가져오기
// 본인의 API 키
const API_KEY = 'YOUR_API_KEY';
const URL =https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=1;
fetch(URL)
.then(response => response.json())
.then(data => {
console.log(data);
// 이후 데이터 처리
})
.catch(error => console.error('Error:', error));
(3) 영화 정보 카드 리스트 Ui구현
자바스크립트로 카드를 생성하여 받아온 데이터로 카드 생성 및 DOM에 추가하였다.(4) 검색 UI구현
영화 정보 카드 리스트는 구현하였지만 검색 UI 구현에는 어려움이 있어서
몇일을 고민을 하다 튜터님의 도움을 받아
구현을 하였다 하지만 기존 코드를 거의 다 엎어야 했기 때문에
생각보다 오래 걸렸다.
코드가 길어서 간단히 설명을 해보자면
검색어가 있을 경우에는 검색 관련 url을 붙여주는 방식을 사용하였다.
만약 searchText가 있다면
원래 그려져 있던 부모 컨테이너를 한 번 지워준다.
fetch를 이용해 데이터를 가져오고 + 카드를 그려준다.
기본적으로 getMovieData를 호출하여 기본 디폴트 화면을 표시해준다.
검색 함수, 버튼 클릭 이벤트 쪽에서 onClick 시 실행되도록 처리해준다.
이렇게 구현해 보았다.
하면서 어려웠던 점은 fetch사용이 익숙치 않아 사용법 부분에서
막히고, 구글링 하여 응용이 어려웠던 점이 있었다.
각 사람마다 코드 스타일과 상황이 다르기때문에
내 코드에 맞춰 활용을 해야하는데
아직 익숙하지 않아 많이 버벅였다.
복습과 강의를 통하여 익숙해져야 겠다.
