요청 URL, 쿼리 스트링, URLSearchParams

현재 코드 방식${BASE_URL}/api/v1/user/me/meetup?${queryParams.toString()}&page=${page}&size=${size}도 기능적으로는 작동하겠지만, 권장되는 방식은 아닙니다. 이 방식의 문제는:

queryParams에 이미 status가 포함되어 있는데 toString()으로 변환 후 직접 다른 파라미터를 추가하면 코드가 일관성이 떨어집니다.
page와 size 값이 특수 문자를 포함하면 URL 인코딩 문제가 발생할 수 있습니다.

---

1. URL 쿼리스트링에서 물음표(?), 앤드(&), 슬래시(/) 사용법

물음표(?)

기본 URL과 쿼리 파라미터 부분을 구분합니다.
URL의 가장 첫 번째 쿼리 파라미터 앞에 사용합니다.
예: https://example.com/path?param1=value1

앤드(&)

여러 쿼리 파라미터를 구분합니다.
두 번째 이후의 모든 쿼리 파라미터 앞에 사용합니다.
예: https://example.com/path?param1=value1¶m2=value2¶m3=value3

슬래시(/)

URL 경로(path)의 각 부분을 구분합니다.
도메인 이후, 쿼리 파라미터 이전에 사용합니다.
예: https://example.com/api/v1/users/123

올바른 URL 구조
https://example.com/path/to/resource?param1=value1¶m2=value2

도메인: https://example.com
경로: /path/to/resource
쿼리 파라미터: ?param1=value1¶m2=value2

---

2. URLSearchParams 기초
   URLSearchParams는 URL의 쿼리 문자열을 쉽게 처리할 수 있게 해주는 Web API입니다.
   기본 사용법

생성하기:

javascript// 빈 URLSearchParams 객체 생성
const params = new URLSearchParams();

// 문자열로부터 생성
const params = new URLSearchParams('param1=value1&param2=value2');

// 객체로부터 생성
const params = new URLSearchParams({
  param1: 'value1',
  param2: 'value2'
});

파라미터 추가하기:

javascriptparams.append('param', 'value'); // 파라미터 추가

파라미터 설정하기:

javascriptparams.set('param', 'newValue'); // 기존 파라미터 값 변경 (없으면 추가)

파라미터 삭제하기:

javascriptparams.delete('param'); // 파라미터 삭제

파라미터 가져오기:

javascriptconst value = params.get('param'); // 파라미터 값 가져오기
const allValues = params.getAll('param'); // 같은 이름의 모든 값 가져오기

파라미터 확인하기:

javascriptconst hasParam = params.has('param'); // 파라미터 존재 여부 확인

모든 파라미터 순회하기:

javascriptfor (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`);
}

문자열로 변환하기:

// 결과: "param1=value1&param2=value2"

장점

모든 값을 자동으로 URL 인코딩합니다.
특수 문자 처리를 자동으로 해줍니다.
쿼리 파라미터 조작이 간편합니다.
브라우저 호환성이 좋습니다.

따라서 페이지네이션 구현 시에는 첫 번째 답변에서 제안한 방식처럼 모든 파라미터를 URLSearchParams에 추가하는 것이 더 안전하고 유지보수하기 좋습니다.

---

1. 애초에 new URLSearchParams로 만들어진 queryParams는 자료형이 뭐야?
2. url에 들어가는 쿼리는 무조건 스트링이어야해?
3. 넘버 타입의 param을 .toStirng()을 사용해서 append 하면 문제가 해결될까?

편집
질문에 대한 답변을 드리겠습니다:

URLSearchParams로 만들어진 queryParams 객체는 URLSearchParams 타입입니다. 이 객체는 URL 쿼리 문자열을 생성하고 조작하는 메서드들을 제공합니다.
네, URL에 들어가는 모든 쿼리 파라미터는 문자열(string) 형태여야 합니다. URL 사양에 따라 쿼리 파라미터의 이름과 값은 모두 문자열이어야 합니다.
네, 정확합니다. number 타입의 파라미터를 .toString() 메서드를 사용하여 문자열로 변환한 후 append 하면 타입 오류가 해결됩니다. 다음과 같이 수정하면 됩니다:
typescript
const queryParams = new URLSearchParams();
queryParams.append("status", status);
queryParams.append("page", page.toString()); // number를 string으로 변환
queryParams.append("size", size.toString()); // number를 string으로 변환
이렇게 하면 TypeScript 컴파일러의 타입 오류가 해결될 것입니다. URLSearchParams.append() 메서드는 두 번째 인자로 문자열을 기대하기 때문에 숫자 값을 명시적으로 문자열로 변환해야 합니다.

그럼 1번 답변을 조금 더 구체적으로, queryParams객체의 예시를 보여줄 수 있어?

편집
URLSearchParams 객체를 더 구체적으로 설명해 드리겠습니다.

URLSearchParams 객체는 URL의 쿼리 문자열 부분을 조작하기 위한 유틸리티입니다. 내부적으로 키-값 쌍을 저장하고 있으며, 이를 URL 쿼리 문자열 형식으로 변환해주는 기능을 제공합니다.

예를 들어, 다음과 같이 URLSearchParams 객체를 생성하고 조작해 볼 수 있습니다:

javascript
// 빈 URLSearchParams 객체 생성
const params = new URLSearchParams();

// 여러 파라미터 추가
params.append('status', 'ongoing');
params.append('page', '1');
params.append('size', '10');

// 이 시점에서 params 객체의 내부 상태는 대략 다음과 같습니다:
// {
// [Map 데이터 구조]
// 'status' => 'ongoing',
// 'page' => '1',
// 'size' => '10'
// }

// toString()을 호출하면 URL 쿼리 문자열 형식으로 변환됩니다
console.log(params.toString());
// 출력: "status=ongoing&page=1&size=10"
URLSearchParams 객체는 직접 콘솔에 출력하면 복잡한 형태로 보이지만, 다음과 같은 메서드를 통해 내용을 확인할 수 있습니다:

javascript
// 모든 키-값 쌍 순회하기
for (const [key, value] of params.entries()) {
console.log(${key}: ${value});
}
// 출력:
// status: ongoing
// page: 1
// size: 10

// 특정 키의 값 가져오기
console.log(params.get('status')); // "ongoing"

// 객체에 포함된 모든 키 확인하기
for (const key of params.keys()) {
console.log(key);
}
// 출력:
// status
// page
// size
URLSearchParams 객체는 JavaScript의 Map과 유사한 구조를 가지고 있지만, URL 쿼리 파라미터 처리에 특화된 기능을 제공합니다. 내부적으로 모든 키와 값은 문자열로 저장되며, 이는 URL 규격에 맞게 자동으로 인코딩됩니다.

실제 사용 예를 보면 toString() 메서드를 호출했을 때 반환되는 문자열이 URL의 ? 뒤에 오는 쿼리 파라미터 부분입니다.