TIL 2023.05.30
오늘 공부 계획 및 공부한 내용📝
- 알고리즘 특강 🔺복습 필요...
- fetch 데이터 불러다 붙이기, 검색 기능 ㅇ
- 조원들이랑 코드 리뷰 ㅇ
문제🧐 / 해결과정⚒️
1) querySelectorAll로 데이터를 가져와 그 데이터에 addEventListener로
클릭이벤트를 주려고 했지만 작동을 하지 않았다.
문제의 그 코드👇🏻
document.querySelectorAll(".movie-card").addEventListener("click", function (event) {
alert("안녕");
});🤔 콘솔창을 확인하지 ddEventListener is not a function~ 과 같은 오류가 떠있었다.
처음에는 alert창 안에 쓴 코드가 틀렸나 싶었지만 그게 아니었다.
다른 블로그를 보니 대부분 애드이벤트리스터를 getElementById랑 많이 쓰던데
난 기능을 붙이려고 했던 div영역에 id값도 없고 잡을 영역이 하나가 아니었기에
비슷한 용도인 querySelectorAll를 사용해도 괜찮을 거라 판단했다.
오류를 검색해보다 이런 답변을 찾았다.
새로운 개념이 많아 파보기 시작했다..
처음에는 저 설명이 무조건 맞겠지 라는 전제하에 파기 시작했는데
파면 팔수록 뭔가 잘못된 것 같았다;;??
내가 공부한 바로는
querySelectorAll 메서드는 NodeList 객체를 반환하는데,
이는 HTMCollection과 다르게 NodeList.prototype.forEach 메서드를 사용할 수 있다.
그니까 나는 쿼리셀렉트올로 잡은 영역 하나하나 반복문 또는 forEach로 addEventListener를 다 적용할 수 있다는 말
querySelectorAll일때 addEventListener 적용 참고
addEventListener 작동오류 참고
getElementByIdquerySelector: 단일 Element 객체 반환getElementsByClassNamegetElementsByTagName
: 배열처럼 동작하는 HTMLCollection 객체 반환 (배열은 아님)querySelectorAll배열처럼 동작하는 NodeList 반환 (배열은 아님)
HTMLCollection과 NodeList 차이 참고
DOM 접근 메소드 참고
유튜브 코딩앙마 참고
📌 결과적으로 이벤트를 적용해줄 영역이 이미 temp로 선언되어 있는데
굳이 영역을 다시 잡을 필요가 있을까 판단되어(어차피 코드만 길어짐)
이렇게 temp에 바로 addEventListener를 적용해 클릭이벤트를 넣어줬다.
// class="movie-card"
const temp = document.createElement('div');
temp.className = 'movie-card';
temp.innerHTML = `<div class="img">
<img src="https://image.tmdb.org/t/p/w500${image}">
</div>
<div class="card-text">
<h3>${title}</h3>
<p>${overview}</p>
</br>
<h2>${vote}</h2>
</div>`;
document.querySelector('.card-list').append(temp);
temp.addEventListener("click", function (event) {
// ``변수나 특정한 값을 문자열 안에
alert(`영화 id: ${id}`);
});🤔 하지만 바로 봉착한 다음 문제 alert!
클릭 했을 때 fetch로 받은 각 영화의 Id값을 alert창으로 띄워줘야 하는데
""안에 영화 id: ${id} 썼더니 필요한 id데이터는 안 넣어지고 계속 id: ${id}만 출력됐다...
📌 위에 바로 백틱(``)을 써놓고는 그건 눈에 들어오지도 않고
대체 뭐가 문제인지 한참을 고민했다 ㅎ 표기법만 알고 그의 역할을 간과하고 있었던 것이다.
템플릿 리터럴(일명 백틱) :
ES6부터 새로 도입된 문자열 표기법
문자열 생성시 따옴표 대신, 사용문자와 변수를 함께 쓸 수 있는 도구
카드마다 바뀌는 Id값 즉 변수를 문자열에 넣으려면 ``이 필요했다! ""가 아니라!
느낀점✨
- 강의 들으면서 열심히 집어 넣었다고 이게 다 코드로 써지는 게 아니구나....
배운 내용을 풀어서 활용하려 하니 내 부족한 지식의 크기가 아주 확연히 드러난다 ㅠ
정말 어렵고 힘들긴 하지만 아둥바둥 어떻게 해서든 해쳐 나갈거다...!👊🏻
