---

🎥 영화 검색 사이트 Movie Night

---

🗓️ 프로젝트 소개

사이트 바로가기 : Movie Night
Github 주소 : github주소

제작 기간 : 2024.04.23~2024.04.29 (6일간)

개발 언어 : HTML, JavaScript, CSS

개발 인원 : 나

소개 : 영화 API를 이용하여 영화를 검색할 수 있는 사이트

---

❗ 요구 사항

1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기
2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기
3. 영화정보 카드 리스트 UI 구현
4. 영화 검색 UI 구현
5. 아래 기재된 Javascript 문법 요소를 이용하여 구현
1. const와 let만을 이용한 변수 선언 필수
2. 화살표 함수 : 아래 예시 중 1개 이상 사용
3. 배열 메소드 : 하기 예시 중 2개 이상 사용
4. DOM 제어하기 : 아래 api 목록 중 2개 이상 사용하기

---

🌱 화면 소개

✅ [랜딩 화면]

[ mouse hover ]

▶️ 클릭 이벤트가 들어가는 요소들에 hover를 넣어줬다.

[ 연관 검색어 기능 ]

▶️ input 창에 3글자 이상 작성하면 작성한 단어가 들어가 있는 영화 제목을 최대 5개 보여준다.

---

✅ [검색 화면]

▶️ 전체 보기 버튼이나 엔터, 서치 버튼 이벤트 시 영화 카드가 들어있는 화면을 보여준다.
이때, 화면을 넘기는 거 보다 그냥 헤더랑 인풋창을 위로 올리는 식으로 구현했다.

[ 이동 화면 ]

▶️ see all을 클릭할 시, api에서 받아온 영화 카드가 보이게 된다.

[ 정렬 기능 ]

▶️평점순과 이름순을 클릭하면 분류대로 검색한카드가 정렬되어 나오고 호버 기능을 넣었다.

[ 검색한 카드결과 화면 ]

▶️ 검색 화면에서 검색 후 엔터나 서치 버튼을 누르면 입력한 문자가 들어간 영화 카드를 보여준다.(메인 화면에서도 동일하다) 또 gif엔 안보이지만 그 상태에서도 이름순, 별점순으로 나열이 된다.

[ 영화 카드 클릭 시 ]

▶️ 필수 구현 기능에 들어가있어서 만든 카드 클릭 시 id를 alert 창에 뜨게 하는 기능이다.

---

💭 회고

바닐라 자바스크립트만으로 api까지 사용하여 제대로 된 프로젝트를 만든건 이번이 처음이다. 프로젝트만 한게 아니라 js 강의도 듣고 알고리즘도 풀고 할 일이 많아서 좀 오래 진행했지만, 원하던 기능을 거의 다 넣어서 만족스럽다. 하지만 아직 코드 가독성이나 최적화가 부족한 것을 느꼈다. (혼자 하는 것이다 보니 프로젝트 기획을 제대로 짚고 넘어가지 않아서 그런 것 같다..) 그래도 저번 팀 프로젝트의 경험을 바탕으로 사용자 편의와 경험을 더 좋게 하기위해 이벤트가 있는 버튼에 호버를 달아서 좀 더 예쁘게 꾸미기도 노력했고 연관검색 기능같은 부가적인 기능도 욕심내서 넣길 잘한 것 같다.