개인프로젝트 3일차

오늘은 영화 검색 UI를 구현해 보았다. API로 받아온 영화들 중 영화 제목에 input창에 입력한 문자값이 포함되는 영화들만 나타나도록 하는 기능이다. 검색버튼을 클릭하면 실행되도록 한다.
다른 팀원분들과 함께한 코드리뷰에서 filter함수를 사용하신 분은 없으신 것 같아서 filter함수를 사용하여 한번 구현해보고 싶었다.(잘못된 길이었을까,,,? 해결했으니 됐다,, 나에게는 공부할 수 있는 좋은 시간이었다.)

중첩 for문 (이중 for문)에 대해 공부했는데 중첩 for문은 for문 안에 또 for문이 있는 형태를 말한다.

for(초기식1;조건식1;증감식1){
	반복실행문1;
    for(초기식2;조건식2;증감식2) {
    	반복실행문2;
    }
}

처음 for문은 다음 반복으로 넘어가기 위해서는 안쪽에 있는 수행할 문장들을 모두 마쳐야 한다.

먼저 영화의 제목을 도는 for문을 만들었고, 함수가 실행되면 모든 영화카드가 사라지게 된다. 그 다음 for문을 돌아 filter를 사용하여 찾는 문자열이 있으면 카드가 화면에 나타나도록 코드를 짜보았다.

문자열 내의 모든 문자를 대문자로 변경하기 위해 toUpperCase()를 사용했고 문자열에서 특정 문자의 위치를 찾기 위해서 indexOf()를 사용했다. indexOf 함수는 문자열에서 특정 문자열을 찾고, 검색된 문자열이 첫번째로 나타나는 위치 index를 리턴한다. 찾는 문자열이 없으면 -1을 리턴하므로 -1보다 큰 값을 리턴하면 문자열이 있다는 뜻이 된다.

검색버튼을 클릭했을 때 실행되도록 구현에 성공했다! 이것저것 잘 작동되는지 해보다가 입력값을 입력하고 검색버튼을 클릭하면 실행이 잘 되지만 enter를 누르면 함수호출이 되지 않는 것이 불편하게 느껴졌다. 그래서 enter로도 잘 작동할 수 있도록 해주었다.

<해결방법>
input태그의 파라미터로 onkeypress라는 파라미터가 있다. 자바스크립트에는 눌러진 키보드를 ASCII코드로 출력해주는 기능의 코드인 event.keyCode가 있다. "13"이 Enter를 가리킨다고 한다. 그래서 input태그에 라고 조건을 걸어주었다. return false는 refresh를 막아준다.

결과!!