TIL 23.05.31

문제점

개인프로젝트 중 영화목록 로드시, 함수가 재실행되면서 페이지 새로고침 효과가 나타나는데 정확히 어떤 원리로 되는것인지 알고싶었음.

같은 조원분께서 본인도 그렇게 만들고 싶다고 여쭤봐서 내 코드를 분석하여 원인을 찾아보기로 하였다.

 

시도해본것

showMovieList("");

나의 경우, 영화 리스트를 보여주는 함수를 처음에 실행하고

if (title.toLowerCase().includes(val.toLowerCase()))

이후 if문을 사용하여 해당 값이 포함된 영화제목의 영화를 보여주는 원리이며 이후 영화 검색을 할 때,

function showSearchList(e) {
  movieList.innerHTML = ""; // 빈 여백값으로 만듬
  e.preventDefault(); // 브라우저의 기본동작 제한, 폼 제출시 페이지가 새로고침 되는 것을 막음
  const val = searchInput.value;
  showMovieList(val);
}

검색 버튼을 누름과 동시에 빈 여백값으로 만든 후에 다시 showMovieList 함수를 실행한다.

다른 조원분의 경우, 이런 방식이 아니라 함수 전체를 불러온 후, 함수를 다시 실행하는 것이 아닌 filter 를 사용하여 해당값만 보여주는 원리로 새로고침 효과가 나타나지 않고 바로 검색값을 보여준다고 하였음.

 

해결방안

코드를 참고하여 showMovieList 함수에 값을 넣고, 이후 그 안에있는 if 문에서 영화제목을 거른뒤에 DOM 요소를 적용하면 이와 같이 새로고침 효과가 나타난다.

 

알게된것

새로고침 효과가 난다면 e.preventDefault(); 가 소용 없는 것이 아닌가? 싶어서 재차 확인을 해보았는데, 브라우저의 기본동작인 폼 제출시 페이지가 새로고침 되는 효과는 함수가 적용된 것과 다르게 나타났음. 따라서 함수부분 (영화리스트)만 깜빡 거리는 효과가 발생하고 페이지가 새로고침 되는 것은 아니었다. 또한 같은 기능을 구현하더라도, 이렇게 작은 부분에서  차이가 날 수 있구나 하는 생각이 들었음. 조원분이 눈썰미가 엄청 좋다고 생각했다. 이런 사소한 부분까지 놓치지 않고 어떤 원리로 동작하는지 생각해볼 좋은 기회가 되었다.