URLSearchParams, qs - 쿼리 스트링을 다루는 API

자바스크립트에서 보편적으로 사용하는 api는 URLSearchParams입니다. 그러나 중첩된 객체/배열 등 복잡한 것을 다루려면 qs API를 사용해야 합니다. 차이점을 정리해 보겠습니다.

 

1. URLSearchParams

• 내장 API: URLSearchParams는 웹 브라우저가 기본적으로 제공하는 API입니다. 별도의 라이브러리 설치 없이 사용할 수 있습니다.
• 기능: 이 API는 URL의 쿼리 스트링을 파싱하고, 조작하고, 직렬화하는 기본적인 기능을 제공합니다. 쿼리 스트링의 키-값 쌍을 추가, 삭제, 검색, 수정할 수 있습니다.
• 단순성: 배열이나 복잡한 객체를 쿼리 스트링으로 직렬화하는 등의 복잡한 작업은 지원하지 않습니다.
• 브라우저 지원: 현대적인 브라우저에서 널리 지원됩니다.
• 브라우저에서 간단한 쿼리 스트링 파싱 및 조작이 필요한 경우 URLSearchParams를 사용하는 것이 좋습니다.

const params = new URLSearchParams("name=John&age=30");

URLSearchParams 객체 생성

const name = params.get('name'); // 'John'

 

특정 파라미터의 값 읽기

params.set('age', 31); // 쿼리 스트링이 'name=John&age=31'로 변경됩니다.

새로운 값이나 기존 값을 변경

params.append('job', 'Engineer'); // 쿼리 스트링이 'name=John&age=31&job=Engineer'로 변경됩니다.

새로운 파라미터를 추가

params.delete('age'); // 'age' 파라미터가 삭제됩니다.

쿼리 스트링에서 특정 파라미터를 삭제

const queryString = params.toString(); // 'name=John&job=Engineer'

모든 파라미터를 포함한 쿼리 스트링을 얻을 수 있습니다. (URL 직접 붙여 보낼때 사용, `https:...?${params.toString()` )

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

쿼리 스트링의 모든 키와 값을 순회

const hasName = params.has('name'); // true

쿼리 스트링에서 특정 파라미터의 존재 여부를 확인

 

쿼리스트링을 이용 get 요청보내기

// URL과 쿼리 파라미터를 정의합니다.
const baseUrl = "https://api.example.com/data";
const queryParams = new URLSearchParams({
  name: "John",
  age: 30
});

// URLSearchParams 객체를 이용해 쿼리 스트링을 완성합니다.
const urlWithQuery = `${baseUrl}?${queryParams}`;

// fetch API를 사용하여 GET 요청을 보냅니다.
fetch(urlWithQuery)
  .then(response => response.json())  // 응답을 JSON 형식으로 변환합니다.
  .then(data => console.log(data))     // 서버로부터 받은 데이터를 콘솔에 출력합니다.
  .catch(error => console.error('Error:', error));  // 에러 처리

 

 

 

2. qs

• 외부 라이브러리: qs는 Node.js 및 브라우저에서 사용할 수 있는 외부 라이브러리입니다. 터미날에서 npm이나 yarn을 통해 설치해야 합니다. ( npm install qs )
• 확장된 기능: qs는 URLSearchParams보다 훨씬 복잡한 데이터 구조를 다룰 수 있습니다. 예를 들어, 중첩된 객체나 배열을 쿼리 스트링으로 직렬화하거나 파싱하는 기능을 제공합니다.
• 구성 옵션: 쿼리 스트링의 인코딩 방식을 세밀하게 조정할 수 있는 다양한 옵션을 제공합니다.
• 서버와 클라이언트 모두 사용 가능: Node.js 환경에서도 사용할 수 있어 서버 측과 클라이언트 측에서 동일한 로직을 유지하려는 경우에 유리합니다.
• 중첩된 객체나 배열 같은 복잡한 데이터 구조를 쿼리 스트링으로 다루어야 하는 경우, 더 많은 기능을 제공하는 qs가 더 적합합니다.

const qs = require('qs');

const object = {
  user: {
    name: "John Doe",
    age: 30,
    preferences: {
      newsletter: true,
      interests: ['sports', 'music']
    }
  }
};

const queryString = qs.stringify(object, { encode: false });
console.log(queryString);

{encode: false} 옵션은 쿼리 스트링 내의 문자열을 URL 인코딩하지 않게 합니다. 여기서 "URL 인코딩"은 URL에서 사용할 수 없는 문자를 % 기호와 함께 16진수 코드로 변환하는 방식입니다. 예를 들어, 공백은 %20으로 변환되는데, false를 주어 변환하지 말라는 옵션입니다. 특수문자 "&" 가 있는 경우 "%26"로 인코딩 하지 말고, 그대로 & 처리하라는 의미입니다. 일반적으로 &와 같은 특수 문자는 URL에서 새로운 파라미터를 시작하는데 사용되기 때문에, 인코딩 없이 사용하면 예상치 못한 결과를 초래할 수 있으니 사용에 주위를 요합니다.

user[name]=John Doe&user[age]=30&user[preferences][newsletter]=true&user[preferences][interests][0]=sports&user[preferences][interests][1]=music

 

qs.parse()함수 사용하기

const qs = require('qs');  // Node.js 환경에서는 이렇게 불러옵니다.

const queryString = 'user[name]=John Doe&user[age]=30&user[preferences][newsletter]=true&user[preferences][interests][0]=sports&user[preferences][interests][1]=music';

const parsedObject = qs.parse(queryString);
console.log(parsedObject);