[movie PJ_Final] 영화 검색 페이지 만들기

 

 

🎥영화 검색 사이트 만들기

 

ℹ️프로젝트 정보

✔️ 기간 : 2025년 1월 8일 ~ 1월 17일

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

---

목표 및 구현한 기능

✅ TMDB API에서 인기 영화 데이터를 가져오기

✅ TMDB의 API 키를 발급받고, fetch API를 사용하여 데이터를 가져오기

✅ HTML과 CSS를 사용해 영화 카드 UI를 만듭니다. 영화 카드에는 영화의 포스터, 제목, 요약, 평점 정보가 포함

✅ Flexbox 또는 Grid 레이아웃을 사용해 스타일링을 적용하

✅ 검색창을 만들고, 사용자가 입력한 키워드에 맞춰 영화 리스트를 필터링

✅ 검색 버튼을 클릭하거나 Enter 키를 입력하면 해당 키워드를 포함한 영화들만 리스트에 나타내기

✅ 각 영화 카드를 클릭했을 때, 영화의 상세 정보(예: 줄거리, 감독, 개봉일 등)를 API에서 추가로 받아와 화면에 표시

✅ 클릭된 영화의 ID를 활용하여 TMDB API로부터 해당 영화의 상세 정보를 요청

✅ 영화 상세 모달에서 다시 메인 페이지로 돌아가는 "뒤로 가기" 또는 "닫기" 버튼을 구현

✅ 상세 모달에서 메인 페이지로 돌아갈 때, 원래의 영화 리스트 상태를 유지

✅ 상위 요소에만 이벤트 리스너를 붙이고, 클릭된 요소를 event.target으로 판별해 처리

✅ TMDB에서 기본으로 제공하는 Promise chaining 기반의 API 호출 코드를 async/await 문법으로 리팩터링

 

☑️ 대소문자 구분 없이 검색할 수 있게 하세요. 검색창 입력에 따라 실시간으로 영화가 필터링되게 구현

☑️ API 요청과 관련된 코드와 DOM 조작 코드를 별도의 모듈로 분리

---

페이지 소개

🍿메인페이지

 

 

 

🍿영화 검색

 

 

🍿영화 상세 카드(모달창)

 

 

---

마치며

바닐라 자바스크립트로 영화 페이지를 구현하면서 많은 어려움에 부딪혔다.

단순히 문법을 배우는 것과 계산하는 것을 교육에서 배웠지만, 이번 영화 페이지 구현 프로젝트는 그것을 넘어서

원하는 기능을 코딩으로 옮기는 방법을 생각해야 했다.

그 속에서 문법은 단지 그 기능을 구현하는 하나의 수단일 뿐이었다.

따라서 문법 내용을 자주 읽어보고 손에 사용을 익히고 응용할 수 있도록 사고하는 능력을 길러야겠다.

 

뿐만 아니라 외부에서 API를 받아오는 과정, 자바스크립트에서 활용할 수 있도록 가공하는 과정을 통해

데이터의 변환과 그것을 처리하는 다양한 수단을 알 수 있었다. 

 

가장 아쉬운 점은 북마크 기능을 3일 정도 고민하고 시도했으나 제대로 이해와 구현을 못했다는 점이다.

어떤 버튼이 클릭했을 때 일어날 일들, 그 전에 처리해야 하는 일들을 코드로 옮기려고 하니 머리속만 복잡해질 뿐,

정리가 전혀 되지 않은 상태이다. 따라서 이 부분의 구현까지는 다소 시간이 걸릴 듯 하다..

 

프론트엔드 뿐만 아니라 개발을 하기 위해서는 큰 그림을 그려야 한다는 것도 깨달았다.

어느 개발자가 보더라도 이해할 수 있는, 효율적이며 깔끔한 코드를 짜는 것은 생각보다 훨씬 복잡한 것이다.

다음 프로젝트에는 먼저 어떤 기능을 구현할지, 어떤 요소가 필요한 지 먼저 파악한 후 모듈화를 진행해야겠다.

 

오늘 튜터님께서 얘기해주신 것처럼 처음 시작보다 조금이라도 발전한 내 모습을 발견하고

그 변화를 동기로 삼아 더욱 성장하는 내가 되도록 노력해야겠다!