개인과제

filter 메서드

filter 메서드를 사용하기 위해 고군분투하며 하루를 보냈다.
이미 검색하는 코드는 만들어 놨기 때문에 filter를 할 수 있는 배열만 만들면 됐다.
처음 든 생각은 제목이 담긴 title class에서 제목만 담아 배열을 만들어 filter를 통해 영화를 찾아보는 것이었다.

function searchMovie(e) {
    e.preventDefault();
    const wantAll = document.querySelectorAll('.movie_card')
    wantAll.forEach(a => {
        a.classList.remove('block')
    })
    const search_title = searchStr.value.toUpperCase()
    const title = document.querySelectorAll(".movie_title")
    const title_box = []

    title.forEach(e => {
        const searched_title = e.innerHTML.toUpperCase()
        title_box.push(searched_title)
    })
    const sellectMovie = title_box.filter((title_box) =>
    title_box.includes(search_title)
    )
    console.log(sellectMovie)
}

생각대로 됐다.
제목을 담은 배열이 생겼고 그 배열에서 찾고 싶은 영화 제목을 찾았다.
문제는 그것들이 모두 string 이었다.
이것들로는 내가 원하는 걸 할 수 없다.
걸러진 영화들을 제외하고는 class값을 지정하여 display: none을 통해 안 보이게 해야 했지만 단순한 문자열로는 parentNode의 class에 접근할 수 없었다.

부모를 찾아서...

parentNode를 포함한 배열을 만들려면 단순히 string으로 이루어진 제목만 담은 배열이 아닌 object가 담긴 배열을 만들어야 했다.
이번에는 querySelectorAll을 통해 title class를 담은 title을 콘솔에 찍어 봤다.

내가 원하는 정보들을 담은 nodeList가 출력 됐다.
자 그럼 filter를 사용해 보자.

하...
nodeList는 배열이 아니었다.
그럼 이제 nodeList를 배열로 만들어야 한다.
고민 끝에 빈 배열을 만들고 nodeList를 forEach를 이용하여 배열에 넣어볼까 했다.
이때 마침 게더타운에 있던 다른 대원분이 놀라운 방법을 제안해 주셨다.

유레카!!!

const title_box = Array.from(title)

Array.from()은 유사 배열(nodeList)을 배열로 만들어 배열 메서드를 사용할 수 있게 해준다!!!
굉장히 놀라웠다.
이후 미리 만들어 둔 코드들을 사용하여 검색 기능을 쉽게 구현했다.
이후 eventListener를 하나 더 추가하여 키보드 입력마다 검색을 할 수 있는 기능도 구현했고 검색하는 영화가 없을 경우 display : none 값을 카운팅 하여 'No movie data'를 보여주는 기능까지 추가했다.

한글버전...

헤더 부분에 토글 형식으로 한/영 번역해 주는 버튼을 만들고 싶었다.
데이터도 한글로 가져왔고 영어 js 파일을 주석 처리하고 한글 js 파일을 넣어서 하면 작동도 잘됐다.
하지만 둘을 같이 넣으면 꼬이기 시작했다.
일단 과제는 제출해둔 상태이고 내일 오전 중으로 한/영 번역 버튼 기능을 추가해 봐야겠다.