7일차, 개인 과제 시작

1. 요구사항 수집

필수 요구사항

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

[2] 영화정보 카드 리스트 UI 구현

• TMDB에서 받아온 데이터를 브라우저 화면에 카드 형태의 데이터로 보여줍니다.
• 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수로 들어갑니다.

[3] 영화 검색 UI 구현

• API로 받아온 전체 영화들 중 영화 제목에 input 창에 입력한 문자값이 포함되는 영화들만 화면에 보이도록 합니다.
• 입력 후 검색버튼 클릭 시 실행되도록 합니다.

선택 요구사항

• 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 커서 자동 위치시키기
• 대소문자 관계없이 검색 가능하게 하기
• 키보드 enter키를 입력해도 검색버튼 클릭한 것과 동일하게 검색 실행시키기

 

2. 기한 : ~ 2024.04.24

- 필수 요구사항은 오늘 구현하고

- 선택 요구사항 + 추가로 하고 싶은 것들 내일 저녁 전까지 추가할 것

ex. 스크롤 로딩,

페이지 언어 선택을 통해 영어로 된 영화 목록/검색, 한글로된 영화 목록/검색 토글,

스크롤 시 검색창이 상단 메뉴처럼 부드럽게 움직일 수 있도록

영화 설명 접었다 폈다해서 모습 보여주기

 

 

 

3. 화면 구성 

-> 와이어프레임 짜기

 

 

 

4. 개발 시작

4-1. git 셋팅

4-2. scss, js 로 짠다

4-3. 외부 API 셋팅 : https://www.themoviedb.org/?language=ko

The Movie Database (TMDB)

4-4. 필요 기능 머리 속에서 재정리

ㄴ 페이지 최초 로딩할 때, 인기순으로 영화 목록 보여주기

ㄴ 이름 기준으로 검색 (페이지 이동 없을 것)