🎬 영화 검색 사이트

완성 사이트 : Movies-Info

📆 프로젝트 기간

✔️Develop Period : 2023년 01월 09일 ~ 2023년 01월 13일

✔️Developer : whansoo

✔️기술스택 : Javascript, HTML, CSS

✔️기능 구현: 제목 검색, 연도별 검색, 영화목록 리스트, 상세페이지, 영화 목록 더보기, 최상단 바로가기 버튼, 로딩 애니메이션, 이미지 없을시 대체 이미지 출력

📌페이지 소개

1.메인 화면 입니다.

2.연도별로 검색한 모습 입니다.

3.More 버튼 클릭 후 리스트가 추가된 모습 입니다

4.상세페이지 모습입니다.

그 밖의 기능들은 직접 확인해 주세요

회고록

• omdb api를 사용하여 서버의 응답 데이터 들을 가져오고 그것을 다시 화면에 이쁘게 보여 줄 수 있도록 고민 하고 공부를 하였습니다.
• 상세페이지를 구현 했을 때 또 다른 api를 사용 했어야 했는데 기존 영화목록 리스트를 클릭 했을 때와 상세페이지 api가 달라 어떻게 하면 내가 클릭 한 영화가 상세페이지 api로 넘어가 불러올수 있을지 고민을 하였습니다. 그래서 생각한 것이 omdbId가 공통적으로 같아서 내가 그 이미지를 클릭했을 때 id를 가져와 상세페이지api로 넘겨줘서 상세페이지가 보여줄수 있도록 하였습니다
• 검색창에 제목을 입력하고 검색을 하는 것과 더보기 버튼을 눌렀을 때 page가 같이 넘어갔었습니다. 예를 들어 처음 검색을 하고 다른 제목으로 검색을 했을 때 1page가 아닌 2page에서의 해당 영화 목록이 나오는 것이였습니다. 저는 더보기 버튼을 클릭 했을 때만 page가 넘어가길 원했고 검색창에 입력 한 것은 1page만 나오길 원했습니다. 그래서 생각 한 것이 검색 버튼을 눌렀을 때는 page가 1만 나오게 하였고 더보기 버튼을 눌렀을 때는 page++로 코드를 작성하여 이 문제를 해결 하였습니다.
• 연도별로 선택 했을 시 어떻게 하면 api에 year를 넘겨 줄 수 있는지 생각을 해보았는데요 생각보다 간단하였습니다. select에서 options을 하나 설정해주고 for문으로 현재년도-50으로 하였고 그만큼 태그를 생성하라고 명령 하였습니다.그리고 onchange로 선택 할 수 있게 하였고 그것을api의 years 부분에 넘겨 주었습니다.