2024.01.05 TMDB API 연결하기

TMDB API 연결하면서 도대체가 에러도 응답도 없어 멀쩡한 우물을 열심히 팠다.

 

정말 단순한 문제일 것이라고 생각은 했지만 에러도 응답도 아무것도 없어서 정말이지 돌기 직전이었다.

오늘은 어떤 바보같은 행동을 했는지 알아보자

 

TMDB API를 연결하기 위해 아래 코드를 작성했다.

const 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";

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

const showMovies = (data) => {
  data.forEach = (movie) => {
    const movieEl = document.createElement("div");
    movieEl.classList.add("movie");
    movieEl.innerHTML = `
		<img src="https://image.tmdb.org/t/p/w500/ui4DrH1cKk2vkHshcUcGt2lKxCm.jpg" alt="Image" />
		<div class="movieinfo">
			<h3>Movie Title</h3>
			<span class="green">9.8</span>
		</div>
		<div class="overview">
			<h3>Overview</h3>
			what's your positionwhat's your positionwhat's your positionwhat's
			your positionwhat's your positionwhat's your positionwhat's your
			positionwhat's your positionwhat's your positionwhat's your
			positionwhat's your positionwhat's your positionwhat's your
			positionwhat's your positionwhat's your positionwhat's your
			positionwhat's your positionwhat's your positionwhat's your
			positionwhat's your positionwhat's your positionwhat's your
			positionwhat's your positionwhat's your positionwhat's your
			positionwhat's your positionwhat's your positionwhat's your
			positionwhat's your position
		</div>`;
  };
};

 

 

위 코드를 작성하면서 잘 받아오는지 확인이 필요하였으나, 아무리 console.log를 찍어보아도 대답 없던 너..

에러도.. fetch 함수를 작성해도 응답없는 너..

에러라도 주길 바랬다..

 

 

네트워크가서 아무리 두드려 보아도 200이 뜨는 너란 녀석..

답답해 죽을 것 같았다.

거진 4시간은 찾아 헤매었다.

 

 

그래서 무엇이 문제였느냐

getMovies(API_URL);

 

바로 이것..

제일 중요한 다리를 연결하지 않았던 것이었다.
뭘 받아오는지 작성도 하지 않고 그저 애타게..

문제점을 찾은 계기조차도 당황스럽기 그지없었다.
멍 때리는 와중에 가만 보니 API 어디서 받은 거지 지금? 뭐지? 왜 함수만 있지? 롸..?
함수를 아무리 뜯어보고 Html을 아무리 뜯어보아도 알 수 없었던 너란 녀석..

이제라도 눈에 보여줘서 정말 감사합니다.

 

위 코드는 에러 잡으려 별 이상한 코드가 작성되어 있으니..

혹여 참조가 필요하다면 아래  API 잘 받아오는 코드를 참조해 주세요. 미주님^^

근데 바보같은 짓은 여기서 그만하세요 ^^

개인프로젝트 아니면 어쩔뻔했어요? ^^

const 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);
    });
}

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);
  }
});

 

React 강의볼때 .env 파일에 넣고 REACT_APP_... 으로 꽁꽁 숨겨야 한다고 배웠는데 

얕은 나의 지식 때문인지 const 로 뻔뻔하게 자리잡는 아이를 보고 당황스러웠다.

 

우선 에러도 해결했고, 과제는 완료 되었으니 내일은 코드리뷰 일기를 작성해야겠다.

fetch&then ➡️ async&await 으로 보강하는 일기도 함께 쓸 수 있기를!!

 

Git Error

git push -u origin main을 진행 중 에러가 났다.

나의 친구 똑똑이는 main branch 가 생성되지 않았 거나 커밋되지 않았을 거라고 얘기해줬다.

 

위와 같은 에러를 마주치게 된다면, 아래 코드를 순차적으로 진행하길 바란다.

git checkout -b main
git add .
git commit -m "Initial commit"
git push -u origin main