영화 검색 사이트 만들어보기

그 전에 팀 프로젝트로 소개페이지를 만들어봤지만 그 플젝에선 내 비중이 너무나도 작았기 때문에 정리를 따로 안했지만 

이번 개인플젝은 정리하기로 맘먹었다

 

과제에서 주어진 큼직한 조건들을 나열해보자면 

1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기
2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기 (TMDB에서 받아온 데이터를 브라우저 화면에 카드 형태의 데이터로 보여주고, 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수로 들어감)
3. 카드 클릭 시에는 클릭한 영화 id 를 나타내는 alert 창을 띄우기
4. 입력 후 검색버튼 클릭 시 API로 받아온 전체 영화들 중 영화 제목에 input 창에 입력한 문자값이 포함되는 영화들만 화면에 보이도록 하기

정도였다.

 

오픈 api를 받아와서 가이드라인 없이 혼자 무언갈 만들어 본 적이 없었다. 올 초 1월에 인프런 강의를 들으면서 날씨 api를 받아와서 간단한 기능을 구현해본 적은 있지만 .. 어쨋던 강의를 보면서 만들었기 때문에 크게 막히지도 않았고 따라하기만 하면됐음.

 

api를 fetch를 통해 받아오고 받아온 데이터중에 영화 카드에 표시해야할 title, overview 등을 fetch 밖으로 빼내와서 객체나 배열에 저장하고 관리하려고 했다. 그래야 나중에 검색 기능을 만들었을 때 데이터 비교가 쉬울테니까..!(라고 생각함) 

 

movies = [];

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzYjA4ZjU5ZDE5ZThjYmRiZTcyMzI3NGM2NDM5NDE0MCIsInN1YiI6IjY0NzFmNGExOTQwOGVjMDBhN2ZhNDBhNiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.WLkluwBQ0KYIj8JX-MpS5i535Dry4NMyKrq9iRnaOA4",
  },
};

fetch(
  "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1",
  options
)
  .then((response) => response.json())
  .then((response) => {
    movies.push(response.results);
    
  })
  .catch((err) => console.error(err));

console.log("movies", movies);
console.log("movies[0]", movies[0]);

뭐 이런식으로..  fetch 밖에서 데이터를 옮겨담을 movies 배열을 만들어주고, movies.push 를 통해 데이터를 옮겨담아주어 fecth 밖에서 console.log(movies)를 찍어봐서 데이터가 잘 옮겨졌는지 확인을 했다.

하지만 movies를 출력해보면 잘 찍혀 나왔지만, movies[0]을 하면 undifined가 나왔다.

클래스 만들어서 fetch안에서 인스턴스 생성 후 빼도 똑같았었고 별 짓 다해봤는데 아직 많이 미숙한 실력이라 계속 실패 🥲 .. 

결국 그냥 fetch 함수 안에서 데이터 필요로하는 모든 기능을 다 담아야겠다고 생각함 

 

 

1) 받아온 데이터를 영화카드에 넣어주고 카드 누르면 해당 id alert창으로 띄우기

const cardWrapper = document.getElementById("card-wrapper");

fetch(
  "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1",
  options
)
  .then((response) => response.json())
  .then((response) => {
    let arr = response.results; //tmdb에서 api 받아와서 arr에 넣어주기

    const makeCard = function (arr) {
      arr.forEach((a) => {
        let title = a["title"];
        let overview = a["overview"];
        let poster_path = a["poster_path"];
        let vote_average = a["vote_average"];
        let id = a["id"];

        let temp_html = `<div class="card" onclick="alert(${id})">
                              <img src="https://image.tmdb.org/t/p/w200${poster_path}" alt="" />
                              <h3 id="title">${title}</h3>
                              <p id="score">score: ${vote_average}</p>
                              <p id="movieId" style="display:none">${id}</p>
                              <p id="explanation">${overview}</p>
                        </div>`;

        cardWrapper.innerHTML += temp_html;
      });

영화카드를 만드는 makeCard 함수를 만들고, 함수 내부에서 temp_html 를 통해 영화카드들을 구성해주고요 

cardWrapper.innerHTML += temp_html; 해줘서 html에 넣어줌

그리고 영화카드를 누르면 해당 영화의 id값을 alert창으로 띄워줘야 했기 때문에 div 태그에 onclick 속성을 주어 만들었다

 

 

 

2) 검색기능 구현

검색기능 구현이 제일 어려웠다 진짜 /... 울고싶었음

많은 시행착오를 거치고 접근순서를 세워보았다

 

1. input창에 입력받은 데이터를 받아와서

2. 영화 카드의 제목과 입력데이터를 비교하고

3. 겹치는 제목이 있다면 makeCard 함수에 넣어 제목이 똑같은 카드만 필러로 걸러주어 보여주고

4. 검색창에서 받아온 입력값이 내부 영화 제목과 겹치는게 없다면 빈화면 띄우기

 

2번이 제일 힘들었다. 개인플젝이였지만 같은 조원들의 도움을 많이 받았던 부분 ㅠ 혼자였으면 절대 구현 못했을 듯

조원분이 준 힌트를 요약해보자면

1. 받아온 입력값을 toLowerCase() 메소드로 소문자로 변환해주고

2. 내부 영화카드의 제목들도 toLowerCase() 메소드로 소문자 변환 후, includes()메서드를 사용해 겹치는 부분이 있는지 확인하고

3. 비교한 결과들을 filter()메소드를 통해 걸러주기

 

 searchBtn.addEventListener("click", () => {    //input창에 입력된 데이터들을 받아오기 
      const inputMovieTitle = input.value.toLowerCase();
      const filteredMovies = arr.filter((arr) =>
       arr.title.toLowerCase().includes(inputMovieTitle)
 );

말로 쓰면 음 쉽게 할 수도 있지만 위 몇 줄 적는데 몇시간이 걸린... 거즘 다큐찍음

이제 입력받은 제목데이터에 기반해서 filter된 영화카드를 새로 구성해주어야 했다

위에 과정이 넘 힘들었어서 이건 좀 쉬웠다

 if (filteredMovies.length >= 1) { //겹치는 영화제목 데이터가 있다면 해당 영화로 화면구성해주기
        cardWrapper.innerHTML = "";
        console.log(filteredMovies);
        makeCard(filteredMovies);
      } else {
        //없으면 빈화면보이게
        cardWrapper.innerHTML = "";
      }

영화카드 구성하는 makeCard 함수를 따로 만들어놔서 쉽게 . .. 구현했습니다 ㅠ

유지보수가 이럴때 좋다는거군요

 

 

자바스크립트에 이런 메소드들이 있구나 라는걸 알았던 이번 플젝..!! 여기엔 안적었지만 오류들도 되게 많이 나와서 ... ㅎ 덕분에 이번 플젝하는 동안 TIL 컨텐츠 차고 넘침 ㅋ.... ㅎ 

그래두 플젝하는 3일동안 직접 기능추가하고 안되면 되게 하고 오류나면 폭탄 구글링하고.. 자바스크립트와 좀 친해진 늮임

낼부터 팀플젝 시작합니다 🥵