whatwg-url은 URL의 모든 구성 요소를 정확하게 처리하며, 쿼리 문자열도 표준에 따라 처리합니다. URL 객체와 URLSearchParams 객체를 사용하여 쿼리 문자열을 조작할 수 있습니다. URL 표준을 준수하므로, 다양한 환경에서 일관성 있게 동작합니다.

url-parse는 URL의 쿼리 문자열을 쉽게 구문 분석하고, 각 매개변수에 접근할 수 있는 기능을 제공합니다. query 속성을 통해 쿼리 문자열에 접근할 수 있으며, set 메서드를 사용하여 쿼리 매개변수를 수정하거나 추가할 수 있습니다. 그러나 쿼리 문자열을 객체로 변환하는 기능은 제한적입니다.

url 모듈은 기본적인 쿼리 문자열 처리 기능을 제공합니다. url.parse() 메서드를 사용하여 쿼리 문자열을 구문 분석하고, query 속성을 통해 접근할 수 있습니다. 그러나 쿼리 문자열을 객체로 변환하거나 반대로 변환하는 기능은 제공하지 않습니다.

query-string은 쿼리 문자열을 객체로 변환하고, 객체를 쿼리 문자열로 변환하는 기능을 제공합니다. 중첩된 객체와 배열을 지원하여 복잡한 쿼리 문자열을 쉽게 처리할 수 있습니다. 예를 들어, ?user[name]=John&user[age]=30과 같은 쿼리 문자열을 쉽게 구문 분석할 수 있습니다.

url-search-params는 URL의 쿼리 문자열을 조작하기 위한 API입니다. URLSearchParams 객체를 사용하여 쿼리 매개변수를 추가, 수정, 삭제할 수 있습니다. 예를 들어, params.append('key', 'value'), params.set('key', 'newValue'), params.delete('key')와 같은 메서드를 제공합니다.

whatwg-url은 URL의 모든 구성 요소에 대한 접근을 제공합니다. URL 객체를 사용하여 프로토콜, 호스트, 경로, 쿼리 등 모든 부분에 쉽게 접근하고 수정할 수 있습니다. URL 표준을 준수하므로, 모든 구성 요소에 대한 처리가 일관성 있고 신뢰할 수 있습니다.

url-parse는 URL의 모든 구성 요소에 접근할 수 있으며, 각 구성 요소를 쉽게 수정할 수 있는 기능을 제공합니다. URL을 구문 분석할 때 각 구성 요소(프로토콜, 호스트, 경로 등)를 객체 형태로 제공하므로, 필요에 따라 쉽게 접근하고 변경할 수 있습니다.

url 모듈은 URL의 모든 구성 요소(프로토콜, 호스트, 경로, 쿼리 등)에 접근할 수 있는 기능을 제공합니다. url.parse() 메서드를 사용하여 URL을 구문 분석하고, 각 구성 요소에 쉽게 접근할 수 있습니다. 그러나 URL을 수정하거나 다시 문자열로 변환하는 기능은 제한적입니다.

query-string은 주로 쿼리 문자열에 초점을 맞추고 있으며, URL의 다른 구성 요소(프로토콜, 호스트, 경로 등)에 대한 접근은 제공하지 않습니다. 쿼리 문자열 처리에 특화되어 있어, URL의 다른 부분에 대한 정보가 필요할 경우 다른 도구와 함께 사용해야 합니다.

url-search-params는 URL의 쿼리 문자열에 특화된 API로, 다른 구성 요소(프로토콜, 호스트, 경로 등)에 대한 접근은 제공하지 않습니다. URL 객체와 함께 사용하여 쿼리 문자열을 조작하는 데 집중합니다.

whatwg-url은 브라우저와 Node.js 환경 모두에서 사용할 수 있으며, URL 표준을 준수하므로 다양한 환경에서 일관성 있게 작동합니다. 특히, URL 처리에 대한 정확성이 중요한 애플리케이션에서 신뢰할 수 있습니다.

url-parse는 브라우저와 Node.js 환경 모두에서 사용할 수 있는 경량 라이브러리입니다. 크로스 플랫폼 호환성이 뛰어나며, 다양한 환경에서 일관되게 작동합니다.

url 모듈은 Node.js 환경에서 기본적으로 제공되며, 브라우저에서는 사용할 수 없습니다. 서버 측 애플리케이션에서 URL 처리가 필요할 때 유용하지만, 클라이언트 측에서는 다른 도구가 필요합니다.

query-string은 모든 주요 브라우저에서 호환되며, ES5 이상을 지원하는 환경에서 사용할 수 있습니다. 구형 브라우저에서도 문제 없이 작동하므로, 광범위한 호환성이 필요할 때 적합합니다.

url-search-params는 최신 브라우저에서 지원되며, IE11과 같은 구형 브라우저에서는 지원되지 않습니다. 브라우저 환경에서 쿼리 문자열을 조작할 때 유용하지만, 호환성 문제가 있을 수 있습니다.

URL 구성 요소 접근 및 수정하기

const { URL } = require('whatwg-url');
const myURL = new URL('https://example.com:8000/path?name=John#fragment');

// URL 구성 요소에 접근
console.log(myURL.protocol); // 출력: https:
console.log(myURL.hostname); // 출력: example.com
console.log(myURL.port);     // 출력: 8000
console.log(myURL.pathname); // 출력: /path
console.log(myURL.search);   // 출력: ?name=John
console.log(myURL.hash);     // 출력: #fragment

// URL 구성 요소 수정
myURL.pathname = '/new-path';
myURL.search = '?name=Jane';
myURL.hash = '#new-fragment';

console.log(myURL.href); // 수정된 URL 출력: https://example.com:8000/new-path?name=Jane#new-fragment

URL 구문 분석 및 수정하기

import URLParse from 'url-parse';
const url = URLParse('https://example.com/path?name=John#fragment');

// URL 구성 요소에 접근
console.log(url.protocol); // 출력: https:
console.log(url.hostname); // 출력: example.com
console.log(url.query);    // 출력: { name: 'John' }

// URL 구성 요소 수정
url.set('query', { name: 'Jane', age: 30 });
url.set('hash', 'newFragment');

console.log(url.href); // 수정된 URL 출력: https://example.com/path?name=Jane&age=30#newFragment

URL 구문 분석하기

const url = require('url');
const myURL = new URL('https://example.com:8000/path?name=John#fragment');

console.log(myURL.protocol); // 출력: https:
console.log(myURL.hostname); // 출력: example.com
console.log(myURL.port);     // 출력: 8000
console.log(myURL.pathname); // 출력: /path
console.log(myURL.search);   // 출력: ?name=John
console.log(myURL.hash);     // 출력: #fragment

쿼리 문자열을 객체로 변환하기

import { parse, stringify } from 'query-string';

// 쿼리 문자열을 객체로 변환
const parsed = parse('?name=John&age=30&hobbies[]=reading&hobbies[]=coding');
console.log(parsed);
// 출력: { name: 'John', age: '30', hobbies: ['reading', 'coding'] }

// 객체를 쿼리 문자열로 변환
const stringified = stringify(parsed);
console.log(stringified);
// 출력: name=John&age=30&hobbies%5B0%5D=reading&hobbies%5B1%5D=coding

쿼리 매개변수 조작하기

const url = new URL('https://example.com/path?name=John&age=30');
const params = new URLSearchParams(url.search);

// 쿼리 매개변수 추가
params.append('hobby', 'reading');

// 쿼리 매개변수 수정
params.set('name', 'Jane');

// 쿼리 매개변수 삭제
params.delete('age');

// 수정된 쿼리 문자열 출력
console.log(params.toString()); // 출력: name=Jane&hobby=reading