String.prototype.includes(), String.toLowerCase()

오늘했던 것

• 부트캠프 개인 과제가 나왔다.
• 영화 정보를 가져와 UI를 그린다.
• 검색 form의 input을 입력하면 입력값을 포함한 데이터들로 UI가 다시 그려진다.

오늘의 문제

• 검색 기능이 작동을 안 한다.
• 그냥 소문자 'ad' 'as' 이런 것을 쓰면 필터 된 정보가 가져와지는데
  dark 라고 명확하게 쓰면 안 나온다. 날씨가 안 좋아서 그런가
• 코드를 확인하던 중 팀원분이 데이터에 있는 대/소문자 맞춰서 'Dark'라고
  써보라고 해서 써보니 나온다.😅

해결 방법

• String.includes()를 사용할 때는 찾는 문자열을 정확하게 설정해주자!

• 아래의 코드는 유저의 입력값을 받아 검색 조건과 일치하는 UI를 그리는 함수다.
  let filtered 부분을 보면 filter() 를 사용해서 데이터를 찾는데
  그 조건으로 el.title.includes(searchValue) 만 적어서 작동을 안 했었다.

• 이후 입력값과, 데이터의 제목에 모두 toLowerCase()를 적용하여
  대/소문자 관계 없이 일치하는 문자열을 찾을 수 있게 되었다!

  처음 코드 : (el.title.includes(searchValue))
  ⬇️ - toLowerCase() 적용 - ⬇️
  수정한 코드: (el.title.toLowerCase()).includes(searchValue.toLowerCase()))

// 검색 후 해당되는 데이터로 카드 UI 그리기
async function searchMovie(searchValue) {
  let data;
  const res = await fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
  data = await res.json();
  data = data.results;
  let filtered = data.filter(el => (el.title.toLowerCase()).includes(searchValue.toLowerCase()))
  movieContainer.innerHTML = ``;
  createCard(filtered)
}

해결!

• 'dark' 를 검색했을 때의 모습.