Vanilla Javascipt로 영화 리스트 조회 및 검색 UI 구현

Vanilla Javascript로

영화 리스트 조회 및 검색 UI 구현

이번 프로젝트에서는 순수 자바스크립트만으로

영화 정보를 검색하고 표시하는 간단한 웹을 개발했다.

오로지 순수 자바스크립트 (바닐라js) 만으로 만들 줄 알아야

정말 자바스크립트를 잘 쓸 줄 알게 된다고 한다.

혼자 공부할 때는 무조건 리액트 프로젝트로 만들어서 했는데

이번 프로젝트로 많이 배운다고 생각이 든다.

프로젝트 파일은 이런식으로 나누었다.

기본적인 홈페이지 틀을 잡아주기 위해

header, main, footer영역으로 나누어 주었다.

<div id="header" role="banner"> 상단 </div>
<div id="main" role="main"> 메인 </div>
<div id="footer" role="contentinfo"> 하단 </div>

이런식으로 role속성을 이용해서 만들어도 가능하지만

html5 이후로는 role속성 대신,

랜드마크 요소(header, main, footer, section, nav)를 사용하는게 좋다고 한다.

영화 검색 기능도 만들어야하기 때문에 목적에 맞게 구조를 구성해주었다.

https://www.themoviedb.org/

The Movie Database (TMDB)

Welcome. Millions of movies, TV shows and people to discover. Explore now.

www.themoviedb.org

TMBD 사이트를 들어가 회원가입을 하고 API 키를 발급받으면된다.

나는 예전에도 TMDB 프로젝트를 한 적이 있어서

이런 절차들은 패쓰하고 신속하게 진행되었다.

전에 튜터님께서 주신

다른 팀들의 미니 프로젝트 피드백을 참고로

(본인은 캠프에 늦게 참여했어서 미니 프로젝트 진행X)

클릭이 가능한 요소에는

클릭이 가능하다는 표시로 Cursor 속성을 주었다.

flex 속성은 아래 포스트가 잘 정리되어있어서 참고하였다.

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

studiomeal.com

javascript 파일로와서,

TMDB API에서 검색 전용 API도 따로 있어서

SEARCH_API도 작성해주었다.

영화 데이터 불러와서 출력하기

영화 요소에 마우스를 올리면 개요가 스르륵(?) 나타나도록 하였다.

transition 움직임에 대한 내용은 아래 블로그를 참고하였다.

https://blog.naver.com/yangwonder/220845161012

transition 움직임 정리

http://tcpschool.com/css/css3_transform_transition CSS3 전환(transition) 지원 버전 브라우저별로 ...

blog.naver.com

그리고 영화 요소 클릭시 영화 id가 팝업창으로 나타나게끔 하였다.

그리고 1페이지만 보여주길래

모든 페이지를 나타내고 싶어서

페이지네이션 기능을 만들기로 했다.

페이지네이션을 구현하기위해 total_pages를 찾아냈다.

페이지가 버벅거리면서 엄청난 양의 데이터를 불러왔다.

다음부턴 이렇게 무모하게 전체 데이터를 가져오는 행동은 하지 않아야겠다.

그래서 20개의 페이지네이션 버튼만 생성하기로 생각했다.

20개의 버튼이 생겼다.

그리고 평점이 8보다 높으면 green

5보다크면 orange 나머지는 red 색상으로 나오도록 하였다.

검색 기능에서는 엔터를 쳐도되고 검색버튼을 눌러도 검색이 되도록하였다.

화면을 두고 한참 고민해보다가 영화 제목 옆에 있는 평점이

그냥 숫자만 써있어서 평점인지 모를 수도 있겠다는 생각이 들어서

⭐표시를 추가해주었다.

완성 !

완성된 프로젝트를 netlify 로 배포하였습니다.

👉 https://banilla-js-movie.netlify.app/

MOVIE WEB

banilla-js-movie.netlify.app

배운 점

API 통신 및 데이터 처리: 이 프로젝트를 통해 외부 API와의 통신 방법을 익혔습니다. fetch 함수를 사용하여 API에서 데이터를 가져와서 자바스크립트로 처리하는 방법을 익혔습니다.
동적 페이지네이션: 검색 결과를 페이지별로 나누어 보여주기 위해 동적으로 페이지네이션을 구현하는 방법을 배웠습니다. 사용자가 페이지를 클릭할 때마다 해당 페이지의 데이터를 로드하여 보여주는 방식을 적용했습니다.
CSS 스타일링: CSS를 사용하여 웹 페이지의 레이아웃과 디자인을 구성하는 방법을 익혔습니다. 각 요소에 적절한 스타일을 적용하여 사용자 경험을 향상시켰습니다.
바닐라 자바스크립트: 리액트나 다른 css 라이브러리에 의존하지 않고 순수 자바스크립트만으로 코드를 작성하여 자바스크립트 코드 작성에 대해 깊게 고민해보며 자바스크립트 사용 능력을 길렀습니다.

개선해야 할 점

코드의 구조화: 코드를 더 구조화하여 가독성을 높이고 유지보수성을 향상시켜야 합니다. 함수와 변수를 더 적절하게 분리하고 주석을 추가하여 코드의 의도를 명확히 전달할 필요가 있습니다.
에러 처리: 현재 코드에는 API 요청 중 발생할 수 있는 에러에 대한 처리가 없습니다. 네트워크 오류나 잘못된 요청 등에 대한 처리를 추가하여 사용자에게 더 나은 경험을 제공해야 합니다.
디자인 개선: 현재 디자인은 간단하고 기능적인 측면을 중점으로 개발되었습니다. 디자인을 더 개선하여 사용자에게 더 매력적인 UI와 UX를 제공할 필요가 있습니다. 색상, 폰트, 레이아웃 등을 고려하여 디자인을 개선할 수 있습니다.

결론

이번 프로젝트를 통해 다양한 기술과 개념을 학습하고 경험할 수 있었습니다.

개선할 점을 파악하고 이를 바탕으로 더 나은 프로젝트를 구현하기 위해 계속해서 노력하고 발전해 나갈 것입니다.

개발해해원