🔍 Movie-app
🔧 기술 스택
📒 프로젝트 개요
TMDB에서 제공하는 API를 통해 영화에 관련된 정보를 얻을 수 있는 웹 사이트 입니다.
TMDB 사이트
TMDB API 문서 사이트
-
영화의 포스터를 누르면 해당 영화의 상세 정보를 볼 수 있는 페이지로 넘어가게 됩니다.
영화 상세 정보 페이지에서는 영화의 개요와 시청 연령 등급와 이미 개봉한 영화라면 시청자들의 선호도 점수를 볼 수 있습니다. -
영화 상세 정보 하단 부분에는 주요 출연진과 제작진의 프로필 사진 목록이 존재하며, 해당 인물의 상세 정보 페이지도 제작하였습니다.
-
영화 검색 기능을 구현하여 사용자가 원하는 영화의 정보도 찾을 수 있게 하였습니다.
🗺️ 프로젝트 목적
이번 프로젝트는 실질적인 개발 역량을 늘리기 위해 이때까지 배웠던 지식을 활용했습니다. 또한 글을 작성하는 시점에서 새로 배운 상태 관리 라이브러리인 Zustand를 사용했습니다. 배포까지가 1차적인 목표이고, 이후 직접 사용하면서 사용자 입장에서 어떤 점이 불편한 점을 찾아 수정하고 오류가 없는지 체크하며 다음 단계로 진행할 것입니다.
🖥️ 구현 화면
홈페이지
영화 상세 페이지
출연진 및 제작진 상세 페이지
검색 후 페이지
✏️ 마무리
❓ 정적 배포를 하게된 이유
본래 계획에 있던 로그인 기능 정도 구현한 다음 배포하려고 했었지만 '어떠한 프로젝트든 배포를 해보는 것은 매번 좋은 경험이다.'이라는 말을 들어 이렇게 배포하게 되었습니다. 신기하게도 배포를 하자마자 여러가지 수정해야 할 부분이 보였습니다. 분명 로컬 환경에서 보이는 것은 같은데 전체적인 느낌이 달라 신선하고 고칠 부분이 눈에 보이니 앞으로 프로젝트를 진행하는데 있어서 방향성에 도움이 되었습니다.
📑 앞으로의 계획
-
불완전한 반응형 웹 수정
특정 페이지에서 문제가 보여 수정이 필요 -
이미지 슬라이드의 불완전성
브라우저 창의 너비를 가져오고 이미지의 크기와 이미지 사이의 크기를 확인한 뒤 알맞게 화면에 표출되도록 하는 것을 목표로 하고 기능 구현했는데 너무 미흡하여 다시 리팩토링 예정 -
이미지 불러오기 최적화
프로젝트 특성상 이미지가 많기 때문에 이미지를 로딩하는 부분에 있어서 최적화 작업을 통해 사용자 경험을 좋은 방향으로 성장
