[JavaScript] 개인 과제 수행 - 1일차 (TMDB API 발급 받기, 카드리스트 만들기)

<영화 소개 사이트 만들기> 

TMDB 에서 영화정보 API를 가져와서 카드 형식으로 소개해야한다는데 흠... 우선 대략적인 html 구조를 잡고 TMDB API를 가지러 가보자..

 

1. 가장 먼저 회원가입 해야됨!!!

2. 그리고 나의 api 키를 받아야 함!!

 

위 내용은 아래 블로거 분의 내용을 참고하면 아주 베리굿임👍

 

https://velog.io/@yoonezi/TMDB-API-key-%EB%B0%9C%EA%B8%89%EB%B0%9B%EA%B8%B0

TMDB API key 발급받기

여기서 하나 주의할 점은 (나만 그런건진 몰라도..) '애플리케이션 개요' 부분을 그냥 대충 썼다가 빠꾸 먹었는데 뭐 어떡해야되지.. 싶으면 챗지피티한테 물어보면 됨 ㅋ 걔가 알려준 내용 복붙했더니 통과했다!

쓰라는것만 빈칸없이 잘 쓰면 어렵지않게 API 키를 내어줌 ㅎㅎ

 

 

3. API를 내 코드로 가져와보자... 

 

내가 필요한 top rates의 movie api를 선택 -> 내 api키 넣어주고 (로그인 되어있으면 자동으로 들어가 있음) fetch request에서 'try it' 버튼 누르면 아래 reponse 창이 뜬다. 

fetch request 코드를 내 js 코드에 복붙, 그 아래 reponse의 코드도 복붙!

 

주의할점!!

처음 reponse 코드를 가져오면 이렇게 빨갛게 처리 되어있는 부분이 있다. 여기서 : (클론) => ; (세미클론) 으로 바꿔야 함!!

 

 

맨 위에 2개, 맨 아래 2개만 변경해주면 됨!!  

=> 이 단계는 필요 없는듯 보임!! 지금 단계에선 아직 확실하지 않아서 지우진 않고 주석처리로 남겨둬야겠다.

 

그리고 브라우저에서 콘솔을 확인해보면...?

 

영화 리스트가 아주 잘 들어가 있다 음하하!!! => reponse의 코드를 주석처리 해도 콘솔에 리스트가 잘 뜨는걸 보니 필요 없는듯!! (그래도 불안하니까 아직 지우진 않을거임!)

---

 

4. 영화 api가 잘 들어온것을 확인했으니 이제 카드 리스트를 만들어보자!!

 

<main>태그 아래있는 movie-container라는 id 값을 갖고 있는 태그 아래 이제 카드리스트를 만들어 볼것임!

 

☆★ ☆★ ☆★ 추가 사항!!! 중요!!!!  ☆★ ☆★ ☆★

 

api만 가져온다고 영화 데이터가 뚝딱 들어오는게 아님!!!

이거 제일 중요한데 깜빡하고 빼먹음ㅋㅋ

//fetch api
const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmMjg5YWM2NTEyOTk4NGFmN2FlYTdk
    ZDliMDQ2ZmYwZiIsIm5iZiI6MTcyOTA1MDA1MC4xODQzOTIsInN1YiI6IjY3MGRjNTBhZDVmOTNhM2RhMGJ
    jMDdiMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Rv7klBc-bH0yPcU2WZf3BFyq-
    ZPMZYjzBDjYhzSNqOU'
  }
};  // => 요기까진 TMDB에서 가져온 api그대로 쓰기!

// 이거는 첨에 복붙한 fetch임! 이제 이걸 내가 영화 데이터로 쓸 수 있게 함수화 해줘야됨!!
fetch('https://api.themoviedb.org/3/movie/popular?language=en-US&page=1', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));
  
  
↓↓↓↓ 이제부터가 진짜 중요!!! ↓↓↓↓
   
  
//영화 데이터 가져오는 함수

function fetchMovies() {
  fetch(
    "https://api.themoviedb.org/3/movie/popular?language=en-US&page=2&language=ko",
    options
  )
    .then((response) => response.json())
    .then((data) => displayMovies(data.results)) // 영화 데이터의 results 부분을 사용
    .catch((err) => console.error(err));
}

처음에 api를 가져와서 붙여놓은 상태로 콘솔을 확인해보면 여러 배열이 뜬다. 
그 중 result 부분이 내가 사용해야 될 영화의 정보들임!! 그 안에 보면 여러가지 정보들이 있는데
그 안에서 내가 원하는 부분만 선택해서 쓰면 되는것!

.then(response => console.log(response)) 
===> 이 부분을 
===> .then((data) => displayMovies(data.results)) 이렇게 바꾼다!

이 fetch안에는 여러가지 데이터들이 있는데 그 안에서 나는 displayMovies라는 함수를 만들어서 
수 많은 데이터중에 result라는 부분만 가져와서 쓸거다! 라는 식의 함수임
이제 displayMovies() 이걸 가져가서 영화 데이터가 필요한 부분에 갖다 쓸거임!!

 

---

 

TMDB에서 가져온 api를 붙여놓고 fetch부분을 fetchMovies라는 이름의 함수로 선언해준다. 

이제 카드리스트가 들어갈 부분의 js를 짜보자

// 영화 데이터를 이용해 카드를 만드는 함수

function displayMovie(movies){  
 
  const movieContainer = document.getElementById("movies-container");  
  // => movies-container라는 id값을 가진 <main>태그 지칭
  
   movies.forEach((movie)=>{  // => 각각의 영화 정보를 갖고있는 카드 만들기
   
    const card = document.createElement("div"); 
    card.className.add("movie-card"); 
    // => movie-card라는 클래스네임을 갖고있는 <div>태그 만들기
  
    card.innerHtml =`<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}"/>
       <h3>${movie.title}</h3>
       <p>개봉일: ${movie.release_date}</p>
       <p>평점: ${movie.vote_average}/10</p>`
    // => 각각의 카드 안에는 영화 정보가 들어간 html을 만들기
      
   movieContainer.appendChild(card)  
   // => movies-container라는 id값을 가진 부모 <main>태그에 새로 만든 자식 card를 갖다 붙이기
});
}

window.onload = fetchMovies;  // => 페이지가 로드되면 fetch로 묶인 영화 데이터 가져오기

 

페이지에 카드리스트가 잘 뜬것을 확인할 수 있다!!!!!!!!!!!!!!!!!!!!!! (쇼생크 탈출 포스터 = 내 모습)

꺄악!!!! 이제 카드리스트 css만 손보고 오늘은 끝내야지!!!!!!!

---

5. 카드 리스트가 잘 들어왔으니 예쁘게 css를 꾸며보쟈!!!!

먼저 헤더 부분을 꾸며봅시당

 

헤더에 그냥 영화 검색이라고 제목을 달아두니 재미가 없어서 영화 프로그램 로고를 따와서 이미지로 넣어줌!

 

요로코롬 css를 꾸며주면!!!

타-란-☆ 헤더부분 꾸미기 완료!-☆

북마크쪽에는 :hover를 줘서 커서를 올리면 버튼모양이 나타나도록 해줌!

 

 

카드 리스트 부분은 이렇게 css를 줬다

 

이런 모양의 카드리스트 완성!

처음엔 display: grid를 줬다가 뭔가 배치도 이상하고 웹페이지 사이즈에 맞춰 크기조절이 안되서 좀 애먹었는데 

display: flex; flex-wrap: wrap; 으로 해결!!!

flex-wrap: wrap의 속성을 이번에 알게 됐는데 <나열된 요소들의 총 넓이가 부모 넓이보다 커지면 자동으로 나열된 요소들이 아랫줄로 이동하는 속성>이였다!!

 

오늘은 여기까지!! 내일은 모달창 구현! 아자아자!!!

 

---

오늘의 회고,,

api 가져오는것도 오래걸리고, api 가져와서 카드리스트 부분을 자바스크립트로 만드는 부분은 더 오래걸렸다...

데이터를 생성하는 함수나 querySelector(), createElement() 이런것들이 아직 많이 낯설지만.. 우리 친해져보쟈..ㅎㅎ

몰라서 열심히 구글링도 해보고 챗지피티의 힘도 빌려봤지만 (그래서 내가 한거라는 확신이 들진 않지만ㅋㅋ) 어쨌든 나 혼자 해봤다는 경험이 넘넘 소즁-★

앞으로 다른거 구현할때 울면서 튜터님 찾아갈수도 있겠지만 그래도 이제는 나 혼자 할 수 있는데까지 해보고 도움을 요청할 수 있는 용기가 생겼다!! 오늘은 이것만으로도 충분!! 아직 갈길이 멀었지만 차근차근 해보자구!!!