[node + express] url querystring 추출, 프론트에서 가져온 get parameter 가져오기

오늘 적을 내용은 react front에서 get 방식으로 api 요청을 보냈을 때

get url parameter를 백단에서 가져오는 법을 적어보고자 한다.

 

node위주의 글이기에 react 프론트 쪽은 크게 설명안하고 가겠음

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import axios from 'axios';

function App() {
  return (
    <Router>
      <div>
        <button
          onClick={async () => {
            let response = await axios.get("/api/test", {
              params: { name: "hello" },
            });
            console.log(response.data);
          }}
        >
          확인용
        </button>
      </div>
    </Router>
  );
}

export default App;

그냥 버튼 눌렀을 때 axios를 이용하여 name을 query string으로 보내주는게 끝이다.

비동기로 axios 쓴 것 말고는 흔한 코드다.

---

백엔드도 간단하다.

일단 2가지 정도...

 

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

// ... 기타 설정은 생략

app.get("/api/test", async (req, res) => {
  let name = req.query.name;

  res.json({ msg: `안녕하세요 ${name}님!` });
});

module.exports = app;

request의 속성 중 query 속성을 이용하는 것이다.

req.query를 console에 찍어보면

 

{

    name: 'hello'

}

이렇게 나온다.

 

즉, req.query는 url 뒤 query string에 들어 있는 값을 객체로 변환해서 가지고 있다고 보면 된다.

 

req.query.name으로 가져올 parameter의 key 값을 가져오면 끝이다.

---

const express = require("express");
const app = express();
const qs = require("query-string");

// ... 기타 설정은 생략

app.get("/api/test", async (req, res) => {
  let name = qs.parseUrl(req.url).query.name;

  res.json({ msg: `안녕하세요 ${name}님!` });
});

module.exports = app;

다른 방법은 모듈을 이용하는 방법이다.

 

/api/test로 요청을 받아온 후 query-string 모듈을 이용해 프론트에서 보내온 parameter를 가져온다.

 

query-string 모듈 공식 github 주소

https://github.com/sindresorhus/query-string#readme

GitHub - sindresorhus/query-string: Parse and stringify URL query strings

---

프론트에서 요청한 주소는 req.url에 담겨있다.

req.url에는 >> /api/test?name=hello  이렇게 담겨있다.

 

qs의 parseUrl을 이용해 객체로 전환하면 url과 query 2가지로 나뉜다.

그 중에 필요한건 query에 있는 name이니까 가져오면 끝이겠지?

 

얘를 자주 쓸 것 같으면 함수로 ㄱㄱ

const qs = require("query-string");

/** 특정 url에서 query string 추출
 *  @param {string} url query string을 뽑아 낼 주소
 *  @param {string} name query string key 이름
 *  @returns string
 */
exports.getParam = function (url, name) {
  return qs.parseUrl(url).query[name];
};

exports로 getParam이라는 이름의 함수를 모듈화 시켜주고

const { getParam } = require("./libs");

app.get("/api/test", async (req, res) => {
  let name = getParam(req.url, "name");

  res.json({ msg: `안녕하세요 ${name}님!` });
});

이렇게 불러와서 쓰면된다.

 

간단간단~~~

 

끝