끝판왕의 프로젝트_영화 검색 사이트 만들기(심화)

일전에 올렸던 영화 검색 사이트는 개인별로 진행하는 개인과제였으나, 

이후 팀 과제로 팀원들이 만든 영화를 선택하여 고도화 하는 과제가 주어졌다. 

 

팀장님께서는 처음부터 다시 만들어보자는 의견을 주셨고 우리는 수긍했다 ! 

 

# 0. 팀 과제 프롤로그

성공한 자를 따라가야 성공한다고 했던가? 우리는 다른 사이트를 모방하여 만들기로 했고 참고한 사이트는 다음영화다. 

우리 사이트의 전신이 된 다음 영화

왜 다음영화 사이트를 참고했냐면

여러 사이트들을 비교해봤을 때 기존에 만든 개인과제와 유사한 형태의 UI를 가지고 있으면서도 가독성이 좋은 사이트이고, 

배웠던 내용을 실제로 써먹기에도 좋은 예제가 될 수 있으리라 생각했다. 

 

# 필수 요구사항

우리가 만들 사이트에서 필수로 구현해야하는 기능이 있었는데 아래와 같다. 

 

1. 카드를 클릭하면 나오는 영화의 상세 페이지를 구현할 것

2. 상세페이지 내 영화 리뷰 작성 기능을 구현할 것

 

이 외에 바닐라 자바스크립트를 사용해야하고, 영화를 검색하거나 댓글을 달 때 유효성 검사를 실행해야하는 등 

배웠던 내용을 실습하기 위한 여러가지 조건이 있었다. 

 

# 업무분장

업무 분장을 하기 전 구현할 기능들을 나열하였는데 아래와 같이 나눴다. 

 

1. 검색기능 (상단 띄배너와 메인배너, 평점 랭킹으로 5개의 카드를 뿌려주는 것까지)

2. 전체 카드 리스트 뿌려주는 기능

3. 상세 페이지

4. 리뷰 작성 기능

 

사다리를 탔고.. 내가 1번 검색기능이 되었다. 

 

프롤로그가 길었으나 검색기능과 메인이미지 등을 구현하며 생겼던 문제들이나 추가로 구현한 내용을 이전 포스팅과 같이 게시하고자 한다. 

 

# 검색 기능에 대한 유효성 검사 추가

앞선 개인과제에서 구현한 검색기능이 있어 기능 자체를 구현하는게 어렵지는 않았으나 유효성 검사에서 한 가지 경우를 더 추가했어야 했다. 

 

이전에는 검색어가 입력되지 않았을 때와 정상 입력되었을 때만 유효성 검사를 실시하였는데, 

생각해보니 검색어를 입력하였음에도 검색결과가 없는 경우도 있을 것 같았다. 

 

먼저 검색된 결과에 따라 카드를 보여주는 방법은 아래와 같다. 

검색된 영화를 저장하는 함수

  1) 전체 카드 리스트를 하나의 배열에 넣어준다. [movieListAll] 

  2) 검색창에 입력된 검색어를 전체 카드 리스트의 타이틀로 비교하여 새로운 배열에 넣는다. [searchedList]

 

다시 유효성 검사로 돌아와서 

 * 검색창에 아무것도 입력되지 않을 때에는 이전과 같이 검색창에 입력된 값의 길이?로 조건을 걸었고, 

 * 검색결과가 없을 때에는 [searchedList]의 길이가 0 즉 배열 안에 아무것도 담기지 않았을 때를 조건으로 걸었다. 

 

(별도로 저장된 함수를 카드 형태로 뿌려주는 함수가 별도로 또 있다.)

저장된 검색 카드를 html형태로 뿌려주기

이로써 검색기능은 구현되었다.

(분명 문제가 있었으나.. 별도로 정리하지 못해 진행기만 작성하고 있다.) 

 

# 랭킹 카드(Top 5) 뿌리기

전체카드를 뿌리는 것과 비슷하다고 생각했으나 한가지, 그 중 평점을 기준으로 줄세우고 5개만 선택해야하는 문제가 있었다. 

나는 아래와 같이 코드를 짜봤다. 

랭킹 카드를 html로 구현까지 !

랭킹 카드는 페이지 진입 시에 바로 보여줘야하기 때문에 forEach 함수를 바로 사용했다. (지금 생각해보니 이게 맞나 싶긴하네...)

 

  1) map 함수로 html 형식의 새로운 배열을 반환하고 

  2) join 함수를 사용해 텍스트 형식으로 합친 후 

  3) 지정된 DOM에 innerHTML 메서드를 사용하여 HTML을 구성하였다. 

 

랭킹카드를 뿌리는 것 까지는 크게 문제가 없었고 한발 더 나아가

랭킹카드를 클릭하면 그 카드에 맞는 정보로 메인보드가 변경되는 기능을 구현하고자 했다. 

 

# 랭킹카드 클릭 시 메인 컨텐츠 변경

메인 컨텐츠라고 하면 위 다음영화 사진에 '그대들은 어떻게 살것인가' 타이틀과 함께 뒷 배경을 이야기 하는데

앞선 개인 과제에서 카드를 클릭하면 그 카드의 id값을 alert 으로 보여주는 것과 비슷하다고 생각했다. 

 

내가 진행한 내용은 아래와 같다. 

1) addEventListener 함수를 통해 랭킹 카드가 있는 부분을 클릭 시 함수가 호출되게 한다. 

2) 다만, 클릭된 타겟 id에 접근하기 위하여 closest 메서드를 활용하고, 클릭된 id값을 가져온다.

3) find 메서드를 활용하여 랭킹카드에 있는 녀석과 클릭된 녀석의 id값이 맞는 카드를 clickedRankCard라는 변수에 담는다.

4) 정상으로 담겼다면 changeCnt라는 함수를 이용하여 컨텐츠 HTML을 변경한다. 

 

이때 사소한 문제가 발생했는데,

가져오는 이미지 값을 original값으로 가져오니 용량이 커서 그런지 로딩이 약 1~2초 정도 소요되었다. 

 

요 부분을 해결하는 방법은 아직 찾지 못하였으나 이것저것 알아보고 다시 포스팅을 남기도록 하겠다. 

 

이번주 팀 과제에 많은 시간을 할애하고 있는데

우선은 원하는 기능을 구현하는 것이 최고 목표였기에 별도로 문제점들을 정리하지 못한게 아쉽다. 

 

이후에는 그때마다 캡쳐와 메모 기능을 통해 적어놓는 습관을 들여야겠다. 

 

오늘도 반발짝 나아간 끝판왕이다.