[영화 검색 사이트 프로젝트]회고록

프로젝트 개요🎬

이번 프로젝트는 영화 검색 사이트로, 인기영화, 영화 검색 리스트를 목표로 구현했다.

사용자는 인기 영화, 영화 상세 정보를 얻어갈 수 있다.

기술 스택🧷

• 프론트엔드 : html, css, vanilla.js
• API : TMDB

개발과정🎈

아이디어 구상

• 스파르타 내일 배움 수업을 듣다가 바닐라 자바스크립트 + TMDB API를 사용하여 영화 리스트를 보여주는 사이트를 구상함

디자인

• 여러 영화 리스트 사이트를 벤치마킹하여 피그마에 디자인함
• 마지막 구현하다가 디자인이 단조로워서 폰트랑 팝업 레이아웃를 수정함
• color
  • bg #0d0d0d 검정계열
  • point #f2c94c 노랑 (버튼, 링크, 강조 텍스트에 사용)
  • font #a9a9a9
• font
  • 기본 SpoqaHanSansNeo-Regular
  • 로고 Bad Script
  • 네비바 Just Another Hand

구현

• 반응형 
• 메인 페이지
  • 인기 영화 랜덤으로 노출
  • 영화 클릭시 팝업으로 영화 정보를 보여줌
  • 북마크 가능
  • 검색하면 실시간으로 해당 키워드 영화 노출
• 북마크 페이지
  • 북마크한 페이지들 노출
  • 북마크 삭제하면 실시간으로 반영

테스트 및 배포

• 리팩토링하다가 발견한 에러들 해결
• github에 배포

배운점🤖

• 기술적 성장: 디바운싱으로 최적화, input 실시간 검색 구현, 로컬스토리지 
• 문제 해결: 블로그 프로젝트 일기 참고

후기✏️

전에 리액트로 유튜브api 프로젝트 할때는 나름 유튜브api 설명이 잘되어있는 문서나, 블로그등 자료가 많았지만,

TMDB는... 문서도 사실 친절하지 않고, 자잘한 오류도 있었다

(APIKeyAuth는 안된다던가, 성인영화도 false로 가져와도 그대로 들어있고 영화 포스터 없는 데이터도 많고...)

그리고 최대한 구글링도 안하고 MDN사이트를 엄청 왔다갔다하면서 자바스크립트 문법도 많이 찾아보고 구현함ㅠㅠ(오래 걸림..)

어려웠던 기능들은 실시간으로 검색구현하기, 디바운싱으로 최적화(처음들었,,,) 그리고

북마크 기능이였다... 로컬 스토리지에 저장한 데이터를 가져올때 마지막에 저장한 데이터가 마지막 순번에 있어야하는데 섞여있고, 북마크 삭제하면 바로 사이트에 반영되게 하는등 정~말 시간을 많이 잡아먹고 이때는 구글링을 엄청 했다ㅠㅠ

아쉬웠던 점은 장르필터링을 못한거다.

TMDB에는 한국어로 해도 한국어가 없는 데이터들이 많아서 가져오는것도 조건문이 많이 들어가고, 심지어 장르가 없는 데이터도 꽤 있어서 포기하게 되었다ㅠㅠㅠ 대신 팝업에 장르넣음!

그리고 리팩토링을 할때 어떻게 하면 더 가독성, 성능적으로 좋게 할 수 있을까하는 고민을 많이 했다 

정답도 없고 사실 내가 리팩토링한게 과연 맞는걸까라는 생각도 하게 되었다😥

사실 진작에 구현을 다했으나, 다른 수강생들과 얘기하면서 추가로 넣은 구현도 있고,

중간에 영화 팝업을 띄울때 클릭한 영화 id를 받아와서 그 id를 영화 디테일 api로 따로 구현해서 가져와야 했는데, 나는 그냥 처음에 인기 영화들 가져올때 그대로 팝업에 이어서 붙였었다... 그래서 리팩토링하면서 다시 구현하고,,, 뻘짓

 

그래도 확실히 얻게된건 역시 코딩은 문법공부만 한다고 되는게 아니였다. 실전으로 구현하면서 아 이문법이 이렇게 쓰였구나 하고 찾아보면서 다시 공부하게 되고, 이런 문법이 있었구나 하고 알게되고(정규표현식이랄까 정규 표현식이랄까) 

 

나름 한층더 성장하게 되지 않았을까하고 뿌듯해지며 다음 리액트 준비를...

 

💫완성된 모습💫

 

📌코드보러가기