๋ฆฌ์กํธ์ Express๋ฅผ ์ฌ์ฉํด ๊ฐ๋จํ ๊ฒ์ ํํฐ๋ฅผ ๋ง๋ค์๋ค.
์ฟผ๋ฆฌ์คํธ๋ง์ ์ฌ์ฉํด ๊ฒ์์ด์ ๊ด๋ จ์๋ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ์์ ๋ถ๋ฌ์ค๋ ค๊ณ ํ๋ค.
์ฐธ๊ณ ๋ก ์ฌ์ฉํ ๋ฐ์ดํฐ์ ํ์ ์ ์๋์ ๊ฐ๋ค.
type User = {
id: number;
first_name: string;
last_name: string;
email: string;
gender: string;
}
const data: User[] = [...];
์ ์ฒด์ ์ธ ์ค์ต ํ๋ฆ์ ๋ค์๊ณผ ๊ฐ๋ค.
๋ฐ์ดํฐ๋ฅผ ์ด๋ป๊ฒ ํํฐ๋งํ ์ง ๊ณ ๋ฏผํ๋ค.
์
๋ ฅํ ๊ฒ์์ด๊ฐ 'first_name', 'last_name', 'email' ํ๋ ์ค ์ต์ ํ ๊ณณ์๋ผ๋ ํฌํจ๋๋ค๋ฉด ํด๋น ์ ์ ๋ฐ์ดํฐ๋ฅผ ์๋ตํ๋ ค ํ๋ค.
data.filter(
user =>
user.first_name.toLowerCase().includes(query) ||
user.first_name.toLowerCase().includes(query) ||
user.first_name.toLowerCase().includes(query)
)
๊ฐ์ฅ ๋จผ์ ๋ ์ค๋ฅธ ๋ฐฉ์์ ์์ ๊ฐ์๋ฐ ๋๋ฆ์ ๋ฌธ์ ์ ์ด ๋ณด์๋ค.
์ฐ์ ๊ฐ๋
์ฑ์ด ๋จ์ด์ก๊ณ , ํํฐ๋ง ์กฐ๊ฑด์ด ๋์ด๋๋ค๋ฉด ์ฝ๋์ ๊ธธ์ด๋ ๋์ด๋ ์ ๋ฐ์ ์์๋ค.
๋ณด๋ค ๋ ๊ฐ์ ๋ ํํฐ๋ง ๋ก์ง์ด ํ์ํ๋ค.
์ด๋ป๊ฒ ๊ฐ์ ํ ์ง ๊ณ ๋ฏผํ๋ ์ค some ๋ฐฐ์ด ๋ฉ์๋๊ฐ ๋ ์ฌ๋๋ค
'first_name', 'last_name', 'email' ๋ฌธ์์ด์ ๋ฐฐ์ด์ ์ ์ฅํ๊ณ some ๋ฉ์๋๋ฅผ ์ ์ฉํ๊ธฐ๋ก ํ๋ค.
// โ
App.js (ํด๋ผ์ด์ธํธ)
import { useEffect, useState } from "react";
import axios from "axios";
import "./App.css";
import Table from "./Table";
function App() {
const [query, setQuery] = useState("");
const [data, setData] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const res = await axios.get(`http://localhost:3333?q=${query}`);
setData(res.data);
};
if (query.length === 0 || query.length >= 2) fetchUsers();
}, [query]);
return (
<div className="app">
<input
type="text"
placeholder="Search..."
value={query}
onChange={e => setQuery(e.target.value)}
className="search"
/>
<Table data={data} />
</div>
);
}
export default App;
์๋ฒ ์ชฝ ์ฝ๋์ ํํฐ๋ง ๋ก์ง์ ์ ์ฉํด ํํฐ๋ง ๋ ์ ์ ๋ฐ์ดํฐ๋ฅผ ์๋ตํ๋ค.
// โ
index.js (์๋ฒ)
import express from "express";
import cors from "cors";
import { Users } from "./users.js";
const app = express();
app.use(cors());
app.get("/", (req, res) => {
const { q } = req.query;
const keys = ["first_name", "last_name", "email"];
const search = data =>
data.filter(item => keys.some(key => item[key].toLowerCase().includes(q)));
res.json(search(Users));
});
app.listen(3333, () => console.log("API is working!!"));
์
๋ ฅ๋ ๊ฒ์์ด๊ฐ ํฌํจ๋ ์ ์ ๋ฐ์ดํฐ๋ง ์ฑ๊ณต์ ์ผ๋ก ๋ ๋๋ง ๋๋ค.
๋ณด๋ค ๋ ์ต์ ํ ๋ ํํฐ๋ง ๋ก์ง์ ๋ํด์๋ ์ฐจ์ฐจ ๊ณต๋ถํด๋ณด์...โ๐ป