프로젝트 의 JavaScript 스킬 트리

간단한 검색 기능 구현하기

초급

이 프로젝트에서는 JavaScript 를 사용하여 간단한 검색 기능을 구현하는 방법을 배웁니다. 입력 이벤트를 입력 상자에 바인딩하고, 검색 데이터를 처리하며, 검색 결과를 표시하는 방법을 익히게 됩니다.

javascriptweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

이 프로젝트에서는 JavaScript 를 사용하여 간단한 검색 기능을 구현하는 방법을 배우게 됩니다. 입력 이벤트를 입력 상자에 바인딩하고, 검색 데이터를 처리하며, 검색 결과를 표시하는 방법을 배우게 됩니다.

👀 미리보기

search functionality demonstration

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

  • input 이벤트를 입력 상자에 바인딩하는 방법
  • 검색 데이터를 필터링하기 위해 handleInput 메서드를 구현하는 방법
  • 검색 결과를 목록으로 렌더링하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

  • addEventListener 메서드를 사용하여 이벤트를 바인딩합니다.
  • 조건을 기반으로 배열을 필터링하기 위해 filter 메서드를 사용합니다.
  • DOM 을 조작하여 검색 결과를 업데이트합니다.

강사

labby
Labby
Labby is the LabEx teacher.