Project)영화검색페이지 Find Movie🎬

seunghye jo·2022년 12월 31일

JavaScript MegabyteSchool project 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

project

목록 보기

2/8

영화 검색사이트 만들기🎬

데모사이트 : DEMO
작업기간 : 22.12.30 (총 1일)
(이후 꾸준히 버그와 디테일의 수정을 거쳤습니다)
사용언어 : html, SCSS, javascript
목표 : 주어진 API를 활용해 영화검색페이지를 구현한다.

🧡목표

✅ 영화 제목으로 검색 가능하고 검색된 결과의 영화 목록이 출력된다
✅ jQuery, React, Vue 등 JS 라이브러리와 프레임워크를 사용하지 않는다
✅ 스타일(CSS) 라이브러리나 프레임워크 사용은 자유
✅ 한 번의 검색으로 영화 목록이 20개 이상 검색되도록 만들어보자
✅ 영화 개봉연도로 검색할 수 있도록 만들어보세요.
✅ 영화 목록을 검색하는 동안 로딩 애니메이션이 보이도록 만들어보세요.
✅ 무한 스크롤 기능을 추가해서 추가 영화 목록을 볼 수 있도록 만들어보세요.
✅ 영화 포스터가 없을 경우 대체 이미지를 출력하도록 만들어보세요.
✅ 단일 영화의 상세정보(제목, 개봉연도, 평점, 장르, 감독, 배우, 줄거리, 포스터 등)를 볼 수 있도록 만들어보세요.
✅ 영화 상세정보가 출력되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
✅ 차별화가 가능하도록 프로젝트를 최대한 예쁘게 만들어보세요.

🧡페이지 소개

⭐메인페이지

main

사이트에 접속하면 가장 먼저 만나는 메인 페이지입니다.
검은 배경에 빨간 포인트색만으로 페이지를 디자인하여 심플하게 제작했으며,
Find Movie 의 첫 알파벳을 딴 로고를 만들어 적용해보았습니다❗

⭐영화 검색

영화를 검색하면 메인 페이지 아래로 영화 리스트가 나타납니다.
검색된 영화의 수도 함께 표시됩니다.

⭐무한 스크롤

infinite

검색 직후엔 10개의 영화만 보여지며,
스크롤이 페이지 최하단에 닿으면 새로운 영화를 불러옵니다
더 이상 불러올 영화가 없으면 페이지 최상단으로 이동 할 수 있는 버튼이 나타납니다.

⭐상세페이지

detail

검색 된 영화를 클릭하면 상세정보를 나타내는 창이 나타납니다.
정보를 받아오는 동안 로딩아이콘이 나타나며 정보가 로드되면 사라집니다.

상세정보창 바깥 영역을 클릭하면 창이 사라집니다.

⭐대체이미지 출력

no images

불러 온 영화의 포스터정보가 없는 영화의 경우 대체 이미지가 출력됩니다

마치며🙌

순수 자바스크립트로 API를 다뤄본 것이 처음이고, 페이지의 디자인부터 기능까지 창작으로 진행해야했던 프로그램이라서 기간이 조금 걸리게 될 줄 알았는데, 리액트로 넷플릭스 클론을 해 본 경험과 구글선생님의 도움으로 차근차근 풀어나가다보니 하루만에(!!) 페이지를 완성했다.

기간은 역대 만든 페이지중 가장 짧게 걸렸지만.. 역대로 머리가 뽑힐것같던 프로젝트기도 하다...
처음으로 JS로 다뤄본 API에 처음으로 무한 스크롤을 구현하고... 구성과 디자인까지...🤯

그래도 여태까지 async await fetch 삼총사를 다루거나 배우면서 이게 왜 필요한지 어떻게 동작하는지 이해가 잘 되지 않거나, 이해가 되도 익숙해지는 느낌이 아니였는데 스스로의 힘으로 풀어내다보니 드디어 조금 이해하고 다룰 줄 알게 된 것 같다 !!

어느것 하나 쉬운게 없었지만 그래도 배움과 깨닳음이 있었기에 후횐 없어...📑