여러 개의 값을 갖는 쿼리 파라미터 처리하기 (Nest.js)

쿼리 파라미터는 URL의 일부분으로, 서버에 전달할 추가 정보를 포함합니다. 이 정보는 일반적으로 키-값 쌍의 형태로 전달되며, 여러 개의 쿼리 파라미터를 사용할 수 있습니다.
특히 GET 메서드에서 주로 많이 쓰이고 다중 값을 갖는 쿼리 파라미터를 처리할 때, 어떻게 처리를 보통 하는 것에 대해 궁금증이 생겼습니다.

 

서치한 결과 두 가지 대표적인 방식이 있었습니다. 

1. main=1&main=2
   ex) 네이버 - fieldIds=quant&fieldIds=market_sum&fieldIds=per&fieldIds=roe&fieldIds=listed_stock_cnt
   
   
2. main=1,2 또는 main=1%2 
   ex) 쿠팡(%로 구분) - brand=16981%2C6391%2C3154 

그리고 각 사이트마다 사용하는 방법은 달랐습니다. 그래서 정답은 없다고 생각이 들었고 상황에 맞게 적절하게 쓰면 된다고 생각했습니다.

 

 

평소에 2번으로만 알고 사용을 하고 있었는데, 2번 방법으로는 main=1,2는 서버에서 값을 분리하는 추가 로직이 필요 했습니다. (controller 에서 처리)
Nest를 사용하는 현재 상황에서, 1번 방식을 사용하면 코드가 보다 깔끔해지고, validation(class-transformer)라이브러리를 보다 정확하게 할 수 있다고 생각했습니다.

 

 

아래는 변경전 예시 코드로 초기에는 main=1,2를 사용하여서 MainQueryRequestDto 에서 단순히 스트링으로 받고, 컨트롤러에서 배열로 변환했습니다.

• MainQueryRequestDto

// class-transformer
// query Dto
export class MainQueryRequestDto {
  @ApiProperty({
    description: 'main',
    example: '1,2,3',
  })
  @IsString()
  @IsNotEmpty()
  public main: string;
}

 

• Controller

const mainArray = main ? main.split(',').map(Number) : null;
// mainArray = [1, 2]

 

 

변경후에는 controller 코드를 삭제하고 main=1&main=2을 기준으로 Dto 클래스에서 전부 해결했습니다.

• MainQueryRequestDto

export class MainQueryRequestDto {

  @ApiProperty({
    description: '하나의 쿼리 파라미터로 여러 개의 값을 전달할 수 있습니다 (예: main=1&main=2).',
    example: '1',
  })
  @IsNotEmpty()
  @IsArray() // 배열인지 확인
  @ArrayMaxSize(5) // 최대 5개의 숫자값을 받을 수 있도록 제한
  @IsNumberString({}, { each: true }) // 각 배열의 값이 숫자 문자열인지 확인
  @Transform(({ value }) => (Array.isArray(value) ? value : [value]), { toClassOnly: true }) // main=1 이더라도 배열로 변환
  public position: number[]; // 서버 자체적으로 타입에 맞게 변환 해주는 설정 사용중임

}

 

 

 

쿼리 파라미터의 형태는 API의 목적과 클라이언트의 사용성을 고려하여 선택하는것 같습니다.
일반적으로는 main=1&main=2 형식이 더 직관적이고, 배열 처리가 간편하기 때문에 많이 쓰입니다.
그래서 네이버나 다른 사이트에서는 선택 폭이 작으면 main=1&main= 방식을 쓰는 것 같습니다.

하지만, 쿠팡의 경우 물건을 조회하는 조건이 워낙 많다보니 URL이 길어지는 경우에는
URL의 길이를 줄이거나 더 간결한 표현이 필요해서 main=1,2 형식을 사용하는 것 같습니다.