개인 프로젝트 회고(1)

6-7일 간의 첫 개인 프로젝트를 제작하는 시간을 가졌다.

완전히 숙지하지 못한 문법(Javascript)을 바탕으로 프로젝트를 진행하기엔 역시나.. 힘든 시간의 연속이었다는 건 처음 코딩을 시작하는 사람들은 공감할 것이다.

바닐라JS로 작업을 해야했기에 jQuery를 쓰지 못한다는 매우 아쉬운 점은 있었지만 해야지 어쩌겠는가..!!

TMDB API를 사용하여 영화 정보를 불러와 원하는 정보만 뽑아 사용하면 된다.

• 먼저 회원가입하고 설정을 들어간다.

• API 클릭

• 난 이미 API키를 생성했지만 같은 창에서 생성해주면 된다.

• 생성 후 문서의 링크를 클릭후 상단 바에서 API Reference를 클릭 후 원하는 API를 복사해
  js 파일에 붙여주면 된다. (참 쉽죠?)

• 위와 같이 붙여주면 된다.

이제는 JS코드를 만들어 보자! (우와...)

1. fetch 함수 전에 dom요소 변수를 설정해준다.

fetch함수가 전혀 익숙치 않아 어디에 넣어 작동해야 하는지 부터가 문제였다..

fethch(url,option)
.then((response) => response.json())
.then((response) => console.log(response))
.catch(err) => console.log(err))

• 위의 코드가 받아온 fetch 함수의 원형이다.
  지금에서야 튜터님들의 도움과 팀원들의 도움으로 두번 째의 .then(reponse) => 의 다음부터 코드를 넣어 작성한다는 것을 알지만 당시의 나는 아무것도 몰라 혼자 끙끙 앓기만 했던 듯 하다.. 역시 모르면 물어보는 게 정답이다.

const movieContainer = document.getElementById("movies-container");

화살표 함수를 사용해 설정해둔 요소를 가져온다.

여기서 querySelector말고 왜 getElementById을 쓴 이유는 후자쪽이 전자쪽 보다 반응속도가 빠른 편이고 익숙해서이다..ㅎ 물론 id 값만 인식하는 getElementById 보단
특정 요소만을 리턴하지 않는 querySelector` 쪽이 쓰긴 유용하다.

2. 영화 카드에 들어갈 함수를 만들어 준다.

const createMovieCard = (movie) => {
     const { title, overview, poster_path, vote_average } = movie;

movie라는 매개변수를 받아 하나의 객체가 된다.
후에 구조분해 할당을 하여 네 속성을 추출한다.

3. DOM요소 생성

  const card = document.createElement("div");
  const image = document.createElement("img");
  const titleElement = document.createElement("h2");
  const overViewElement = document.createElement("p");
  const voteAverageElement = document.createElement("p");

영화 카드를 만들기 위해선 필요한 요소들..

4. DOM요소 클래스 이름 설정

card.className = "movie-card";
      image.className = "poster-image";
      titleElement.className = "title";
      overViewElement.className = "overview";
      voteAverageElement.className = "vote-average";

5. 이미지와 텍스트컨텐트 설정

image.src = `https://image.tmdb.org/t/p/w500${poster_path}`;

      // 텍스트 컨텐츠 설정
      titleElement.textContent = title;
      overViewElement.textContent = `줄거리📖: ${overview}`;
      voteAverageElement.textContent = `평점📌: ${vote_average}`;

6. 요소를 추가

card.appendChild(image);
     card.appendChild(titleElement);
     card.appendChild(overViewElement);
     card.appendChild(voteAverageElement);

     return card;
   };  

appenChild로 카드 요소를 추가해준다.

그러면 첫 단계인 페이지에 카드 생성 완료!!

7. 영화 ID를 나타내는 alert창 만들기

2.에서 함수를 이용해 movie라는 매개변수를 만들어줬다
그 부분에 영화 ID 값을 넣어준다.

const createMovieCard = (movie) => {
      const { id, title, overview, poster_path, vote_average } = movie;

8. alert창 띄우기

card.setAttribute("id", id);

• 영화카드에 id속성 추가해줄 수 있게 setAttribute 사용!

movieCard.addEventListener("click", () => 
 { const movieId = movieCard.getAttribute("id");
    alert(`영화 ID는 ${movieId}입니다!`);
 });

아직까진 문법이 익숙치 않아 코드를 자력으로 다 할 수 없어 구글링을 통해 알아보고 코드를 작성하여 옮겨보니 크게 문제없이 alert창이 떴다.