TIL#9(영화 검색 사이트 검색 기능 구현)

오늘 한일

• 검색 기능 추가

검색창에 검색할 키워드를 입력후 엔터나 검색 버튼을 누르면 영화 제목에 해당 키워드가 포함 된 영화만 나오게 하였다.

검색한 키워드와 타이틀 모두 toLowerCase()를 통해 소문자로 변경후 includes로 포함하는지 확인을 한 다음 포함했을 때만 카드를 생성하였다.

위쪽 버튼을 누르면 해당 언어의 영화를 나오게 하였다.

각 버튼 클릭시 자신의 id를 매개변수로 하는 lanuage함수가 실행되게 하였다.

버튼을 클릭하면 해당 버튼의 id를 불러와 서버의 original_language와 비교후 같은 영화만 filter를 통해 저장한 후 해당 카드들만 생성하였다.

검색한 영화나 언어별 영화 카드를 생성하기 전에 remove_cards함수를 이용해 모든 카드를 지웠다.

 

커서가 검색창으로 이동하게 하는 함수

검색창에서 엔터키를 눌렀을 때 검색이 실행되게 하였다.

어려웠던 점

• 전체적인 틀을 짠 후에 기능을 구현한 것이 아닌 순서대로 하나씩 기능을 구현하다 보니 중복되는 코드도 있었고 기능을 추가 할 때 다른 기능이 안되는 등 여러가지 에러 사항이 발생하였다.(큰 틀을 생각하며 모든 기능을 구현할 것을 고려해 순서도를 그리고 그에 맞게 프로그래밍을 해야 좋을 것 같다.)
• jQuery를 사용하지 않고 Vanilla JS로 기능을 구현하다보니 제한사항이 많았다.(JS로 직접 기능을 구현하다보니 JS와 더욱 친해질 수 있었던 것 같다.)

오늘의 TIP

• document나 window객체는 브라우저 환경에서 사용하는 언어이기 때문에 VScode같은 로컬 환경에서는 에러가 난다.(브라우저에서 실행하면 에러없이 잘 돌아가는걸 볼 수 있다.)

VScode에서 컴파일 했을 때 나오는 에러