11일차(개인 프로젝트 - 영화 검색 사이트 / 문자열? -> 각 Element로 할당)
개인 프로젝트 발제 : 영화 검색 사이트 만들기
1. TMDB(The Movie DB)의 오픈 API를 가져와서 사용한다.
2. No Jquery 오직 순수 바닐라 js로만 영화리스트 조회 및 검색 ui를 구현하기.
3. css까지
기존에 공부하던 강의의 예제들을 사용하는 거였는데 두세가지 정도의 기능 구현이라 여러 문법들이 필요하지는 않았다.
나와있는 예시대로 db를 get으로 가져오면 크게 무리는 없었다.
가져온 api db의 제목, 내용 요약, 포스터 이미지, 평점을 보여줘야하며
해당하는 각 카드를 클릭하면 alert창이 띄워지면 되는 것이다.
이를 작업 후 gitHub에 업로드까지가 마무리다.
진행하면서 걸림돌들이 발생하였는데 웬만하면 차근차근 해결해 나가면서 쾌락을 느꼈지만,
두개정도 그렇지 못 한 상황이 있어서 이 두개를 서술하겠다.
js//
function getMovie(){
const opt = {
method : 'GET',
header: {
accept: 'application/json',
Authorization: 'Bearer
eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJiZWU3ZjQ1YmRjY2Y4NjRhMzZhOTI0OWI1YWMxZjE2ZCIsInN1YiI6IjY0NzU5MmU1OTI0Y2U2MDBkY2IyZTkxNiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.m49KWIFiHr2BXOcmipMXGN9FFkRpKu7lku7oB5Xkh18'
}
};
fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', opt)//, opt
.then(response => response.json())
.then(data => {
let lists = data.results
lists.forEach((a) => {
const img = 'https://image.tmdb.org/t/p/w500' + a['poster_path'];
const title = a['title'];
const va = a['vote_average'];
const overview = a['overview'];
const idA = a['id'];
let temp_html = `<div class = "poster">
<div>${img}</div>
<h2>${title}</h2>
<p>${overview}</p>
<h5>${va}</h5>
</div>`
document.getElementById('movieInfo').append(temp_html);
card.addEventListener('click', () =>{
alert("That Movie's ID is : " + idA + " , Thank you");
});
})
}
}
getMovie();
api를 json()으로 가져오고 이 data.results를 lists로 저장해주었다.
이를 forEach로 각각의 항목을 저장해주었다.또 이들을 temp_html로 각 선언된 항목들을 불러와서 입력하였고 준비된 자리에 불러서 넣어줬다.
// 여기까지 작성을 했었는데 콘솔에서는 아무 문제가 없는데 웹 화면에서는 계속해서 string으로만 출력 되었다.
하루종일 고민하다가 저녁 늦게 튜터님께 질문을 드리고 답을 얻어냈다.
답은 간단했다.
그냥 그대로 html 요소로만 보여지게 출력해달라고 써놔서 그런거였다.
let lists = data.results
lists.forEach((a) => {
const img = 'https://image.tmdb.org/t/p/w500' + a['poster_path'];
const title = a['title'];
const overview = a['overview'];
const va = a['vote_average'];
const overview = a['overview'];
const idA = a['id'];
const card = document.createElement('div');
const imgEle = document.createElement('img');
const titleEle = document.createElement('h2');
const vaEle = document.createElement('h5');
const explEle = document.createElement('p');
imgEle.src = img;
titleEle.textContent = title;
vaEle.textContent = va;
explEle.textContent = overview;
card.append(imgEle, titleEle, vaEle, explEle);
let temp_html = `<div class = "poster">
<div>${img}</div>
<h2>${title}</h2>
<p>${overview}</p>
<h5>${va}</h5>
</div>`
document.getElementById('movieInfo').append(card);
document.getElementById('movieInfo').append(temp_html);
card.addEventListener('click', () =>{
alert("That Movie's ID is : " + idA + " , Thank you");
});
})
}
}
getMovie();
애플그린 컬러가 추가된 부분이고
오렌지 컬러는 삭제되는 부분이다.
선언한 img, title, va, overview, idA 이들에게 각각의 createElement를 통해 요소들을 지정해서 만들어주고,
이들을 어떻게 보여줄건지 지정해주면 되는 것이였다.
지정해준 요소들을 textType은 .textContent / 이미지는 .src (source) 이런식으로 다시 선언을 해주고
card (div)에 append()로 넣어준다. 이때 들어가는 순서가 중요하다.
출력되어지길 바라는 순서대로 넣어줘야 웹에서 출력시에 원하는 방향대로 나오기 때문이다.
막 넣으면 출력 되어져서 그대로 나오게 된다. 나는 이미지 - 제목 - 평점 - 영화요약
순으로 넣었다.
이를 만들어놓은 html 자리에 넣어주기만 하면 끝난다.
document.getElementById('movieInfo') 이 위치에 append()를 이용하여 짜놓은 card를 입력해준다.
드디어 제자리에 나온다.
불러오는건 됐으니 검색 기능을 filter()를 사용해서 구현해보도록 하겠다.