과제
1. 영화정보 카드 리스트 UI 구현
2. 영화 id 를 나타내는 alert 창 (ing)
1.
부트스트랩 카드를 가져와 html 골격을 구성함
tmdb에서 영화정보를 가져옴
스파르타피디아 jquery 골격을 가져와 바닐라 js 문법으로 바꿔줌
listing 함수 안에 fetch를 받아온 뒤 .then(이곳에서 카드 붙여주는 함수 실행)
temp_html을 붙이고 함수를 실행하니 html 코드 자체가 웹에 붙음
카드 붙이려고 하루종일 머리를 싸맸다..
-해결과정
cardBox.insertAdjacentHTML('beforeend', temp_html);바닐라는 append로 하면 한개만 붙고 연속 붙이기가 안된다고 한다
위와 같이 .insertAdjacentHTML 메서드와 beforeend 을 사용하고 함수를 실행하니 해결!!
이걸 질문하지 않고 해결하다니... 캠프 들어와서 처음있는일이다.. 눈물의 홍수ㅠ
2.
바닐라 js 웹 만들기 강의를 찾아봤다
alert창 띄우는 함수를 먼저 선언하고
document.querySelectorAll() 메서드를 활용해서 카드를 선별하고
카드 선별한 배열을 돌면서
addEventListener 메서드를 통해 클릭하면 alert 띄우는 함수를 호출하도록 코드를 짰다.
function idAlert() {
alert(`영화id: ${id}`);
}
const buttons = document.querySelectorAll(".col");
for(const button of buttons) {
button.addEventListener("click", idAlert);
}결론은 안됨...
카드 리스트 구현하기 전에 html 골격의 col을 가져와서 했을때는
잘 작동해서 카드만 붙이면 되겠다 했더니
웬걸 새로 붙은 카드에는 먹ㅋ통ㅋ
잘시간이다.. 내일 다시 해봐야겠다
