비교적 순조로웠다. 기본 개념을 정리하고 다시 쌓아 올리는데에 집중하였다.
타 강의들보다 훨씬 자세하고 기본 개념의 설명을 중점으로 진행하였다.
그래도 다른 강의들을 많이 듣고 난 다음이라 그런지 몰라도 타 수강생들이 느끼는 것과는 다른거 같았다.
내가 필요한 기본에 대해서 꽤 많이 설명해주셨다.
그럼에도 불구하고 분명히 다 주워담고 있지 못 한다는 걸 알고 있다 몇 회독 이상 반복해야겠다는 생각이
매강의를 들을 때 마다 다짐되었다. 그럴 때 마다 check 해두었다.
5주차 강의를 다 듣고 애매했던 부분은 다시 돌아가서 두어번 듣고 돌아오고 했다.
이상한게도 다른 강의들이랑은 다르게,
다시 돌아와도 "뭔 소리지?", "어디서 부터 말씀하고 계신거지?" 했던 경우가 없이
바로 시작했었다는 것이다. 이전 같았으면 한 참을 찾아보다가 제 궤도로 다시 돌아갔을텐데 말이다.
js - 내가 놓치고 있던 개념들
:
이윽고 개인작업물 발제가 이뤄졌고,
과제물은 TMDB api를 가져와 영화 사이트를 꾸미는 것이였다.
사실상 API를 가져오는게 6할 이상이고 클릭시 iput 값에 입력되는 값에 따라 filter() 되는 기능까지가 9할
나머지 간격 조정 등 css가 전부였다.
function getMovie() {
const opt = {
method: 'GET',
headers: {
accept: 'application/json',
Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJiZWU3ZjQ1YmRjY2Y4NjRhMzZhOTI0OWI1YWMxZjE2ZCIsInN1YiI6IjY0NzU5MmU1OTI0Y2U2MDBkY2IyZTkxNiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.m49KWIFiHr2BXOcmipMXGN9FFkRpKu7lku7oB5Xkh18'
}
};
.then(response => response.json())
.then(data => {
let lists = data.results
// document.getElementById('movieInfo').empty();
lists.forEach((a) => {
const title = a['title'];
const overview = a['overview'];
const va = a['vote_average'];
// console.log(img);
let temp_html = `<div class = "poster">
<div>${img}</div>
<h2>${title}</h2>
<p>${overview}</p>
<h5>${va}</h5>
</div>`
document.getElementById('movieInfo').append(card);
})
})
// .catch(err => console.error(err));
}
getMovie();
시작은 api를 튜토리얼대로 가져와서 이렇게 작성하였다.
각자 값들이 콘솔에서 잘 출력되는 것을 확인 후에 각각 할당해주었다.
그런데 temp_html 부분이 string 그대로 출력되는 것이였다.
이번 과제는 제이쿼리를 사용을 자제하고 바닐라 자바스크립트로만 구현을 해서 생기는 문제인가 해서 열심히 찾아봤지만
그런 error는 아닌듯 보였고,
poster_path 값을 이미지로 보이게 경로를 붙여줬는데도 콘솔에서는 보이지만
화면에서는 여전히 문자열로만 출력되는 상황을 세시간 마주하다가 결국 튜터님에게 자문을 구했다.
튜터님께서는 temp_html의 내용은 말 그대로 html로 보여줘달라고 내가 pc에게 명령을 해서 그런거며,
function getMovie() {
const opt = {
method: 'GET',
headers: {
accept: 'application/json',
Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJiZWU3ZjQ1YmRjY2Y4NjRhMzZhOTI0OWI1YWMxZjE2ZCIsInN1YiI6IjY0NzU5MmU1OTI0Y2U2MDBkY2IyZTkxNiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.m49KWIFiHr2BXOcmipMXGN9FFkRpKu7lku7oB5Xkh18'
}
};
.then(response => response.json())
.then(data => {
let lists = data.results
// document.getElementById('movieInfo').empty();
lists.forEach((a) => {
const title = a['title'];
const overview = a['overview'];
const va = a['vote_average'];
// console.log(img);
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);
document.getElementById('movieInfo').append(card);
})
})
// .catch(err => console.error(err));
}
getMovie();
이 처럼 각 값들이 오는 태그를 따로 지정해주었고, img는 src
글자 태그는 .textContent로 지정해주었다. 각각 문자열로 변환해주고
card .append하여 각 항목들을 집어넣고 이를 movieInfo에 추가 하였다.
충분히 해결할 방법들이 있다고 생각해서 여러 방면으로 서치를 해봤지만 대부분 제이쿼리를 활용한 설명들이라서
풀다가 뒤로 가고를 반복했다.