GET 방식에서 URL에 데이터를 전달하는 두 가지 방법 : params, query

지난 포스팅에서 GET 방식은  URL에 요청할 데이터를 전달하는 방식이라고 정리했었는데요.

https://musubi-iroiro.tistory.com/405

GET 방식과 POST 방식 차이(feat. REST)

오늘은 GET 방식에서 URL에 데이터를 담아 보내는 두 가지 방식에 대해서 알아보려고 합니다. 

---

1. Query(쿼리 파라미터)

query 파라미터는 URL의 끝에 ?로 시작하여 여러 파라미터를 &로 구분하여 전달하는 방식입니다. 

https://example.com/search?category=electronics&price=100

요런 식으로 말이죠. 여기서는 category, electronics, price가 쿼리 파라미터 라고 할 수 있겠습니다. 

파라미터는 key=value 형식으로 전달되고, 여러 개의 파라미터는 &로 구분됩니다. 

쿼리이기 때문에 주로 검색, 필터링을 위한 데이터 전달에 사용됩니다.

 

Node.js에서 express 프레임워크를 이용해서 쿼리 파라미터를 받으려면 다음과 같이 처리하면 됩니다.

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

app.get('/search', (req, res) => {
  const category = req.query.category;  // ?category=electronics
  const price = req.query.price;        // ?price=100
  res.send(`Category: ${category}, Price: ${price}`);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

 백엔드 쪽에서 이렇게 서버를 만들어놓으면, 프론트 쪽에서 https://example.com/search?category=electronics&price=100처럼 요청하면, 백엔드쪽에서는 category와 price 변수를 전달해 줄 겁니다.

프론트 쪽에서는 해당 경로를 fetch한 다음에 category와 price변수를 받아와서 화면에 보여주거나 하면 되겠쥬

---

2. Params(경로 파라미터)

Params 경로 파라미터 방식은 URL의 경로 내에 파라미터를 :로 구분하여 전달하는 방식입니다. 주로 특정 리소스를 조회할 때 사용되는 방식입니다.

https://example.com/products/:productId

요런 식으로 말이죠. 

 

Node.js에서 express 프레임워크를 이용해서 경로 파라미터를 받으려면 다음과 같이 처리하면 됩니다.

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

app.get('/products/:productId', (req, res) => {
  const productId = req.params.productId;  // /products/12345
  res.send(`Product ID: ${productId}`);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

params 때처럼 백엔드 쪽에서 이렇게 서버를 만들어놓으면 https://example.com/products/:productId 과 같이 요청하면 백엔드 쪽에서는 productID를 전달해줄거고, 프론트 쪽에서는 해당 경로를 fetch한 다음에 productID 변수를 받아와서 화면에 보여주거나 하면 되겠쥬

 

물론, params 방식을 통해서도 여러 파라미터 전달이 가능합니다. 

https://example.com/:productname/:productId

이런 식으로 요청하면, productname과 productId를 파라미터로 전달해 값을 받아올 수 있습니다. 

---

이상입니다. 읽어주셔서 감사합니다.