영화 검색 사이트) TroubleShooting 1 : 검색 기능🎬

밍갱·2025년 1월 11일

PROJECTS

목록 보기

2/20

1. 문제 발생🤯

01. 영화 검색 기능 도전

fetch와 async/await를 어찌저찌 사용하여 영화 데이터를 불러오는데 성공했다! (이 내용은 추후에 다루도록 하겠다.) 그리고 호기롭게 도전한 다음 과제, 바로 영화 검색이었다. 미리 만들어둔 input 태그에 검색 키워드를 넣으면, input 값(제목 키워드)를 포함하는 영화 목록을 렌더링하는 로직을 세워보았다.

문제는 여기서 발생했다. '베놈 '을 검색 했더니 Popular 목록에만 있던 '베놈: 라스트 댄스 '만 렌더링이 되었다. 즉, 내가 불러온 Popular 영화 20개 내에서만 검색이 가능한 것... 검색하면 해당 영화들이 전부 렌더링 되도록 수정이 필요했다.

2. 원인 추론🧐

01. API 주소

답답한 마음에 검색 기능 구현을 완료한 동기를 찾아갔더니, 그 분이 검색용 API가 따로 있다는 사실을 알려주셨다! 그래서 검색 input이 들어오면 fetch하는 url을 검색용 API url로 바꿔 끼워주는 로직을 세울 필요가 있었다.

02. 튜터님의 TIP
기존 로직을 수정하고 다시 시도해보았지만, 코드가 꼬여버렸고 search 로직 자체가 아예 먹통이 되어버려서 결국 튜터님께 도움을 요청했다. 아래에 튜터님께서 알려주신 기존 로직의 문제점들을 정리해보았다.

초기 기본 세팅이 되도록 작성한 INIT 즉시실행함수 내에는 searchValue가 있을 수 없기 때문에(페이지가 로딩되자마자 검색창에 값이 있을 수 없다 ), 해당 로직 내에 searchMovie() 로직은 불필요하다.
따라서 검색용 API url로 갈아 끼워주는 로직( if문 )은 searchMovie() 내부로 들어가야 한다.

우선 searchMovie()내에 fetch되는 데이터는 popularUrl을 기반으로 설정되어 있으니 오류가 발생할 수 밖에 없다. (코드를 꼼꼼히 보아야한다!)
위에서 말한대로 검색용 API url로 갈아 끼워주는 로직( if문 )을 searchMovie()내에서 잘 넣어볼 것.

3. 해결 방안😇

01. url을 바꿔주는 if문의 위치 변경

우선 튜터님의 조언대로 INIT 즉시실행함수에서 searchMovie()와 관련 로직을 모두 덜어내었다.

그리고 searchValue가 들어오면 해당 키워드로 검색용 API url이 바뀌고, 해당 값에 접근이 되도록 searchMovie()를 수정했다. 다시 웹페이지로 돌아가보자!

01-1. searchInput이 안잡히는 문제 발생
결과는 실패🥲

console에서 확인을 해보니 urlDetial이 안잡힌다는 오류가 떴다. 아무래도 searchValue의 여부를 판단하기 위해 작성한 if문에 문제가 있는 것 같았다.

생각해보니 검색 키워드를 작성하고 실행될 함수라면 굳이 if문으로 url을 바꿔 끼워줄 필요가 없다고 판단되었다. 그래서 과감히 삭제 후 다시 웹페이지에서 검색을 시도 해보았다.

앗! 분명 검색창에 input 값('베놈' )을 넣었는데, 왜 input 값이 없을 때의 alert창이 뜨는가😨
console을 확인해보니 searchValue 자체가 안잡혔다. 'null'이나 'undefined'도 아닌 텅빈 console 값은 처음이라 결국 또 다시 튜터님께 도움을 요청할 수 밖에...

02. searchMovie 로직 대폭수정
로직 자체가 문제였다. 검색 로직은 검색 버튼을 클릭했을 때 실행이 되어야 하는데, 원래 로직은 함수가 실행되고 그 안에서 addEventListener()가 들어가있었다. 결국 로직을 대폭 수정해야했다.