개인과제

일단 과제에서 필수로 요구하는 사항들은 한 가지를 빼고 다 구현했다.
그 중 어려움을 겪은 상황들은 다음과 같다.

영화를 fetch를 통해 가져와 HTML을 만들때

이번 과제의 조건은 Jquery없이 순수 바닐라 자바스크립트만으로 개발하는 것이었다.
덕분에 저번에 겪었던 append 부분을 다시 경험했다.
Jquery.append를 하면 정상적으로 HTML이 작성되지만 element.append를 하면 태그들이 그대로 적히는 증상.
고민 하던 중 어차피 내가 만들어 놓은건 HTML. 그럼 innerHTML을 사용하면 잘 나오지 않을까?

           const append_front_card = document.createElement('div')           
           let front_temp_html =
                `<div class="card card_front">
                        <img src="https://image.tmdb.org/t/p/w200/${image}" class="movie_image" alt="...">
                        <div class="movie_title">${title}</div>
                        <div class="star">${star}</div>
                `</div>
            append_front_card.innerHTML = front_temp_html
            movie_card.append(append_front_card);

위와 같이 코드를 적으니 다행이 내가 원하는대로 작동해 주었다.

영화찾기

필수 요구사항 중 한 가지가 문자열을 조회하여 해당 문자열이 타이틀에 포함된 영화만 보여주는 것이었다.
처음에 html파일 중 body 상단에 script를 작성하였는데 querySelector가 동작하지 않았다.
원인은 HTML문서를 읽기 전에 javascript가 동작하려 하니 찾을 요소가 없는것...... 몇번 겪어본 에러인데 너무 마음이 급했던 것 같다.

그 후 입력한 문자열의 값을 받아오고 타이틀과 비교를 하는 부분을 개발하엿는데 막막했다.
막연히 'filter를 통해 타이틀명과 입력한 값을 비교하면 되겠지?'라고 생각을 했었고 팀원끼리 개발상황 공유 중에 '이렇게 하면 될 것 같다.' 라고 했었다.
그러자 팀원이 이야기해주길 'filter는 배열의 메서드다'......
깜빡했다....
우리가 ctrl+F를 쓰듯이 막연히 찾을 수 있을거라고 안일하게 생각했다.
'그럼 어떻게 해야 각 title에 접근할 수 있을까?'
'fetch로 데이터 가져올때 비교하면 되지 않나?'
라는 생각이 들었다.

 let search_title = wantSearch.toUpperCase()
 let searched_title = title.toUpperCase()
 	if (searched_title.search(search_title) !== -1) {     
    
    }       

fetch의 데이터를 forEach로 돌며 찾은 각 title 값과 입력된 값을 비교하여 문자열을 search하면 찾으면 그 문자열의 위치를 알려주고 없으면 -1을 반환한다.
그래서 -1이 아닐 경우만 HTML을 생성하는 방법으로 구현하였다.

내일 할 일

• 필수 요구 사항 중 하나인 배열 메서드 한 가지 더 사용하기
• preserve 3d