[내배캠 TIL ] 3주차 목요일

드디어 개인과제를 완료하였다. 아직 기능적으로는 부족한 부분이 많지만 팀원분들과 튜터님들을 통해 도움을 받으며 완성하였다. 사실 과제완성보다 더 중요한것은 내가 하고자 하는 것들을 활용할줄 알고 다음에도 할수 있게 머리에 저장을 해야하는데 아직까지도 잘 모르겠다. 프로그래밍이란게 휘발성이 강한것 같아서 게을리하지않고 문법부터 차근차근 정리해야할 필요성을 뼈저리게 느꼈다.

그전까지는 index값을 불러오고 영화들을 누르면 각각의 id값을

addEventListener

을 통해 alert를 띄우는것 까지는 했는데, 오늘은 검색기능과 검색을 할때 대소문자 구분없이 검색을 해도 영화가 나오는 기능을 추가하였다.

 

1. 먼저 검색기능을 추가하였는데

function movieSearch() {

        const options = {

          method: "GET",

          headers: {

            accept: "application/json",

            Authorization:

              "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxMTcwNjllNmQ1NDhkOTdhMjE1NjJkYTk3NTBlNGUzOSIsInN1YiI6IjY0NzA4N2RhNzI2ZmIxMDBjMmU1Yzc5NSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.LyK-QpDwY5ZbktBvuu0TNB15xAgXZ80iQmMAmOURM9s",

          },

        };

        fetch(

          "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1",

          options

        )

          .then((response) => response.json())

          .then((data) => {

            console.log(data["results"]);

            let rows = data["results"];

            let temp_html;

            var input = document.getElementById("search-input").value;

            let filteredRows = rows.filter((row) => row.title.includes(input));

            //input 태그의 id값의 이름 search-input를 넣어서 검색기능을 넣는다.

            console.log(filteredRows);

이렇게 함수를 선언하고 함수명을 movieSearch로 지정하였다. 그리고 api를 받고 fetch를 통해 전달된 값들이 json형식으로 바꿔 then((data) => {

아래의 값으로 들어온다.

 getElementById 를 통해서 아래와 같이 input 태그안에 id값의 "search-input" 을 넣어주고 

 <input

          type="text"

          id="search-input"

          placeholder="영화 제목을 검색하세요!"

        />

그런 다음에는 버튼을 눌렸을때 어떤 것을 호출받아야 할지 정해야 하기때문에 

 <button onclick="movieSearch()" type="button" class="btn btn-dark">

버튼태그를 만들어서 위에 만든 함수이름(movieSearch)을 넣어준다.

이렇게 하면 영화검색기능은 끝났고 대소문자 전환을 하는 코드는 

 text = data;

            var string = string.toUpperCase(text);

            console.log(string);

data를  text에 담고 toUpperCase안에 text 를 담아 호출하여 콘솔에 잘 찍히는지 확인을 하면된다.

 

오늘 하면서 새롭게 알게된 내용을 글로써 설명하면서 다시한번 상기됐고 지금은 어떻게 로직이 움직이고 어떻게 코드를 짜야할지 아주 미세하게나마 감이 오는것 같다. 이 감을 잃지 않으려 매일매일 코드를 익숙할때까지 써보며 공부를 해야겠다.... ++++ 그리고 오래해야하다보니 체력관리도 틈틈히 잘 해야겠다는 생각이 든다.