내일배움캠프 개인프로젝트 - 최고 평점 영화 검색 사이트

내일배움캠프 개인프로젝트 - 최고 평점 영화 검색 사이트

 

 

내일배움캠프 첫 개인프로젝트는 최고 평점 영화 검색하는 페이지 구현이었습니다. 이 글에서는 프로젝트 진행 과정과 어려웠던 부분, 그리고 어떻게 극복하였는지에 대해 소개하겠습니다. 

 

 

과제 요구 사항

 

인생사진 쏙쏙 코딩네컷 | 스파르타코딩클럽 무료특강

 

과제의 가장 큰 개요는 다음과 같았습니다.

 

•  순수 바닐라 자바스크립트만으로 영화 리스트 조회 및 검색 UI 구현
•  학습해온 자바스크립트 문법을 최대한 활용
•  스타일링 작업하며 css 와 친해지기

 

이 중 다행이었던 점은 CSS 사용 간에 부트스트랩 사용을 허용한 부분이었습니다. 부트스트랩을 사용하니 css 구현에 있어서 많이 수월하게 작업할 수 있었습니다.

 

부트스트랩 쉽게 사용하는 방법 - 웹사이트 제작 필수 프로그램

 

여기에 이번 과제에는 필수 요구 사항이 제시되었습니다.

 

1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기
2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기
3. 영화정보 카드 리스트 UI 구현
4. 영화 검색 UI 구현
5. 하기 기재된 Javascript 문법 요소를 이용하여 구현

 

The Movie Database (TMDB)

(영화 자료는 위 사이트 API를 활용하였습니다)

 

대략적인 요구사항은 위와 같이 이루어져 있었습니다. 처음에는 필수 요구 사항 이해하는 데서부터 어떻게 해야할지 막막했는데 2,3번 반복해서 읽다보니 점차 해야할 단계들이 보이기 시작했습니다. 영상을 통해 배운 javascript 문법과 API 호출 방법을 확인하며 프로젝트를 진행하였습니다.

 

 

어려웠던 부분

 

다 어려웠지만 특히 어려웠던 부분은 영화 리스트 검색을 여러번 하면 결과 값이 누적되어 조회되는 부분을 수정하는 게 제일 어려웠습니다.

 

오류점

검색창에서 전체 조회시 20건이 나타난다면, 두 번 검색하면 40건, 세 번 검색하면 60건... 이렇게 검색 횟수별로 계속 조회 건수가 누적되는 오류가 발생하였습니다.

 

해결방안

위의 오류를 해결하기 위해 여러 구글링으로 비슷한 사례 찾아본 후 해결방안을 찾게 되었습니다. 바로, 조회 시작시 조회된 건수를 초기화하는 작업을 추가하는 것이었습니다. 조회 전 조회 건수를 전체 삭제하여 0건을 만든 다음 그 후에 검색을 시도하도록 로직을 변경하였습니다.

 

그렇게 하니 검색 건수가 누적되는 부분을 바로잡을 수 있었습니다.

 

 

프로젝트 최종 구현 화면

 

내배캠 최고 평점 영화 콜렉션

 

최종 구현 사이트는 다음과 같습니다. 초기화면은 아래와 같으며, 영화 최고 평점부터 나열되도록 구현하였습니다. 검색창 왼쪽을 보면 실시간으로 동작하는 시계를 추가하였습니다.

 

 

 

'god'이라는 문자로 검색 시 글자가 포함하는 영화 제목이 조회되도록 구현하였고, 검색어의 대소문자 상관없이 검색 가능하도록 하였습니다.

 

 

 

끝으로

 

자바스크립트라는 낯선 프로그래밍 언어로 기존의 배운 문법들을 활용하여 만들어보니 신기했습니다. 프로젝트 작업 중간 막히는 부분을 찾기 위해 구글링해보면서 다양한 문제 해결법이 있다는 것도 새삼 알 수 있었고, 기능 구현하기 전 기획이 얼마나 중요한 작업인지 이번 프로젝트를 통해 더욱 느낄 수 있었습니다.

 

▼ 아래 글도 읽어보세요! ▼

 

내일배움캠프 공부법 특강 - 개발자가 되기 위한 공부 방식, 태도 소개

 

 

인생사진 쏙쏙 코딩네컷 | 스파르타코딩클럽 무료특강

 

VScode(Visual Studio Code) 코드 정렬 최신 단축키 + 유용한 단축키