[Express] GET 요청으로 유저 검색 기능 구현하는 깔끔한 방법(w. React)

[React] 실시간 검색 - debouncing 기능 구현하기

[React] 실시간 검색 - debouncing 기능 구현하기

먼저 읽고 오면 좋은 글!

🚩소개

안녕하세요! 대학생 개발자 주이어입니다!

오늘은 GET 요청을 이용하여 유저 검색 기능을 구현하는 방법에 대해서 정리해보려고 합니다.

GET 요청을 보낼 프론트엔드는 React를 이용하여 만들어 주었습니다.

---

⚙️ 클라이언트에서 유저 아이디 보내기

React에서는 보통 axios.get()을 활용해서 데이터를 요청합니다. 아래는 검색창에 input을 입력했을 때, 서버에 검색어를 보내느 코드입니다.

useEffect(() => {
  const delayDebouce = setTimeout(() => {
    if (input.trim() !== "") {
      axios.get(`http://localhost:5000/searchuser/${input}`).then((res) => {
        setResults(res.data);
      });
    } else {
      setResults([]);
    }
  }, 300);
  return () => clearTimeout(delayDebouce);
}, [input]);

코드를 간단하게 설명하자면, input 값이 바뀔 경우 서버에 input 값을 보내서 데이터를 받아오라는 코드입니다.
즉, 검색 창에 입력한 유저 아이디가 바뀔 경우 새로 데이터를 받아오게 되는 것입니다.
(위 코드는 debouncing 기능이 사용된 코드인데.. 자세한 설명은 글 상단에 있는 글을 읽어주시면 좋을 것 같습니다.)

서버에서 데이터를 받아주기 전에 데이터를 보내는 2가지 방식에 대해서 이해해야 할 필요가 있습니다.
밑에는 그 2가지 방식에 대한 설명입니다.

1️⃣ URL Path 방식 (params로 보내기)

axios.get(`http://localhost:5000/searchuser/${input}`);

첫 번째 방법은 위 코드처럼 값을 경로에 직접 포함시키는 방법입니다.

이걸 URL path 방식 또는 params 방식 이라고 부릅니다.

axios.get(`http://localhost:5000/searchuser/${input}/${userId}`);

값을 여러개 보내고 싶을 때는 위와 같이 여러개 적어주시면 가능합니다.

2️⃣ Query String 방식 (?key=value 형식)

axios.get(`http://localhost:5000/searchuser?input=${input}&userId=${userId}`);

두 번째 방법은 경로 뒤에 ?를 붙여, key = value 형식으로 데이터를 넘기는 방법입니다.

여러 값을 보낼 때는 &로 값을 이어주시면 됩니다. 

이건 Query String 방식이라고 부릅니다.

728x90

---

🛠 검색 결과 보내주기 (Express)

✅ URL Path 방식

app.get("/searchuser/:query", async (req, res) => {
  const search = req.params.query;
  const query = "SELECT * FROM user_profile WHERE userId LIKE ?";
  try {
    const [result] = await db.execute(query, [`${search}%`]);
    res.json(result);
  } catch (err) {
    res.json({ message: err });
  }
});

 

params 데이터를 받기 위해서는 위와 같이 경로에 추가로 /:query 를 입력해주어야 합니다.
그 후 req.params.query로 원하는 데이터를 받아올 수 있습니다.
값이 여러 개라면 /:input/:userId 와 같은 형식으로 받아올 수 있습니다.

 

이렇게 값을 받아왔다면, 이제 받아온 값을 기준으로 유저를 검색해서 클라이언트에 보내주어야 합니다.

query문을 보시면 user_profile 테이블에서 userId 값을 기준으로 값을 탐색하시는 것을 알 수 있고,
userId에 SQL Injection을 사용해서 받아온 값을 넣어주는 것을 알 수 있습니다.

 

최종적으로, 검색한 결과를 res.json으로 클라이언트에서 보내주었습니다.

✅ Query String 방식

app.get("/searchuser", (req, res) => {
  const input = req.query.input;
  const userId = req.query.userId;
  // ... 처리
});

URL path가 아닌 Query String 방식으로 데이터를 받을 경우, 위와 같이 그냥 경로만 적어준 후, req.query.input과 같은 형식으로 바로 데이터를 받아올 수 있습니다. 그 후 처리하는 과정은 URL path 방식과 똑같습니다.

---

💡 URL path VS Query String

구분	URL path	Query String
직관성	간결함	길어질 수 있음
유연성	값이 고정됨	선택적 전달 가능
RESTful API 적합도	좋음	보통
예시	/userId/input	/userId?input=data

• 간단한 검색이나  id 기반 요청은 URL path
• 필터링, 정렬, 옵션 등 복잡한 기능과 같이 사용할 때는 Query String 유리

---

😊  마무리

지금까지 GET 요청을 활용해서 React에서 유저 검색 기능을 구현하는 방법에 대해서 만들어보았습니다~! 
저는 개인적으로, 검색 기능을 만들면서 이 두 가지 방식을 모두 사용해보고 감을 많이 익혔습니다!

 

GET 지식은 유저 검색 기능 뿐만 아니라 데이터와 관련된 곳이라면 아주 기본적으로 사용되니 여러분들도 잘 배우시면 좋을 것 같습니다! 

궁금한 점은 댓글에 남겨주셔도 되고 아래에 있는 저희 팀 디스코드 서버로 들어오셔도 됩니다!

그럼 다음에는 백엔드 서버를 fly.io에 배포하는 법에 대해서 정리해보도록 하겠습니다!
지금까지 읽어주셔서 감사합니다!

by. 대학생 개발자 주이어

[Express] MySQL로 깔끔한 로그인 인증 만들기

[Express] MySQL로 깔끔한 로그인 인증 만들기

추천 글 읽으러 가기!

https://discord.gg/8Hh8WgM4zp

KYT CODING COMMUNITY Discord 서버에 가입하세요!

KYT CODING COMMUNITY 가입하기!