231023 TIL

오늘로서 개인 과제로 진행하던 프로젝트.

즉, TMDB API를 이용해 영화 검색 페이지를 구현하는 것을 끝마쳤다.

솔직히 전체 코드를 리뷰하고 다시금 정리한 후, 온전히 내것으로 만들기 위해선 아직 시간이 더 필요하다고 판단한다.

일단, 오늘은 영화 검색 페이지에 구현한 기능 중에서 '검색' 기능을 구현한 것에 대해 되짚어보려 한다.

주말에 막혀있다가 오늘 뚫은 부분이기도 하고, 과제에 있어서 중요한 기능이기도 하니까.

우선은

검색기능을 구현하는 것에 필요한 순서를 먼저 생각했다.

1. 기존에 영화를 불러와 카드리스트로 배열하던 것이 아닌, 검색에 쓰일 배열을 만들어야한다.
   -왜냐면 내가 구현한 함수는 카드리스트를 배열하기 위해 실행된 후에 다시 재사용 될 수 없었기 때문에.
2. 다음으로는 input에 유저의 value값을 넣고 검색버튼을 넣었을 때 올바르게 작동하게 만들기.
3. 2번의 작동이 확인되면, input의 value 값에 대한 조건식 붙이기.
4. 그리고 그 일련의 과정이 끝난 후, 웹페이지에 그려져있던 기존 카드리스트를 지우고, 1번에서 만든 배열에서 조건에 부합하는 value값을 뽑아와 새로이 카드 리스트를 만들기.

물론, 이 순서는 지극히 개인적으로 판단한 것이기에 100% 맞을 수는 없겠지만.
이렇게라도 순서를 생각하지 않으면 더더욱 막막할 것 같았다.
안 그래도 나는 아직 도구를 적절히 사용할 줄 모르니까.
최소한 누군가에게 물어도 저 순서대로 내 뜻을 전한다면, 질문을 받은 사람 역시 이해하기 난해하지는 않을 것이라는 생각이었다.

무튼.

그렇게 완성한 검색 버튼 동작 코드다.

function submit_btn() {
    document.querySelector('#submit_btn');
}

document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('.search_box');
    form.addEventListener('submit', function (event) {
        event.preventDefault();

        const input = document.querySelector('#input_search');
        const submit_btn = document.querySelector('#submit_btn');

        // document.querySelector('#submit_btn'); 이걸 사용할 때,
        // type = button은 내가 의도한 것과는 다르게 동작했다.

        const value = input.value.trim();

        if (value === '') {
            alert("검색어를 입력해주세요.");
            
        } else {
            searchMovies(value);
        }
        // input에 아무 것도 입력하지 않았을 시에 alert이 뜨는 걸 넣어볼까?
    })
})

도움을 주신 다른 조의 팀원분들께도 감사를 표하고..같은 팀원 분께도 무한한 감사를 드릴 뿐이다.

사실상 코드 리뷰?해석?을 하듯 조금 더 쓰고 싶은데 그것은 좀 더 정리한 뒤일 듯 하다.

그리고 다음 순서로.

이것이 그 검색 기능 구현의 코드다.

function searchMovies(value) {
    console.log('god');
    // searchMovies 가 value 값에 올바르게 작동하나 확인.

    fetch('https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=1', options)
        .then(response => response.json())
        .then(response => {
            const movies = response.results;
            // (영화에 대한 정보들의 객체)의 배열
            // 원하는 조건?
            // 영화의 제목 필요
            // 뭐하고 비교? 유저가 input한 value값하고
            // [1,5,6,7,87].filter(v => v > 5); filter 동작원리
            // => [6,7,87]
            const selectedMovies = movies.filter(movie => {
                // movies를 순회하면서
                // 참이 반환되면 그것을 빼와서 새로운 배열로 만든다
                const title = movie.title;
                const entitle = movie.original_title;
                // ko-KR로 받아온 title 은 검색이 됨.
                // 그러나 원문으로(ex:대부 = T) (ex:godfather = F) 검색하면 안 됨.
                // 이걸 해주기 위해선 어떻게 해야할까?
                // 자비스 도와줘.(자비스 : ????)

                return (
                    value === title ||
                    // 일단은 title과 똑같이 original_title을 설정해봤지만 아무 것도 뜨지않음...
                    // 뭐가 문제일까?
                    // 위의 searchMovies(value)를 console.log를 찍어 확인한 결과.
                    // input은 제대로 작동함.
                    // 근데 그 밑에 빈 칸이 덜렁 뜸. info 가 뜨는 것 같은데..이 값은 처음 확장 시 평가되었습니다. 그 이후로 변경되었을 수 있습니다. 라고 함.
                    // 분명 아까 진행할 때 봤던 문구 같은데..ㅠㅠ
                    // 중복이라서 그런걸까?
                    // 그런데 return 을 한 번 더 만든다고 해결될 것 같지는 않아.
                    // return 역시 중복일 테니까. 
                    // 근데 일단 const entitle, value === entitle 을 추가해도 기존 title 은 제대로 작동함. 이것마저 오류나거나 안 뜨지는 않음.
                    title.includes(value) ||
                    title.toLowerCase().includes(value.toLowerCase()) ||
                    title.toUpperCase().includes(value.toUpperCase()) ||
                    title.indexOf(value) !== -1 ||

                    value === entitle || 
                    entitle.includes(value) ||
                    entitle.toLowerCase().includes(value.toLowerCase()) ||
                    entitle.toUpperCase().includes(value.toUpperCase()) ||
                    entitle.indexOf(value) !== -1 
                );
                    // 아 해결했다.
                    // 근데 이건 내가 불성실하게 코드를 훑어본 탓이다.
                    // 앞에 떡하니 title 붙여서 비교 수식을 넣은 게 보이는데, entitle 에도 똑같이 해준다는 걸 생각을 못했다.
                    // value 값까지는 제대로 줬으나 비교할 수식이 없고, 검색된 것중 몇 개를 추려낼지(indexof) 입력을 안해줬으니 나올 턱이 있나.
            });
            console.log(selectedMovies);
            // selectedMovies 가 올바르게 작동하는지 확인.

            let temp_html = '';


            for (let i = 0; i < selectedMovies.length; i++) {
                const movie = selectedMovies[i];
                temp_html += `
                <div onclick="test(${movie.id})" class="movie-card" id="${movie.id}"><img class="posterimg" src="https://image.tmdb.org/t/p/w342/${movie.poster_path}" alt="poster">
                    <h2 class="movie-title">${movie.title}</h2>
                    <p class="overview">
                        ${movie.overview}
                    </p>
                    <h3>${movie.vote_average}</h3>
                </div>`;
            }

            // ${selectedMovies.id} 를 넣었었는데 오류가 떴었음.
            // selectedMovies[i]; 가 movie 라고 지정해줬는데 저렇게 넣으면 오류가 나지...
            // ${movie.id} 이렇게 수정하니 오류 수정됨.
            document.getElementById('movie-list').innerHTML = temp_html;

        });
}

주석도 달려있고 비효율적이고 그리 보기에 예쁜? 코드는 아니다.
하지만 지금으로서는 이것이 최선이고 이렇게 해야만 한다고 느껴진다.
나는 답을 내놓기 위해 단서를 추적해야만 하고, 답이 나왔다고 하더라도 다시금 역추적을 통해 이것이 어떻게 동작하고, 어떤 근거에 기반해 동작하는지 이해해야하니까.