Javascript

새 과제 시작

과제 : TMDB API 를 이용해서 영화 데이터를 받아와 웹페이지에 카드 형식으로 구현

• 검색 기능은 반드시 들어가야함

• CSS, HTML, JS 만으로 작성할것

API 사용하기

여기서부터 엄청나게 헤멨다... 결국 fetch 를 이용하여 다음과 같이 구현. 이게 최선인지는 모르겠음

document.addEventListener("DOMContentLoaded", function () {
  const options = {
    method: "GET",
    headers: {
      accept: "application/json",
      Authorization:
        "Bearer eyJhQ(생략)",
    },
  };

  fetch(
    "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1",
    options
  )
    .then((response) => response.json())
    .then((response) => {
      const dataContainer = document.getElementById("data-container");
      let movies = response.results;
      console.log(movies);
      console.log(
        movies.map((x) => {
          return x.title; 
        })
      );

      movies.forEach((mov) => {
        const card = createMovieCard(mov);
        dataContainer.appendChild(card);
      });
    })
    .catch((err) => console.error(err));
});

• 웹페이지가 열리면 바로 컨텐츠를 받아와야 하기에 DOMContentLoaded 이벤트를 사용했다. 처음 사용해본 이벤트인데, HTML 문서가 완전히 구문 분석되고 모든 지연된 스크립트가 다운로드되고 실행될 때 발생한다고 한다.

• 허나 다른 팀원의 코드를 보아도 다른 방식을 사용했고, 애초에 이 이벤트 자체가 너무 생소해서 이런식으로 하는게 맞는지에 대한 의심이 강하게 있다. => 튜터님에게 물어보고 수정 필요시 수정할것.

카드 생성 함수

function createMovieCard(mov) {
  const card = document.createElement("div");
  card.classList.add("movie-card");
  card.id = mov["id"];
  // 카드에 alert 기능 추가
  card.addEventListener("click", () => {
    alert(card.id);
  });

  const poster = document.createElement("img");
  poster.setAttribute(
    "src",
    `https://image.tmdb.org/t/p/w300${mov.poster_path}`
  );

  const title = document.createElement("h3");
  title.textContent = mov["title"];

  const overview = document.createElement("p");
  overview.textContent = mov["overview"];

  const voteAverage = document.createElement("p");
  voteAverage.textContent = "평균 평점: " + mov["vote_average"];

  card.appendChild(poster);
  card.appendChild(title);
  card.appendChild(overview);
  card.appendChild(voteAverage);

  return card;
}

• 의도대로 동작한다. 이후 검색 기능 추가를 어떤 방식으로 하느냐에 따라 수정이 필요할 수 있다.

• 팀원의 조언대로 위에 적은 콜백함수 안에서 빼서 전역 스코프에서 선언하였다. 덕분에 훨씬 읽기가 편해졌다.

내일 시도 할 것

• 검색 기능 만들기

• 못만들면 최소한 주말에라도 만들 수 있게 관련 이론 학습하기.

• 검색창 만들고 입력값을 받아와서 사용 가능하게 하는 로직 만들기.

personal remark

과제 어렵다.... 그래도 중간 중간 코드 짠게 의도 대로 동작했을땐 정말 기분 좋았다.
검색 기능은 어떻게 만들어야 할지 아직 감도 안잡힌다.
그래도 계속 찾아보고 공부하고 물어보고 하다보면 어떻게든 될 것이다.

이론 공부를 좀더 느긋하게 할 여유가 있었으면 좋겠다.
JS 문법 자체를 모르는게 워낙 많다보니 힘들다.
근데 또 잘 모르는 상태에서 억지로 하려고 할때가 가장 빠르게 많은걸 알게되니 긍정적이게 생각하자.

지금은 죽을맛인데 이번 과제 끝나고 나면 또 몰라보게 성장해 있을 것이다.