JavaScript 검색 기능 구현 튜토리얼 | 프로그래밍 학습

소개

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

👀 미리보기

search functionality demonstration

🎯 과제

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

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

🏆 성과

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

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

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── css
│   └── style.css
├── index.html
└── js
    └── index.js

여기서:

index.html은 메인 페이지입니다.
css는 프로젝트 스타일을 저장하기 위한 폴더입니다.
js/index.js는 코드를 추가해야 하는 JavaScript 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

검색 결과 렌더링

이 단계에서는 검색 결과를 표시하기 위해 render 메서드를 구현합니다.

js/index.js 파일에서 search 객체 내의 render 메서드를 찾습니다.
render 메서드 내에서 다음 코드를 추가하여 검색 결과에 대한 HTML 템플릿을 생성하고 listEl 요소를 업데이트합니다:

const template = this.data.reduce(
  (prev, next) => prev + `<li>${next.content}</li>`,
  ""
);
this.listEl.innerHTML = template;

reduce 메서드는 data 배열의 각 항목의 content 속성을 표시하는 HTML 템플릿 문자열을 생성하는 데 사용됩니다.

handleInput 메서드 구현

이 단계에서는 검색 기능을 처리하기 위해 handleInput 메서드를 구현합니다.

js/index.js 파일에서 search 객체 내의 handleInput 메서드를 찾습니다.
handleInput 메서드 내에서 다음 코드를 추가하여 입력 값을 기반으로 data 배열을 필터링한 다음 검색 결과를 렌더링합니다:

const value = e.target.value;
// Use timer to simulate ajax send request, data receive data
setTimeout(() => {
  this.data = !!value
    ? data.filter((val) => val.content.indexOf(value) !== -1)
    : [];
  this.render();
});

setTimeout 함수는 AJAX 요청과 같은 비동기 작업을 시뮬레이션하여 검색 데이터를 수신하는 데 사용됩니다.

입력 이벤트 바인딩

이 단계에서는 입력 상자에 input 이벤트를 바인딩하고 입력 상자의 값이 변경될 때 handleInput 메서드를 호출하는 방법을 배웁니다.

js/index.js 파일을 엽니다.
search 객체 내의 handle 함수를 찾습니다.
handle 함수 내에서 다음 코드를 추가하여 input 이벤트를 inputEl 요소에 바인딩하고 handleInput 메서드를 호출합니다:

this.inputEl.addEventListener("input", this.handleInput.bind(this));

bind(this) 부분은 handleInput 메서드 내부의 this가 search 객체 자체를 참조하도록 보장하는 데 중요합니다.

이 네 단계를 완료하면 js/index.js 파일은 이제 검색 기능의 완전한 구현을 갖게 되며, 프로젝트는 예상대로 작동해야 합니다. 최종 결과는 다음과 같아야 합니다: