23.05.30)개인 프로젝트 영화 검색 사이트 만들기 2 - 검색 기능 구현

어제 불러온 API들을 이용해서 영화정보 카드 리스트 UI 구현을 했으면 받아온 전체 영화들 중

검색 input창에 영화 제목을 입력한 문자값이 포함되는 영화카드만 나올 수 있도록 해야한다.

오늘 만든 코드들을 꼼꼼하게 작성해서 나의 일지가 좋은 공부노트가 될 수 있도록 해야겠다.

 

 

👇"btn" 요소에 클릭 이벤트 리스너를 추가하여 버튼이 클릭되었을 때 실행되도록 설정

(버튼에 id값("btn") 지정해주고, 검색시 정보를 받아올 수 있도록 input에도 id값("input-name") 지정

document.getElementById("btn").addEventListener("click", () => {
  //input값 받아오기
  const inputText = document.getElementById("input-name"); 
  const value = inputText.value;
  const card = document.querySelectorAll(".card");

<코드설명>

1. getElementById("btn") : btn이라는 id를 가진 요소를 찾아옴. (버튼 엘리먼트를 선택하는 역할)

2. addEventListener : 선택한 버튼 요소에 클릭 이벤트 리스너를 추가. (버튼이 클릭되었을 때 실행될 콜백 함수를 설정)

2-1. 콜백 함수 : 클릭 이벤트가 발생했을 때 실행되는 함수.

       *화살표 함수 (() => { ... })를 사용하여 익명의 콜백 함수를 정의

3. inputText : 검색 입력 요소를 가져옴.  ( getElementById("input-name")를 사용하여 id가 "input-name"인 요소를 선택 )

4. value : 검색 입력 요소의 값을 가져옴. (inputText.value를 통해 해당 요소의 현재 입력된 값을 가져올 수 있다.)

5. card : querySelectorAll(".card")를 사용하여 클래스가 "card"인 모든 요소를 선택. (영화 카드 요소들을 모두 가져옴)

 

=>이 코드는 버튼이 클릭되었을 때 검색 입력 요소의 값을 가져오고, 영화 카드 요소들을 선택하는 역할이다.

    이후에 검색 기능을 구현하기 위해 이 값들을 활용할 수 있다.

 

👇검색 기능 구현

  //검색 (movie title) 기능
  if (value) {
    //카드의 객체를 배열로 만들어서 filter메서드 사용해서 데이터를 하나씩 가져옴
    const movieList = [...card].filter((i) => {
      const movieTitle = i
        .querySelector(".movie_title") //class="movie_title"를 가져옴
        .textContent.toLowerCase(); //movie_title의 text를 가져옴 + 제목의 텍스트를 소문자로 변환
      if (!movieTitle.includes(value)) {
        i.classList.add("hide");
      } else {
        i.classList.remove("hide");
      }
    });
  }

<코드설명>

1. if : 입력된 검색어(value)가 있는지 확인

2. [...card]으로 카드 요소들을 배열로 만든다

3. filter() 메서드를 사용하여 각 카드 요소를 순회한다.

4. querySelector 메서드를 사용하여 해당 카드 요소의 제목(.movie_title)을 선택

5. movie_title의 text를 가져온 후 소문자로 변환한다 (대소문자 상관없이 검색 가능하게)

6. if : 제목에 검색어가 포함되지 않는다면, 해당 카드 요소에 hide 클래스를 추가하여 숨김

7. else : 제목에 검색어가 포함된다면, 해당 카드 요소의 hide 클래스를 제거하여 보이게 함.

8.  filter 메서드를 통해 반환된 배열은 변수 movieList에 할당

 

*classList 메서드

 - add(String) :지정한 클래스 값을 추가한다.

 - remove(String) :지정한 클래스 값을 제거한다.

 

(classList 메서드는 티스토리 노루룽님 블로그 참조하였다 https://hyunjungchoi.tistory.com/70)

---

구글링과 팀원분들께 쉴 새 없이 질문하여 겨우 검색기능 구현에 성공했다..

vscode에도 각 코드마다 꼼꼼하게 주석처리해서 내가 제대로 이 코드를 이해하고 사용하고 있는지

계속해서 읽어보고 기억하려고 노력했다. 다음에 또 이러한 과제들이나 내가 수행해야할 일들이 있을 때

오늘 해본 코드들을 응용해서 쓸 수 있도록 꼼꼼하게 주석처리하는 습관을 들이는 중이다.

 

정말 혼자서 공부했다면 너무 어려워서 잘 해내지 못했을 것 같은데 많은 질문에도 친절하게

답변해주시고 나도 공부하며 내가 얻은 지식을 또 다른 팀원분들께 공유 할 수 있다는 사실 자체가 너무 기쁘다

나도 다른분들에게 조금이라도 도움이 될 수 있도록 더 열심히 공부해야겠다.. 아자자 화이팅!!!!