React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(26)

atomicdev 2024. 9. 22. 21:46

728x90

검색 기능 구현: 게시글 및 사용자 검색 기능

이번 강의에서는 게시글 및 사용자를 검색하는 기능을 구현하고, API에서 필터링된 데이터를 반환하는 방법을 다룹니다. 이를 통해 웹 애플리케이션에서 특정 키워드로 게시글과 사용자를 쉽게 찾을 수 있도록 합니다.

1. 검색 기능 구현 개요

검색 기능을 구현하기 위해서는 클라이언트에서 사용자가 입력한 검색어를 서버로 전달하고, 서버에서 해당 검색어에 맞는 결과를 필터링하여 반환해야 합니다.

검색 흐름

사용자가 검색어 입력: 사용자는 게시글 또는 사용자를 검색할 수 있는 입력 필드를 통해 검색어를 입력합니다.
서버로 요청 전송: 입력된 검색어가 서버로 전송됩니다.
API에서 필터링된 데이터 반환: 서버에서는 검색어와 일치하는 데이터를 데이터베이스에서 필터링하여 반환합니다.
결과 출력: 클라이언트는 서버로부터 받은 데이터를 화면에 출력합니다.

2. 게시글 검색 기능 구현

2.1 서버에서 게시글 검색 API 구현

게시글 제목 또는 내용에서 검색어를 기준으로 결과를 필터링하는 API를 구현합니다.

// server.js
app.get('/api/posts/search', (req, res) => {
  const searchTerm = req.query.q;

  const query = `
    SELECT * FROM posts 
    WHERE title LIKE ? OR content LIKE ?
  `;
  const searchQuery = `%${searchTerm}%`; // 검색어 양쪽에 %를 붙여서 부분 일치를 검색
  db.query(query, [searchQuery, searchQuery], (err, results) => {
    if (err) {
      return res.status(500).send('Error searching posts');
    }
    res.json(results);
  });
});

2.2 클라이언트에서 게시글 검색

React를 사용하여 검색어를 입력하고, 서버에서 검색 결과를 받아와 화면에 출력합니다.

// src/components/PostSearch.js
import React, { useState } from 'react';
import axios from 'axios';

function PostSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = (e) => {
    e.preventDefault();

    axios.get(`/api/posts/search?q=${searchTerm}`)
      .then((response) => {
        setResults(response.data);
      })
      .catch((error) => {
        console.error('Error fetching search results:', error);
      });
  };

  return (
    <div>
      <h2>게시글 검색</h2>
      <form onSubmit={handleSearch}>
        <input
          type="text"
          placeholder="검색어를 입력하세요"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <button type="submit">검색</button>
      </form>

      <ul>
        {results.map(post => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostSearch;

2.3 코드 설명

API 요청: 검색어를 GET 요청의 쿼리 파라미터로 서버에 전달합니다.
LIKE 연산자: SQL의 LIKE 연산자를 사용하여 검색어가 제목이나 내용에 포함된 게시글을 필터링합니다.
결과 출력: 서버로부터 받아온 게시글 데이터를 리스트로 화면에 렌더링합니다.

3. 사용자 검색 기능 구현

3.1 서버에서 사용자 검색 API 구현

사용자 이름을 기준으로 검색하는 API를 구현합니다.

// server.js
app.get('/api/users/search', (req, res) => {
  const searchTerm = req.query.q;

  const query = `
    SELECT * FROM users 
    WHERE username LIKE ?
  `;
  const searchQuery = `%${searchTerm}%`; // 부분 검색을 위해 % 사용
  db.query(query, [searchQuery], (err, results) => {
    if (err) {
      return res.status(500).send('Error searching users');
    }
    res.json(results);
  });
});

3.2 클라이언트에서 사용자 검색

React를 사용하여 사용자 이름을 검색하는 기능을 구현합니다.

// src/components/UserSearch.js
import React, { useState } from 'react';
import axios from 'axios';

function UserSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = (e) => {
    e.preventDefault();

    axios.get(`/api/users/search?q=${searchTerm}`)
      .then((response) => {
        setResults(response.data);
      })
      .catch((error) => {
        console.error('Error fetching search results:', error);
      });
  };

  return (
    <div>
      <h2>사용자 검색</h2>
      <form onSubmit={handleSearch}>
        <input
          type="text"
          placeholder="사용자 이름을 입력하세요"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <button type="submit">검색</button>
      </form>

      <ul>
        {results.map(user => (
          <li key={user.id}>
            {user.username}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserSearch;

4. 전체 검색 흐름 요약

사용자가 검색어 입력: 게시글 또는 사용자 검색창에 검색어를 입력합니다.
API 요청: 입력된 검색어는 서버로 전송되고, 해당 검색어에 맞는 데이터가 SQL 쿼리를 통해 필터링됩니다.
결과 반환 및 출력: 서버에서 필터링된 데이터를 클라이언트로 반환하고, 클라이언트는 이를 화면에 출력합니다.

5. 성능 최적화 팁

인덱스 사용: 검색 속도를 개선하기 위해 데이터베이스에서 검색 대상 필드(예: username, title)에 인덱스를 추가합니다.
검색어 유효성 검사: 클라이언트에서 빈 검색어가 입력되지 않도록 유효성 검사를 추가합니다.
페이징 처리: 검색 결과가 많을 경우, 결과를 한 번에 모두 보여주기보다는 페이징 또는 무한 스크롤을 사용하여 성능을 최적화할 수 있습니다.

결론

이번 강의에서는 게시글 및 사용자 검색 기능을 구현하여, 사용자가 입력한 검색어에 맞는 결과를 필터링하는 방법을 배웠습니다. SQL의 LIKE 연산자를 사용해 데이터베이스에서 데이터를 필터링하고, React를 통해 클라이언트에서 검색어를 입력하고 결과를 출력하는 과정을 익혔습니다.

728x90