내일배움캠프 10일차 : Api 불러오기/검색 기능 구현

개인과제로 영화 검색 사이트 만들기를 진행했다. 아직 자바스크립트에 대한 기본이 제대로 잡혀있지 않고 개념과 매소드도 익숙지 않았기 때문에 온갖 인터넷을 뒤져 겨우 구현해 냈다. 아직 피드백 전이라 깔끔한 코드는 아니겠지만 우선 작동은 하기 때문에 다시 한번 내 것으로 만들기 위한 정리 작업을 하려고 한다.

 

카드 불러와서 화면에 나타내기

    ///카드 불러오기
    fetch(url, options)
        .then(response => response.json())
        .then(data => {
            let rows = data['results'];

            rows.forEach((a) => {
                let mvTitle = a['title'];
                let mvOverview = a['overview'];
                let mvPoster_path = a['poster_path'];
                let mvVote_average = a['vote_average'];
                let mvId = a['id'];

                let temp_html = `
                            <div onclick="hey(${mvId})" class="mvcard" id=${mvId}>
                             <div class="card h-100">
                            <img src="https://image.tmdb.org/t/p/w500${mvPoster_path}" class="card-img-top" alt="...">
                             <div class="card-body">
                                <h5 id="card-title" class="card-title" style="color: royalblue;">${mvTitle}</h5>
                                <p class="card-text">${mvOverview}</p>
                                <p class="card-text">rating: ${mvVote_average}</p>
                            </div>
                             </div>
                        </div>

                   `;
                cardList.insertAdjacentHTML('beforebegin', temp_html);
            });

        })
        .catch(err => console.error(err));

• Api를 통해 가져온 'results'로 묶여있는 데이터들을 rows라는 변수로 지정해 준다.
• rows요소를 forEach 화살표 함수를 통해 매개변수로 넣은 a값들을 하나씩 순회시킨다.
• 순회되어 얻어지는 내가 원하는 a객체의 값들을 let 변수를 통해 이름을 지정해 준다. (다른 객체 데이터 접근 법 - a.title)
• 얻어진 값을 카드형태로 나타낼 템플릿을 let을 통해 지정해준다. 백틱을 사용하였으며 '${}'을 통해 얻은 값을 넣어준다.
• 템플릿형태로 얻어진 값들을 cardList 요소 이전 위치에 insertAdjacentHTML을 통해 나타낸다.
  insertAdjacentHTML(position, text) - 새롭게 내가 입력하고 싶은 값을 어떤 위치에 놓을지를 설정

 

카드 클릭 시 ID 값 alert으로 나타내기

    let temp_html = `
    <div onclick="hey(${mvId})" class="mvcard" id=${mvId}>
                            
                            
              .
              .
              .
              
                            
    ///id값 가져오기
    function hey(str) {

        alert('ID: '+ str)
    }

• alert창을 띄우는 hey라는 함수를 만든다
  -> fetch 영역 밖으로 나가면 hey 함수에 넣을 id 값을 받아올 수 없다고 생각해 fetch 영역 안에 넣었을 때는 함수가 작동하지 않았었다. 팀원분께서 영역밖에 넣어야 한다며 설명을 해주셨는데 아직 이해가 가지 않아 피드백받으며 질문할 예정이다. this부터 호이스팅 등등 여러 개념이 뒤섞여있어 값이 어디까지 영향을 미치는지 이해가 필요하다.
• 카드로 영역을 지정해 주기 위해 html에서 카드 전체 영역에 onclick을 심어주었다.
• 변수로 id값을 넣어 id값이 뜰 수 있도록 만들어준다.

 

영화 제목으로 카드 서치 기능

    ///서치 기능
    document.addEventListener('DOMContentLoaded', () => {
        const payrollSearch = document.querySelector('#search');

        function mvSearch() {
            const payrollTitle = document.querySelectorAll('.card-title');
            const filterValue = payrollSearch.value.toLowerCase();

            for (let i = 0; i < payrollTitle.length; i++) {

                let rows = payrollTitle[i].textContent.toLowerCase();

                const id = payrollTitle[i].parentElement.parentElement.parentElement.id;

                if (rows.includes(filterValue)) {
                    document.getElementById(id).style.display = 'block';
                } else {
                    document.getElementById(id).style.display = 'none';
                }
            }
        }
        document.querySelector('#SearchBtn').addEventListener('click', mvSearch);
    })

• 우선 addEventListener을 통해서 DOM콘텐츠가 모두 로드된 후에 넣어준 검색 함수가 실행되도록 한다.
• payrollSearch라고 검색 input박스에 들어온 값을 이름 지어준다.
  id="search"로 지정해 querySelector로 입렵값을 선택해 준다.(id 지칭할 때 '#id값')
• mvSearch라는 이름의 영화 검색 함수를 만들어준다.
• 불러올 카드 제목을 payrollTitle이라고 이름 지어준다.
  querySelector를 통해 html에서 class="card-title"위치를 지칭해 영화제목 값을 불러온다.
• toLowerCase() 문을 통해 소문자화시킨 payrollSearch값을 filterValue라고 다시 이름 지어준다.
• for문을 통해 불러올 카드의 제목 길이만큼 돌린다.
• 불러올 카드 제목 또한 toLowerCase()를 통해 소문자화 시켜 rows로 이름 짓는다(입력값과 일치시키기 위해서.)
• parentElement를 통해 불러올 payrollTitle에서 id값이 있는 깊이에 도달해 id로 이름 짓는다. (위 코드에서는 parentElement를 세 번 실행했을 때 id값에 도달 가능한 구조)
• if문과 'includes'메서드를 이용해 input 입력 값이 rows(불러올 카드 제목) 배열 항목에 포함하고 있다는 조건을 만들어준다.
• true일 경우, getElementById(id)를 통해 id값이 가진 객체를 가져온다.
  .style.display를 'block'으로 넣어 화면에 보이게 한다.
• false일 경우, .style.display를 'none'으로 넣어 화면에 보이지 않도록 한다.
• querySelector을 통해 id="SearchBtn" 위치를 선택해 여기에 클릭 발생 시 mvSearch() 함수가 실행되도록 한다.

 

팀원분의 도움과 인터넷을 통해 만들어낸 코드이지만, 이렇게 복기하는 과정에서 코드 전체적 맥락과 함께 각 함수와 메서드의 쓰임을 이해할 수 있었다. 아직 궁금증이 가시지 않은 부분도 있지만 이건 튜터님께 여쭤보는 걸로 하고, 우선 일차 제출은 이렇게 마무리할 생각이다. 피드백받으면 전체적으로 손보고 CSS도 조금 더 신경 써볼 예정이다. 나중엔 혼자의 힘으로 코드를 짤 수 있는 날이 오길 바라며...