2024. 01. 07 TMDB API 연동 프로젝트 코드 설명해 보기!

오늘은 자바스크립트책을 읽고 싶었지만 책을 읽다 보니 설명되는 단어들마다 어떤 뜻을 가지고 있는지 몰라서

꼬리물기가 되었다. 그래서 나중에 다시 도전하기로 했다^^

 

 

TMDB API 연동한 프로젝트 코드 설명해보기!

 

니가 짠 코드를 가지고 코드 설명해보는게 왜 필요하냐고 묻는다면 아직 나혼자 작성한 코드가 거의 없다.

거의가 아니라 그냥 없다고 봐도 무방🙄 

검색 검색 검색의 연속...

적어도 사용된 함수의 작동 방법과 사용 방법을 이해하기 위해서 필요하다고 생각했다. 

 

const API_KEY = "api_key=";
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";
const searchURL = BASE_URL + "/search/movie?" + API_KEY;

const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");
const id = document.getElementById("id");

getMovies(API_URL);

// function getMovies(url) {
//   fetch(url)
//     .then((res) => res.json())
//     .then((data) => {
//       showMovies(data.results);
//     });
// }

async function getMovies(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    showMovies(data.results);
  } catch (error) {
    console.error("Failed to fetch movies:", error);
  }
}

const showMovies = (data) => {
  main.innerHTML = "";

  data.forEach((movie) => {
    const { title, poster_path, vote_average, overview } = movie;
    const movierating = vote_average.toFixed(1);
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");

    movieEl.addEventListener("click", () => {
      alert("Movie ID :" + movie.id);
    });

    movieEl.innerHTML = `
		<img src="${IMG_URL + poster_path}" alt="${title}" />
		<div class="movieinfo">
			<h3>${title}</h3>
			<span class="green">${movierating}</span>
		</div>
		<div class="overview">
			<h3>Overview</h3>
			${overview}
		</div>`;

    main.appendChild(movieEl);
  });
};

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const searchTerm = search.value;
  if (searchTerm) {
    getMovies(searchURL + "&query=" + searchTerm);
  }
});

 

---

 

< TMDB API에서 제공하는 각각의 URL을 설정한 상수 >

const API_KEY = "api_key=";
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";
const searchURL = BASE_URL + "/search/movie?" + API_KEY;

🔥API_KEY는  .env 파일에 작성하자!!! 보안에 취약  

---

 

< HTML에 작성한 요소 가져오기 >

const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");
const id = document.getElementById("id");

 

쉽게 설명하자면 HTML에 id 값을 할당해 준 아이들을 데리고 오기 위한 방법

id = main

id = form

id = search 

---

< getMovies 함수 호출 >

getMovies(API_URL);

---

 

< getMovies 함수 선언>

async function getMovies(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    showMovies(data.results);
  } catch (error) {
    console.error("Failed to fetch movies:", error);
  }
}

 

---

 

async function getMovies(url) {
  try {
  } catch (error) {
    console.error("Failed to fetch movies:", error);
  }
}

 

getMovies 함수 호출할 때에 인자로 전달된 API_URL을 받아서

async 함수와 try & catch 블록으로 비동기 함수 틀을 만들고

---

 

 const response = await fetch(url);

 

await 표현식과 fetch 함수로 API_URL 받아오기 

 

**fetch 함수는 주어진 URL에 대한 네트워크 요청을 생성하며,

promise를 반환하고, 반환된 promise는 네트워크 요청이 완료되고 서버에서 응답을 받으면 resolve 된다.

---------------------------------------- >>> resolve모르면 01월 06일 promise 설명 다시보고 와라. 공부제대로 안했다는 소리 😑 

 

**url은 변수명으로 getMovies 함수의 매개변수로 전달되는 값이다.

getMovies(API_URL)을 인자 값으로 받고 있기 때문에 getMovies 호출하면 API_URL를 전달!!

 

---

 

const data = await response.json();

 

await 표현식과 response.json()을 사용해  API에서 받아온 데이터를 JSON 형태로 변환해 값을 담는다.

 

**response = 네트워크 요청에 대한 응답 객체

**response.json() 은 response를 JSON 형식으로 변환하는 메서드

 

---

 

showMovies(data.results);

 

showMovies 함수 호출!!!

 

data = API에서 받아온 데이터를 JSON 형태로 변환한 값을 가지고 있음

results = API응답에서 특정 정보를 담고 있는 배열을 가리키는 key

 

**results는 API에서 반환되는 데이터 구조 중 하나로 데이터가 객체 형태로 넘어옴

 

---

 

< showMovies 선언 >

const showMovies = (data) => {
  main.innerHTML = "";

  data.forEach((movie) => {
    const { title, poster_path, vote_average, overview } = movie;
    const movierating = vote_average.toFixed(1);
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");

    movieEl.addEventListener("click", () => {
      alert("Movie ID :" + movie.id);
    });

    movieEl.innerHTML = `
		<img src="${IMG_URL + poster_path}" alt="${title}" />
		<div class="movieinfo">
			<h3>${title}</h3>
			<span class="green">${movierating}</span>
		</div>
		<div class="overview">
			<h3>Overview</h3>
			${overview}
		</div>`;

    main.appendChild(movieEl);
  });
};

 

JSON 형태로 변환한 값은 data를 인자를 받아 화면에 띄워주는 역할을 하게 된다.

---

  main.innerHTML = "";

 

HTML에서  id 값을 main으로 가지고 있는 태그 내부 내용을 비운다. 

 

---

 

  data.forEach((movie) => {
    const { title, poster_path, vote_average, overview } = movie;
    const movierating = vote_average.toFixed(1);
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");

    movieEl.addEventListener("click", () => {
      alert("Movie ID :" + movie.id);
    });

 

data에 있는 값을 forEach가 알아서 가져와 movie라는 변수에 담아준다.

 

---

const { title, poster_path, vote_average, overview } = movie;

⬆️ 구조분해할당

 

 

const title = movie.title;
const poster_path = movie.poster_path;
const vote_average = movie.vote_average;
const overview = movie.overview;

⬆️직접접근 

 

let title, poster_path, vote_average, overview;
title = movie.title;
poster_path = movie.poster_path;
vote_average = movie.vote_average;
overview = movie.overview;

⬆️대입연산자 활용

 

const [title, poster_path, vote_average, overview] = Object.values(movie);

⬆️ Object.values 사용

 

작성 방법은 다 다르지만 동일한 역할을 수행한다! 

---

 

    const movierating = vote_average.toFixed(1);

• vote_average 는 소수점 3자리를 가지고 있는 숫자열인데, 소수점 한자리까지만 나타나길 원해서 toFixed 함수 사용

---

 

callback 함수 ➡️ async & await 으로 바꾸기

 

먼저 callback 함수로 구현하고 async & await 변경하려고 하는 이유를 설명해 보자.

 

① 가독성과 유지보수성

• async & await 는 비동기 코드이지만 동기적으로 보이게 만들어 가독성을 좋게 만들 수 있다. 
• callback함수를 중첩하게 되면 callback hell이 발생할 수 있고, 코드가 길어지면 가독성이 떨어져 보수가 어렵다. 

② 에러처리

• async & await를 사용함으로 써 try & catch 블록으로 에러처리를 명료하고 간단하게 만들 수 있다.

③ promise chaining

• callback 함수는 promise chaining으로 길어질 수 있으나 async & await은await 으로 간편하게 작성할 수 있다. 

내가 아는 이유는 이정도..😓

**asynt는 함수 / await은 표현식

---

< 일반적인 callback 함수로 구현 >

function getMovies(url) {
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      showMovies(data.results);
    });
}

 

 

⬇️

< async & await로 구현 >

async function getMovies(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    showMovies(data.results);
  } catch (error) {
    console.error("Failed to fetch movies:", error);
  }
}

 

 

🔥error는 어디에서 에러가 났는지 바로 알 수 있도록 어느 부분의 에러인지 정확하게 작성해 주자

---