moviechart ver.1 생각의 흐름

동기분과 대화를 나눴는데 바닐라 자바스크립트라는 주제가 있어서 어디서 베껴올 수도 없고 무에서 유를 창조하는 게 막막하게 느껴진다고 하셨다. 이전에 짧은 지식이지만 이 분과 프로그래머스 숙제 문제를 같이 푼 적이 있는데 그때 접근 방법이나 생각의 흐름을 공유했던 게 많은 도움이 된다고 하셨다. 그래서 부족하나마 나의 생각의 흐름을 공유한다. 내가 나중에 찾아볼 때도 좋을 것 같다. 시간이 지나면 뇌가 초기화 되는 편이다.

 

- 정보를 받아와서 검색 기능 구현하기

 

1. API에서 정보를 받아와야 내가 이 정보로 무언가를 할 수 있겠다는 생각이 들어서 우선 TMDB사이트에서 API를 따 왔다.

2. console.log(data)로 가져와야 하는 정보의 key값을 확인한다.

3. let title =  data[results][i][title] 등으로 각 데이터를 변수에 담는다.

4. i를 forEach 문을 이용해 간결하게 바꾼다.

5. 여기에서 중요한 기능은 search 이므로 search.js를 먼저 작성했다. (정석은 아닐 수도 있다.)

6. 검색에서 중요한 것은 검색창. input을 만들고 id 와 클래스를 search로 준다.

7. searchString이라는 변수를 만들어서 document.querySelector("#search").value 를 가져와 담는다.

8. fetch를 통해 가져온 title과 searchString 을 먼저 if문을 통해 비교한다. 같을 경우 스파르타피디아의 temp_html에 해당하는 temp 에 담긴 카드를 붙여 준다. 

document.getElementById("cards").insertAdjacentHTML('beforeend', temp);

9. index.js를 구현한다.

10. 구현하고 나니 forEach를 돌 때 위에 있던 카드들이 사라지지 않는다.

스파르타피디아 jQuery의 empty의 기능을 하는 

document.getElementById("cards").innerHTML = "" 를 forEach 위쪽에 넣어 준다.

 

- 이제 세부적인 부분들을 만들어 보자.

 

1. searchString과  title을 toUpperCase 하여 대문자로 바꾼다.

2. 아까의 if문 조건을 includes를 이용하여 개념을 바꿔 준다.

(입력한 문자가 갖고 있는 정보에 포함되면 포함되는 것들 모두 출력 가능하게)

3. searchString == false 즉, 입력값이 없는 경우에는 alert를 출력한다.

4. cards 자체에 onclick을 줘서 alert를 띄운다.

5. autofucus를 search input 에 넣어준다. (커서가 검색창에 오도록)

6. enter를 누르면 searchbtn 에 onclick이 발생하도록 코드를 써 준다.

7. 각 css js - html 과 onclick - function을 연결하지 않았다면 연결해 준다.

(이때 index.js는 onload 방식으로 불러온다.)