자바스크립트 fetch API를 사용한 실시간 검색 기능 구현

10 Sep 2023

javascript

자바스크립트의 Fetch API는 웹 애플리케이션에서 서버와 비동기 통신을 할 수 있는 기능을 제공합니다. 이번 포스트에서는 Fetch API를 사용하여 실시간 검색 기능을 구현하는 방법을 알아보겠습니다.

Fetch API란?

Fetch API는 네트워크 리소스 (HTTP 요청을 통해 가져온 데이터 등)를 가져오기 위한 인터페이스입니다. 이 API를 사용하면 웹 애플리케이션에서 서버와 데이터를 주고받을 수 있습니다.

Fetch API는 fetch() 함수를 사용하여 HTTP 요청을 보냅니다. 이 함수는 Promise 객체를 반환하며, 비동기적으로 결과를 처리할 수 있습니다.

실시간 검색 기능 구현하기

HTML 구조 만들기

먼저, HTML 구조를 만들어야 합니다. 간단히 검색어 입력 필드와 검색 결과를 표시할 영역을 설정해보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>실시간 검색 기능 구현</title>
    <style>
        /* CSS 스타일링 */
    </style>
</head>
<body>
    <h1>실시간 검색 기능 구현</h1>
    <input id="searchInput" type="text" placeholder="검색어를 입력하세요">
    <ul id="searchResults"></ul>

    <script src="main.js"></script>
</body>
</html>

JavaScript 코드 작성하기

JavaScript로 검색 기능을 구현하기 위해 fetch() 함수를 사용하여 서버로 검색어를 보내고, 응답으로 받은 데이터를 처리합니다. 비동기 처리를 위해 async/await를 사용하겠습니다.

const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');

const fetchSearchResults = async (searchTerm) => {
    try {
        const response = await fetch(`/api/search?term=${searchTerm}`); // 검색 API 엔드포인트에 요청 보내기
        const data = await response.json(); // 응답 데이터를 JSON 형태로 파싱
        return data.results; // 검색 결과 반환
    } catch (error) {
        console.error('Error:', error);
    }
};

const displaySearchResults = (results) => {
    // 검색 결과 표시하기
    searchResults.innerHTML = '';
    results.forEach((result) => {
        const li = document.createElement('li');
        li.textContent = result;
        searchResults.appendChild(li);
    });
};

const handleSearch = async () => {
    const searchTerm = searchInput.value;
    if (searchTerm) {
        const results = await fetchSearchResults(searchTerm);
        displaySearchResults(results);
    } else {
        searchResults.innerHTML = '';
    }
};

searchInput.addEventListener('input', handleSearch);

서버 측 코드 작성하기

서버 측에서는 실제 검색 작업을 수행하고 결과를 반환하는 API 엔드포인트를 구현해야 합니다. 여기서는 가상의 데이터를 사용하여 검색 결과를 반환하는 예시를 보여드리겠습니다.

const express = require('express');
const app = express();

app.get('/api/search', (req, res) => {
    const searchTerm = req.query.term; // 검색어 가져오기
    // 실제 검색 작업 수행
    const results = searchFunction(searchTerm);
    res.json({ results }); // 검색 결과 반환
});

// 가상의 검색 함수
const searchFunction = (searchTerm) => {
    // 실제 검색 작업 수행하는 코드 작성
    // 예시로 간단한 전체 일치 검색 예시를 사용
    const data = ['apple', 'banana', 'orange', 'grape'];
    const filteredData = data.filter((item) =>
        item.toLowerCase().includes(searchTerm.toLowerCase())
    );
    return filteredData;
};

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

위의 예시 코드에서는 Express.js를 사용하여 서버를 구현하였습니다. '/api/search' 엔드포인트에서는 클라이언트가 보낸 검색어를 받아 실제 검색 작업을 수행한 후, 결과를 JSON 형태로 반환합니다. 여기서는 단순히 검색어와 일치하는 항목들을 반환하도록 하였습니다.

실제로 서버 코드를 실행하고, 웹 페이지에서 검색어를 입력하면 실시간으로 검색 결과가 표시될 것입니다.

마무리

이번 포스트에서는 자바스크립트 Fetch API를 사용하여 실시간 검색 기능을 구현하는 방법에 대해 알아보았습니다. Fetch API를 통해 비동기 통신을 수행하면서, 클라이언트와 서버 간의 데이터 교환을 간단하게 처리할 수 있습니다. 이를 응용하여 다양한 실시간 기능을 구현할 수 있을 것입니다.

더 복잡한 검색 로직이나 서버 구현을 위해서는 실제 데이터베이스와 연동하는 것이 필요할 수 있습니다. 이러한 경우에는 해당 데이터베이스의 API 또는 ORM을 사용하여 검색 작업을 수행하면 됩니다.

참고로, 위의 예시 코드는 단순히 개념을 이해하기 위한 것이며, 실제 프로덕션 환경에서 사용하기에 적합하지 않을 수 있습니다. 실제 구현 시에는 보안, 성능, 오류 처리 등을 고려하여 적절한 방법을 선택해야 합니다.