[TIL] 2주차 금요일. 과제 - 영화 검색 사이트. TMDB open API 사용

과제 개요

1) Top 20 영화 정보를 TMDB의 오픈 API를 통해 불러와서 카드 형식으로 배치

• 들어가야 하는 내용: 제목, 소개, 평점, 포스터 이미지

2) 제목 검색창 구현
3) 카드 클릭 시 영화의 id 값이 alert 창으로 뜨도록 구현

0. TMDB 오픈 API 사용법

• https://www.themoviedb.org
  1. 회원가입 (이메일로 활성화 후 로그인)
  2. "프로필과 설정" 버튼 클릭 후 "설정" 클릭
  3. 좌측 사이드 메뉴에서 API 메뉴 클릭 후 API 키 요청 섹션의 "click here" 클릭
  4. “What type of API key do you wish to register?”라는 질문에 Developer 클릭 후 동의
  5. API 신청 양식은 대충 채우면 됨 (어플리케이션 URL은 없으니 "under construction"이라고 쓰면 되는 것 같다. 가이드 예시에 그렇게 써주심)
  6. API 문서로 이동, Our primary documentation is located at ... <- URL 클릭
  7. 좌측 메뉴에서 원하는 항목 선택 (이번 과제를 위해선 "TOP Rated") -> API Reference -> Language에서 !자바스크립트! 선택
  8. 코드 복사해서 적용

1. 오픈 API fetch 통해 필요한 정보 추출

• document.querySelector로 html의 특정 부분 선택.
• cardList.insertAdjacentHTML("beforend", cardHTML);
  얘안에.insertAdjacentHTML("가장끝에삽입", 얘를);

2. 제목 검색창 구현

• keyup : 키를 놓을 때 이벤트 발생
• .toLowerCase() : 처음부터 대소문자 구분 없이 검색되도록 코드 짜는 게 좋음
• if (titleText.includes(filterValue)) {}

3. alert 알림창

• data-id : html 태그의 데이터셋에 접근하는 방법 중 하나.
• Element.closest() 메서드 : 해당 요소와 그 조상 요소들 중에서 주어진 CSS 선택자에 일치하는 가장 가까운 상위 요소를 찾는다