FACTS(사실, 객관) : 내가 한 일
개인과제
영화 카드 생성이 되지 않음
한참을 구글링 했는데 creatElement가 아니라 createElement (오타)문제 였음
수정하니까 또 새로운 오류가 뜸
또 오타 addEventListner => addEventLitener
그리고 새로운 오류
이번엔 오타가 아님
서치하니 "DOM노드 객체로의 접근"에 관한 내용이 나오는데
이 내용은 5주차강의 내용이고 아직 4주차 숙제를 풀지 못해 5주차 강의를 못봤음!
문제풀고 강의를 마저 보고 해결하기엔 시간이 부족해서 열심히 서치
getElementByClassName(class)는 결과에 유사 배열 형태 (컬렉션)이며,
이 메서드의 반환값은 HTMLCollection이고 복수형태로 리턴된다고 함.
그래서 단일 요소를 기대하는 경우, 인덱스가 필요함
* 근데 내가 짠 코드엔 이미 movie_container가 한개뿐인데 왜 [0]을 지정해줘야하나?
=>이미 한개든 두개든 반환값은 HTMLCollection이고 이것은 배열같은 객체이므로
단일요소일지라도 반드시 [0]을 지정해야한다고 함!
서치 내용에 따라 [0]을 추가함
오류없이 정상적으로 표시됨!
근데 중간중간에 description이 없는 카드가 있어서 확인
overview: " "
받아온 데이터에 설명이 없었음
지금까지 한 것들:
TMDB에서 영화리스트 가져오기
카드 클릭하면 id가 alert로 출력
해야할 것:
검색기능
1. 인풋에 입력한 검색어를 받아옴
const searchKeyword = document.getElementById('search_keyword');
const searchBtn = document.getElementById('search_btn');
searchBtn.addEventListener('click', (e) => {
e.preventDefault();
const val = searchKeyword.value;
console.log(val);
})
2. 검색 버튼을 클릭하면 입력값이 영화 제목들 중에 있는지 없는지 확인
=> 여기서 부터 막힘
생각한 방법은
(2-1) 영화 카드를 객체로 title(제목)과 overview(설명)만 넣어서 표시되도록 하고
card[0] = {
title:
overview:
}
card[1] = {
title:
overview:
}
card[2] = {
title:
overview:
}
(2-2) 객체를 돌며 입력값이 있는지 확인(filter) 하는 것 인데..
(활용해서 option-select으로 제목만 검색 / 제목+내용 검색 기능도 할 수 있을 것 같다는 생각도)
3. 해당하는 영화카드만 출력
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
힌트로 주신 코드를 참고해 짜긴 했는데
같은 기능인데도 힌트코드에 없던 부분을 내가 짜면 더 추가해야 하는 부분이 있고
그 이유를 모르겠다 (해결)
=>
힌트 코드에는 getElementById를 사용해 id를 받아와서 인덱스를 지정해줄 필요가 없었는데
나는 id대신 class를 지정해두고 class를 받아오기위해 getElementByClassName을 사용해서 그런거였음
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
getElementByClassName(class)는 결과에 유사 배열 형태 (컬렉션)이며,
이 메서드의 반환값은 HTMLCollection이고 복수형태로 리턴됨
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지
참고링크: