[Web Server] req.query와 req.params의 차이

🔎 Web Server 학습을 하고 직접 코드를 작성하는 과정에서 본인이 req.query와 req.params의 차이점을 모르고 있다는 것을 인지하고 다시 학습하면서 정리해보고자 한다.

📍 req.query? req.params?

간단하게 각각을 정리해보자면,
req.query는 query parameter -> 필터링

/search?query=c
/40th?age=20
/korean?name=fejigu

req.params는 pass parameter -> 예약된 값

/filgth/:uuid
/book/:phone

📍예시를 통한 이해

서버의 routing 코드가 아래와 같다.

post.get("/:id/:name", function1);

그리고 데이터를 요청하는 클라이언트 측의 axios가 아래와 같다.

await axios({
  method: "get",
  url: `www.example.com/post/1/jun`,
  params: { title: 'hello!' },
})

이 경우 전송되는 url은
‘www.example.com/post/1/jun?title=hello!’ 이다.

그럼 서버에서 req.params와 req.query를 출력하면 결과값은?

✔️ req.params는 예약된 값으로, routing을 보면 id와 name이 예약되어 있다.
즉 서버에서 id라는 변수로 어떤 값이 들어올 것을 알고,
name이라는 변수에 어떤 값이 들어올 것임을 알고 대기하고 있다.

✔️ req.params는 url을 분석하여 id와 name자리에 있는 값을 낚아챈다.

따라서 req.params를 출력해보면 아래와 같다.

console.log(req.params); // { id: '1', name: 'jun' }

한편 req.query를 출력하면 아래와 같다.

console.log(req.query); // { title : 'hello!' }

즉, url에서 ?뒤에 입력되는 query문을 req.query로 받아오는 것이다.

📍req.params 다시 정리

axios에서 추가 데이터를 보내는 방법 -> data와 params가 있다.
data -> post 요청을 보낼 때 사용되는 객체
params -> url에 포함되는 데이터를 넣어주는 것

→ 서버에서는 req.params를 사용하면 예상된 값을 받아오는 의미이지만,
axios에서는 params가 ?뒤에 오는 쿼리문을 뜻한다.