개인과제 TMDB 영화 사이트

카드 ui 구현

1. TMDB에서 데이터 긁어오기

• url을 변수에 넣어서 인자로 넣고 깔끔하게 수정
• 데이터를 가져오는 fetch를 함수로 묶어 showMovies로 호출
• 첫번째 then(response)는 json객체로 데이터를 반환
• 두번째 then(response)는 데이터를 가져온 함수
• response안에 results 배열의 형태로 영화의 정보들이 담겨있는 것을 콘솔로 확인
• response.result를 moviesApi함수에 인자 값으로 선언
• 그럼 자동으로 showMovies가 실행되면서 moviesApi가 실행됨.

2. 가져온 데이터의 원하는 요소 추출

• moviesApi가 실행 되면서 인자값(response)이 코드 내부에 선언 되어 있는게 아닌 외부 api데이터를 가져오는 것이기 때문에 response를 줌. 그래야 reponse 데이터 내부에서 데이터를 찾을 수 있다.
• 어떻게 하면 원하는 배열의 원하는 요소들을 뽑아 올 수 있을까 고민 중 반복문으로 돌면서 각각 index의 요소를 뽑으면 되겠다고 생각.=> for문

3. 뽑아온 각각 데이터를 카드에 붙이기

• 이전에 가져온 cardList에 HTML 붙이기. inner HTMl로 했으나 오류가 발생. 이유는 알아 볼 예정.
• 또 다른 방법 , insertAdjacentHTML( ' 위치 ', HTML) 발견 이 메서드로 html을 어느 위치에 놓을 건지 선택 가능 위치는 총 4가지 (beforebegin , afterbegin , beforeend , afterend) 처음부터 요소이전 , 요소 바로 안 자식 , 요소안에 마지막 자식, 요소 이후 이다.

  insertAdjacentHTML( ' 위치 ', HTML )

카드 클릭시 alert창(id값) 구현

1.첫 로직의 실패

단순하게 temp_html을 a태그로 감싸고 a태그에 이벤트리스너를 주고 alert를 실행하게 하면 된다고 생각을 했다. 하지만 그러려면 많은 것 들이 필요했다. a태그에 따로 id값을 줘야하고 data도 주고 반복문을 돌리고 등등 그러다 어차피 html로 붙이는 거니 html 자체에 click을 주면 되지않을까? 라는 아이디어가 생각남.

2.card를 a태그로 감싸고 onclick주기

• a태그를 card 전체에 감싸고 onclick으로 alert창을 띄움
• html자체에서 click을 주는거라 따로 해줘야 할 처리는 없지만 만약 JS로 a태그에 이벤트를 주려면 HTML a태그 자체에도 기본 값으로 클릭이벤트가 활성화가 되어 있기때문에 preventDefault( )를 해주어야 JS에서 만 클릭이 가능하게 됨.

  preventDefault( )

검색 기능 구현

1. 검색창(input-form)의 입력 값을 가져오기

• 검색버튼 (inputformbtn)을 가져와 click이벤트를 주고 click 되면 검색창의 input 데이터를 가져옴.

2. input값과 title을 대조하기 위해 title값 가져오기

• 위의 html을 cards에 담음 .col은 개수가 많기 때문에 쿼리셀렉터All.
• card가 20개니까 20개의 title을 다 뽑는다 => 반복문 for
• cards[ i ]를 콘솔로 보니 title의 부모들이 많은 것을 확인. 자식요소에 접근하기위해 .childNodes[ ] 사용. 하나하나 콘솔 찍어보며 title 까지 접근
• title에 접근하고 .textContent로 텍스트만 추출

  .childNodes[ ]
  .textContent

3. 추출한 title값과 input값을 대조해 같으면 나머지 요소들을 display none으로 가리기

• title값과 inputform의 값이 다르면 카드들의 display를 none으로 한다. 그게 아니고 같다면 block으로 나타낸다.
• includes( )를 사용하여 값의 한글자만 있어도 찾을 수 있게 함.
• card를 콘솔로 보고 display 기본 값이 뭐로 설정 되어 있는지 확인.
• block으로 되어 있는거 확인 후 나타낼때 block 으로 설정.

  includes( )

++

input 창을 form으로 감싸면 엔터키 입력시 검색이 자동으로 실행됨,
autofocus를 넣으면 페이지 로딩시 자동으로 검색창에 커서가 감.

preventDefault();

input 창을 form으로 감싸면 기본적으로 엔터키 입력시 새로고침이 발생하기 때문에 preventDefault( )로 기본 동작을 막아줘야 한다.