개인 숙제 검색구현

오전에 알고리즘 강의를 듣고 난 뒤 지금 검색기능을 구현하고 있습니다. 주말동안 구현을 못할까 두려워 열심히 찾아가며 구현했고, 주말에 쓴 TIL도 따로 있습니다.

이것저것 찾아본 결과 remove를 사용한다고 해서 사용을 해봤는데 지워지고 난뒤 값이 나오지 않았습니다.

//검색 버튼 클릭 시 이벤트
$serchBtn.onclick = function () {
    console.log($movieTitle.value);
    if (!$movieTitle.value) {
        $mycards.remove($movieCard);
        printMovie(); //영화들 출력
    }
}

웹페이지 결과에서는 아무것도 나오지 않고 console창에는 제가 fetch할때 넣은 콘솔값이 나오는 거 보니 들어가긴 하는데 모든 값을 다 지워서 아무것도 안나오는거 같습니다.

 

일단 clearCard함수를 따로 만들어서 버튼 클릭시 지워지고 새로 출력되는 거 같습니다. (아닐수도..)

//카드목록 다 지우기
let clearCard = function (){
    let parent = $mycards;
    while(parent.firstChild){
        parent.removeChild(parent.firstChild);
    }
}
//검색 버튼 클릭
$serchBtn.onclick = function () {
    console.log($movieTitle.value);
    checkCard($movieTitle.value);
};
//카드 체크
function checkCard(movietitle) {
    if(!movietitle){
        clearCard();
        printMovie();
        console.log("모든 영화 출력");
    }
}

 

그리고 검색하는 기능을 넣었습니다.

어떻게 넣었냐면, findCard라는 함수와 allCard라는 함수를 따로 만든 후 findCard함수에서 저 movieTitle값을 받아 find로 찾아서 그 값만 넣어 만들어줬고, allCard함수는 값이 없을때 모든 카드를 출력해주는 것입니다.

//카드목록 다 지우기
let clearCard = function (){
    let parent = $mycards;
    while(parent.firstChild){
        parent.removeChild(parent.firstChild);
    }
}
//카드 찾기
function findCard(movietitle) {
    fetchJson(url).then((data) => {
        let rows = data.results;
        console.log("rows : ", rows);
        let resultMovie;
        resultMovie = rows.find((value) => value.title === movietitle);
        console.log(resultMovie);
        let id = resultMovie['id'];
        let title = resultMovie['title'];
        let image = `https://www.themoviedb.org/t/p/w500/${resultMovie['poster_path']}`;
        let overView = resultMovie['overview'];
        let rating = resultMovie['vote_average'];
        
        newCard(id, title, image, overView, rating, $mycards).then((div) => {
            console.log(div);
        });
    })
}
//검색 버튼 클릭
$serchBtn.onclick = function () {
    console.log($movieTitle.value);
    checkCard($movieTitle.value);
};
//모든 카드 출력
function allCard(){
    fetchJson(url).then((data) => {
        let rows = data.results;

        rows.forEach((a) => {
            let id = a['id'];
            let title = a['title'];
            let image = `https://www.themoviedb.org/t/p/w500/${a['poster_path']}`;
            let overView = a['overview'];
            let rating = a['vote_average'];

            newCard(id, title, image, overView, rating, $mycards).then((div) => {
                console.log(div);
            });
        })
    });
}
//카드 체크
function checkCard(movietitle) {
    clearCard();
    if(!movietitle){
        printMovie = allCard();
        console.log("모든 영화 출력");
    }else {
        printMovie = findCard(movietitle);
        console.log("check");
    }
}

 

현재 The Godfather는 잘 나오는데, 다른 제목을 넣으면 잘 안나오고 있습니다.

오류난 것을 찾아봐야겠습니다. 찾아보니 제가 제목을 잘 못 쓴거였습니다.

모두 잘 나옵니다.

깃에 올리려는데 충돌이 일어나서 확인해보니 없는것과 바뀐것등이 부딪혀 일어났습니다.

충돌 해결 후 다시 커밋하려는데 pull이 안된다며 오류가나서 마저 다른 것들을 수정 후 다시한번 더 커밋을 하니 다행히 잘 됬습니다.

 

그리고 집중코딩시간에 매니저님이 부트스트랩은 안쓰는게 좋다고 하셔서 다시 수정해서 깃에 푸시헀습니다.

 

알고리즘 시간에 강사님이 여러 문제들을 접해보는게 좋다고 하셔서 프로그래머스 문제들을 풀어보았습니다. 일부러 만들어진 함수? 들을 쓰지않고 하려하니 머리가 복잡해졌습니다. 

 

그리고 추가기능을 구현하기 어렵다고 느껴져 계속 프로그래머스를 풀었지만 이러면 안될꺼 같아 기능을 이것저것 추가를 해봤습니다.

먼저 랜딩은 잘 몰라서 넘겼고, 소문자 대문자 구분없이 검색이 가능하게 했고, 엔터키를 쳐도 검색이 가능하게 구현했습니다.

//엔터키 입력시 검색
function fnEnterkey(){
    if(window.event.keyCode == 13){
        checkCard($movieTitle.value);
    }
}

하지만 아직 부분검색은 구현하지 못했습니다.. 제목을 똑같이 적어야 검색이 가능합니다.

 

시도는 하였으나 계속 아무것도 안나오다가 이번에는 나왔습니다. 하지만 모든 값이 나오진 않았습니다.

//검색한 영화제목 카드 찾기
function findCard(movietitle) {
    fetchJson(url).then((data) => {
        let rows = data.results;
        let resultMovie;
        // resultMovie = rows.find((value) =>{
        //     let str1 = (value.title).toUpperCase();
        //     let str2 = movietitle.toUpperCase();
        //     if(str1 === str2){
        //         return value.title;
        //     }
        // });
        let str1;
        let str2 = movietitle.toUpperCase();
        let count;
        rows.forEach((a) => {
            let t = a['title'];
            str1 = t.toUpperCase();
            count = str1.search(str2);
            console.log("count check : ",count);
            if(0 < count){
                resultMovie = t;
                console.log(resultMovie);
                let id = resultMovie['id'];
                let title = resultMovie['title'];
                let image = `https://www.themoviedb.org/t/p/w500/${resultMovie['poster_path']}`;
                let overView = resultMovie['overview'];
                let rating = resultMovie['vote_average'];
                
                newCard(id, title, image, overView, rating, $mycards).then((div) => {
                    
                });
            }
        })
    })
}

 

 

 

 

참고 자료

https://hianna.tistory.com/722

[Javascript] 자식 노드 모두 삭제하기

https://sevendays.tistory.com/47

[Javascript] Enter keycode 처리하기

https://gent.tistory.com/462

[JavaScript] 문자열 특정 문자 위치 찾기 (indexOf, search)