Final Project (React)

Query Parameters와 Path Parameters의 차이

taytay 2025. 1. 7. 13:40

1. Query Parameters (?key=value)

특징:

  • 형식: URL의 ? 뒤에 key=value 형식으로 추가.
  • 목적: 데이터를 필터링하거나 정렬, 검색 조건을 전달할 때 사용.
  • 다중 값: 여러 매개변수를 &로 연결.
  • 순서: 순서는 중요하지 않음.
  • 서버에서 값을 사용하지 않으면 무시됨.
GET /products?category=electronics&sort=price&limit=10

 

  • category: 전자기기만 필터링.
  • sort: 가격 기준으로 정렬.
  • limit: 최대 10개의 결과만 반환.

 

보완 내용:

  1. 복잡한 조건 조합:
    • 쿼리 파라미터는 필터링 조건이 많아질수록 복잡해질 수 있음.
    • 예를 들어, 날짜 범위 필터는 다음과 같이 작성할 수 있음:
GET /events?startDate=2023-01-01&endDate=2023-12-31

 

 

하지만 너무 복잡하면 POST 요청과 요청 본문(JSON 데이터)로 대체하는 것이 좋음.

 

2. URL의 길이 제한:

  • 브라우저와 서버에 따라 URL 길이 제한(약 2000자)을 초과하지 않도록 주의.

 

2. Path Parameters (/:parameter)

특징:

  • 형식: URL의 경로(path)에 콜론(:)으로 변수처럼 정의.
  • 목적: 특정 리소스(고유한 객체)를 식별할 때 사용.
  • 순서: 경로의 순서가 중요함.
  • RESTful API 설계에서 자주 사용됨.
// 사용 예시:
GET /orders/:orderId

// 요청 시:
GET /orders/12345

➡️ orderId = 12345 → 서버는 이 ID에 해당하는 주문 객체를 반환.

 

 

보완 내용:

1. 복수의 Path Parameters:

// 경로에 여러 파라미터를 포함할 수 있음:
GET /users/:userId/orders/:orderId

// 요청 예시:
GET /users/987/orders/12345

➡️ userId = 987, orderId = 12345.

 

2. 정규식 기반의 Path Matching:

  • 일부 프레임워크(예: Express.js)에서는 Path Parameter에 정규식을 적용할 수 있음
app.get('/orders/:orderId(\\d+)', (req, res) => {
  // orderId는 숫자만 허용
  console.log(req.params.orderId);
});

 

 

3. RESTful 설계 규칙:

  • 단수/복수 명칭 규칙:
    • 리소스 목록 → 복수형 사용: /products
    • 특정 리소스 → 단수형 사용: /products/:productId
  • CRUD 작업에 따른 HTTP 메서드 사용:
    • GET /products → 전체 목록 조회
    • GET /products/:id → 특정 항목 조회
    • POST /products → 새로운 항목 생성
    • PUT /products/:id → 기존 항목 수정
    • DELETE /products/:id → 특정 항목 삭제

 

3. Query Parameters vs. Path Parameters

 

 

4. 추가로 알아두면 좋은 내용

1) 혼합 사용

  • Query Parameters와 Path Parameters를 함께 사용할 수 있음