[Mission004] Movie List 사이트 만들기

[ganeodolu]

미션4

#9

요구사항

1. 메인 화면을 구현한다.

• 메인 화면에는 Movie List 데이터가 보여진다.
• 영화의 제목, 영화 개봉 연도, 포스터 이미지 데이터를 보여줘야 한다.
• 메인 화면에서, 스크롤이 화면의 바닥에 닿을 경우 infinity scroll로 데이터를 불러온다.
• 좌측 상단의 로고를 누르면 다시 메인 화면으로 돌아온다.

2. 영화 검색 기능을 구현한다.

• 화면 우측 상단의 input에서 영화를 검색할 수 있다.
• 검색어 입력 후, enter 키를 누르거나 옆의 돋보기 아이콘을 클릭 시 검색된다.
• 검색 결과가 존재하지 않을 경우, <검색 결과가 존재하지 않습니다> 라는 텍스트를 뿌려준다.

3. 영화 상세 페이지를 구현한다.

• 상세 페이지에서는 해당 영화의 backdrop 이미지, poster, 영화 제목, 개봉 날짜, 영화 시간, 장르, overview 텍스트 데이터를 보여준다.

4. 추가 요구사항

• 메인 화면 스크롤 후, 상세페이지를 다녀왔을 때, 메인 화면에서의 스크롤 위치 기억하기

미션방식

index.html - (app.js)
GetMovieList : 상영중인 영화정보를 가져오기
ShowMovieList : 보여주기
SearchMovie : 검색된 영화정보 가져오기
상영중인 영화정보와 검색된 영화정보가 모두 있으면 검색된 영화정보 보여주기

detail.html - (app_detail.js)
GetMovieDetail : 선택된 영화 세부정보 가져오기
ShowMovieDetail : 보여주기
detail페이지에서 검색시 index.html로 이동 후 검색된 영화정보 보여주기

페이지 전환시 변수값(MovieId, Keyword) 저장을 위하여 SessionStorage를 사용하였습니다.
fetch 사용되는 부분이 이벤트리스너 안에 들어가도록 하였습니다.(Promise 어려움ㅠㅠ)
인피니티 스크롤시 insertAdjacentHTML를 사용하여 새로 보여지는 부분만 추가되도록 하였습니다.

미션후기

단일페이지 사이트만 해보다가 두페이지를 사용하니 변수전달이 어렵네요.
처음 시도하는 기능(인피니티 스크롤+쓰로틀링, JS에서 CSS 속성변경)이 많아서 헤매기는 했지만, UI가 예뻐서 사이트를 직접 만드는 느낌도 들고 재밌었습니다.
입춘이 내일인데 코로나 바이러스에 미세먼지에 난리네요. 외출시 조심하세요. 😷