TIL 23.05.28

문제점

영화제목 검색시, 페이지 초기화가 제대로 되지 않는 문제점이 있었다. 검색된 제목은 나오는데 기존에 있었던 영화 목록에 계속 추가되는 바람에 보기가 불편했다. 

 

시도해본 것

// 영화 리스트 보여주기
function showMovieList(val) {
  movieList.innerHTML = "";
  // 이하생략
 }

영화 리스트 보여주는 함수 첫 부분에다 작성했었는데, 이건 val 값을 입력해볼 겨를도없이 빈 페이지가 나왔다.  영화 val 값에 따른 영화제목 검색 조건식에도 작성해 보았으나 똑같은 결과가 나왔다.

 

해결방안

function showSearchList(e) {
  movieList.innerHTML = "";
  e.preventDefault();
  const val = searchInput.value;
  showMovieList(val);
}

영화값을 입력하고 검색버튼을 누르는 타이밍에 값을 지우는게 나을 것 같아서, 새로 작성해 보았더니 영화 검색을 누르면 기존 값이 초기화 되고 showMovieList 함수가 실행되어 val 값에 걸맞는 영화가 나왔음.

 

알게된 것

기능이 제대로 구현되지 않는다면 여러 곳에 값을 넣어보고 동작시켜보자. 아직까지는 개인과제를 하는게 부담감이 없어서 좋다. 어제 저녁부터 본가에 내려와서 할게 없었던 바람에 코딩에 집중할 수 있었다. Vanila JS 기능 구현은 다 마쳤고, 남은시간동안은 CSS 작업 (텍스트 말줄임 등) 및 반응형으로 제작해 보려고 한다. 그리고 추가적으로 페이지네이션 스와이프 없이 구현해보고싶다.