23.05.31) 개인프로젝트 영화 검색 사이트 3-피드백 수정

튜터님께 이번 프로젝트를 진행하면서 내가 만든 코드에 이상은 없는지, 

또 수정할 사항이 있는지 여쭤봤는데 역시나! 오류가 있었다 헤헿..😅

검색기능을 할 떄 filter 메서드를 이용했는데 거의 뭐 이름만 필터고 기능을 forEach로 쓰고 있었지 뭐야,,?

 

❗튜터님께 받은 피드백

1. ⭐filter 메서드 수정하기

2. 페이지 크기 줄일 때도 카드 사이 여백 유지하기

3. 검색창 여백 주고 검색버튼 css 신경쓰기

4. html에 있는 인라인 스타일 css로 옮기기

5. html에 있는 필요없는 영화카드 div 삭제하기

6. css에서 class로 통일해주기

---

💻코드 수정하기

1. ⭐filter 메서드 오류 수정하기

 

👇잘못된 코드

//검색 (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");
      }
    });
  }

 

movieList를 선언해놓고 할당값은 주지도 않았다,, 꿔다놓은 보릿자루 마냥😢

열심히 movieTitle만 forEach처럼 돌리고 있었다..

코드를 여러번 다시 보면서 이 코드들이 어떤 원리로 실행되고 있는지 하나하나 주석 달면서

공부하고 또 복습했는데 오류를 찾지도 못한 채 이게 맞다 생각하고 있었다

과제 제출전에 튜터님께 여쭤보러 가길 너무 잘했다는 생각!! 

 

👇오늘 수정한 코드1

if (value) {
    const filteredCards = [...card].filter((i) => {
      const cardTitle = i
        .querySelector(".movie_title")
        .textContent.toLowerCase();
      return cardTitle.includes(value);
    });

    if (filteredCards.length === 0) {
      // 검색어와 일치하는 영화가 없을 경우 처리
      alert("일치하는 영화가 없습니다.");

일단 상수 이름에 들어간 movie때문에 다 비슷해서 헷갈리지 않기 위해 이름부터 각각 수정해줬다. 

filter 메서드는 조건에 맞는 값들만 가져오기 때문에 검색어와 일치하는 영화가 없을 경우 

일치하는 영화가 없다는 알럿 기능을 추가해줬다.

 

👇오늘 수정한 코드2

 [...card].forEach((i) => {
      if (filteredCards.includes(i)) {
        i.classList.remove("hide");
      } else {
        i.classList.add("hide");
      }
    });

다시 제자리를 찾은 forEach...ㅋㅋㅋㅋ 

 

2. 페이지 크기 줄일 때도 카드 사이 여백 유지하기

영화 카드가 그리드 형식으로 되어있기 때문에 grid-gap을 추가해서 페이지 크기가 최소 크기로 줄여도

카드 사이의 여백은 유지된다.

grid-gap: 20px;

 

3. 검색창 여백 주고 검색버튼 css 신경쓰기

 - input창 커서가 너무 앞에 붙어 여백을 주기 위해 padding값을 추가했다.

padding-left: 15px;

 - 기존의 검색 버튼은 문자 그대로 검색이라 적혀 있어서 검색 일러스트사진으로 대체했다

 

4. html에 있는 인라인 스타일 css로 옮기기

 - 헤더에 있던 스타일 css로 이동

body {
  background-color: rgb(10, 9, 25);
}

- input에 있던 스타일 

.serch input {
  width: 450px;
  height: 50px;
  font-size: 23px;
  margin-right: 5px;
  padding-left: 15px;
  border-radius: 10px;
}

 

5. html에 있는 필요없는 영화카드 div 삭제하기

 js파일에 있기 때문에 html에서 중복되는 div 삭제함

 

6. css에서 class로 통일해주기

 의미없이 id값으로 주었던 div들 class로 수정함

 

 

See the Pen FilmHunt by Treasure jin (@Treasure-jin) on CodePen.