[인기 영화 검색 사이트] 제작 프로젝트 #1 - 프로젝트 개요 및 요구사항

프로젝트 개요

TMDB(The Movie DB) API를 활용한 영화 검색 사이트 제작

필수 요구사항

1. 순수 Vanilla JavaScript 사용 (jQuery 라이브러리 사용 x)

2. TMDB API의 "인기 영화" 데이터 사용

3. 영화 정보 리스트 UI 구현

• TMDB에서 받아온 데이터를 카드 형태로 브라우저의 화면에 출력
• 카드의 필수 데이터 : 제목, 내용 요약, 포스터 이미지 경로, 평점
• 카드 클릭 시, 클릭한 영화의 id를 alert 창으로 출력

4. 영화 검색 UI 구현

• input 창에 입력한 문자값이 포함된 영화만 화면에 출력하도록 기능 구현
• 기능은 입력 후 [검색] 버튼 클릭 시 실행되도록 함

5. 필수로 사용해야 하는 문법 요소

• 변수는 const, let 만을 사용할 것
• 화살표 함수
• callback 함수를 사용하는 배열 메서드 (forEach, map, filter, reduce, find, ...)
• DOM 제어 메서드 (document, element, window, ...)

선택 요구사항

1. CSS

• flex 사용
• grid 사용

2. 웹 사이트 로드 완료 or 새로고침 후 검색 입력란에 커서 자동 focus
3. 대/소문자 관계 없이 검색이 가능하도록 기능 구현
4. Enter 입력으로 [검색]버튼 대체