API 를 가져와 보겠습니다

영화 사이트를 만들어 볼 것이다.

const options = {
    method: "GET",
    headers: {
      accept: "application/json",
      Authorization:
        // 읽기코드가 있던 자리
      ,
    },
  };

// url도 길어서 빼드림
  const url =
    "https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=1";

const getMovies = async function () {
  try {
    const topRatedRes = await fetch(url, options);
    const topRatedJson = await topRatedRes.json();
    const topRatedData = topRatedJson.results;

    return topRatedData;
  } catch (err) {
    console.error("error", error);
  }
};

const renderMovie = async function () {
  const movieData = await getMovies();
  console.log(movieData);
};

// 영화 목록 불러오기
renderMovie();

---

이거 짜는 데 하루 하고 6시간 걸림. 내가 개발자를 해도 되는걸까? ㅎㅎ

다른 방법도 하나 알아냈다.

---

const getMovies = async function () {
  const options = {
    method: "GET",
    headers: {
      accept: "application/json",
      Authorization:
        // 읽기 코드가 있던 자리
      ,
    },
  };

  const url =
    "https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=1";

  try {
    const topRatedRes = await fetch(url, options);
    const topRatedJson = await topRatedRes.json();
    const topRatedData = topRatedJson.results;

    renderMovie(topRatedData);
  } catch (err) {
    console.error("error", error);
  }
};

//호이스팅으로 renderMovie 로직이 실행 가능

const renderMovie = function (data) {
  const movie = document.getElementById("movies");
  data.forEach((item) => {
    movie.innerHTML += `<h3 class>${item.title}</h3>
<p>${item.vote_average}</p>
<img class="img" src ='https://image.tmdb.org/t/p/w300/${item.poster_path}'>`;
  });
  console.log(data);
};

getMovies();

아예 API부터 싹 getMovies 변수 안에 넣어 async await 까지 처리해버리기. 그리고 HTML 파일 안의 요소들도 그냥 백틱으로 묶어서 생성과 동시에 데이터를 불러와버리기. 스타일은 똑같이 클래스를 주고 CSS파일에서 만지면 됨!

movie.innerHTML += `<h3>${item.요소}</h3>`

각 movie 아이템마다 forEach 문으로 훑어가면서 모든 요소에 적용해주는 += 연산자로 일괄적으로 스타일링과 속성 추가가 가능하다,,

append 요소를 쓴 방법도 있는데 내일 추가할 것이다. 왜냐? append 를 알아보는 시간이 부족했기 때문.

---

진심 API 요소 뽑아내서 값 적용하는 거 못해서 한강물 온도 체크하고 싶었다. '일단 html 에서 클래스값을 주고 문서셀렉터로 가져온 다음에 반복문으로 데이터를 돌리면서 각 값을 적용해 줘야겠다' 라는 생각이 들지만? 손이 움직이지 않는? 그런 나의 뇌와 손이? 하루 빨리? 원만한 합의를 통해서? 문제를 해결했으면 좋겠어.

부탁 아님.