Judie Movie : Movie Search Page
다양한 영화를 검색하고, 관심 있는 영화를 북마크에 저장해 확인할 수 있는 사이트입니다.
지금 가장 뜨고 있는 영화들을 실시간으로 확인할 수 있고, 모달을 통해 개봉일자, 내용 및 평점 확인이 가능합니다.
🎙️ Project Introduction
Development Period
2025/01/08 ~ 2025/01/17 (10 days)
Tech Stack
바닐라 JavaScript만 사용하여 만들어진 프로젝트입니다.
HTML5
CSS3
JAVASCRIPT
✨🪄 Project Features
UXUI
사용성을 고려한 사용자 위주의 페이지를 구현하고자 했습니다.
• animation을 활용하여 상단 히로 섹션에 시시각각으로 영화 정보가 변경되도록 해 재미를 더했습니다.
• CSS Grid를 활용하여 반응형 페이지를 구현했습니다.
• 더보기 버튼으로 지금 뜨는 수천개의 영화 데이터를 전부 확인할 수 있습니다.
• 실시간 검색 기능을 통해 더 효율적인 영화 검색이 가능합니다.
• window.scrollTo를 활용해 검색할 때의 사용성을 높였습니다.
• 다양한 transition을 적용하여 재미를 더했습니다.
TMDB API
api를 사용하여 데이터를 불러와 실시간으로 데이터가 업데이트 되도록 했습니다.
Local Storage
Local Storage를 활용한 북마크 기능으로 새로고침 해도 정보가 유지되도록 했습니다.
• 브라우저 종료 후 다시 접속해도 여전히 좋아요 한 영화를 확인할 수 있습니다.
• 북마크 탭으로 넘어가면, 좋아요 한 영화를 확인할 수 있습니다.
• 좋아요를 취소할 수 있습니다.
api부터 fetch, 모듈화.. 하나하나 도전 그 자체인 프로젝트였다.
나름 미대 나왔다고 css도 신경 쓰느라 더 공들이고 오래 걸렸던 내 첫 새끼🥺
2주동안 몇십 몇백번씩 에러가 뜨고 실패하면서도
결국 성공해 내는 순간에 모든 게 보상되는 과정을 몇번 거치고 나니
점점 실패하고 망하는 게 아무렇지 않아진 것 같다.
(사실 원래도 별로 타격이 없는 편)
무언가 창작하는 걸 좋아하고,
문제가 생겼을 때 과할 정도로 집착해서 파고드는 걸 좋아하기 때문에
개발을 배울수록 나랑 잘 맞는 거 같고..
헤매면서 받는 스트레스가 좋고.. 즐겁고.. 그런..
이상한 사람이 되...