[JavaScript | WebAPIs] URLSearchParams, URL

왜 이 WebAPI에 대해서 찾아보게 됐나?

- query string을 업데이트해야 할 때 사용하기 좋은 WebAPI입니다. 혹은 URL Validation을 할 때 유용할 거 같습니다. 

- 어렴풋이 URLSearchParams()를 사용해본 거 같은 느낌이 들어 찾아보니 이전에 리액트 프로젝트를 했을 때 사용한 React router dom v6의 useSearchParams()와 비슷한 거 같네요. 

🟡URLSearchParams

❗URL 전체를 인자로 넘기는 것이 아니라 query string 부분만 인자로 넘겨준다. 

URLSearchParams 인터페이스는 URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의한다. 

• 이 생성자(new 키워드로 새 인스턴스 반환)를 통해 구현되는 객체는 for...of 반복문으로 직접 key/value 쌍을 순회할 수 있다. 
• key/value 쌍의 순회 순서는 쿼리 문자열에 나타나는 순서와 같다. 

⏺ URLSearchParams  메서드

.append() 

주어진 키/값 쌍을 새로운 검색 매개변수로 추가

.delete()

주어진 검색 매개변수와 그 값을 모두 삭제

.entries()

객체의 모든 키/값 쌍을 쿼리 문자열과 같은 순서로 순회할 수 있는 순회기를 반환

//아래의 두 코드는 동일한 기능을 하기 때문에 선호하는 쪽을 사용하면 된다.
for (const [key, value] of mySearchParams) {}
for (const [key, value] of mySearchParams.entries()) {}

.has() 

주어진 검색 매개변수의 존재 여부를 boolean값으로 반환

.keys()

객체의 모든 키/값 쌍에서 키만 순회할 수 있는 순회기를 반환

.set()

주어진 검색 매개변수에 값을 설정(기존에 해당 매개변수에 지정된 값이 있다면 모두 제거됨 덮어쓰여진다는 뜻)

.sort()

모든 키/값 쌍을 키의 순서로 정렬

.toString()

URL에 쓰기 적합한 형태의 쿼리 문자열을 반환

.values()

객체의 모든 키/값 쌍에서 값만 순회할 수 있는 순회기 반환

 

예제

const paramsString = 'q=URLUtils.searchParams&topic=api';
let searchParams = new URLSearchParams(paramsString);

// 검색 매개변수 순회
for (let p of searchParams) {
  console.log(p);
}

searchParams.has('topic') === true;      // true
searchParams.get('topic') === "api";     // true
searchParams.getAll('topic');            // ["api"]
searchParams.get('foo') === null;        // true
searchParams.append('topic', 'webdev');
searchParams.toString();                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set('topic', 'More webdev');
searchParams.toString();                 // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete('topic');
searchParams.toString();                 // "q=URLUtils.searchParams"

//검색 매개변수는 객체도 가능하다.

🟡URL

URL 인터페이스는 URL을 분석, 생성, 정규화, 인코딩할 때 사용하며, URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공한다. URL 객체 생성은 생성자에 전체 URL 문자열, 또는 상대 URL(절대의 반대 의미)과 기준 URL을 생성자에 전달해 진행한다. 

• 브라우저가 아직 URL() 생성자를 지원하지 않을 땐 Window 인터페이스의 Window.URL 속성으로 URL객체에 접근하면 된다. (new URL로 새 인스턴스 생성이 불가할 때에는 Window.URL로 접근하란 소리)
• 속성으로는 hash, host, hostname, href, origin(readOnly), password, pathname, port, search, searchParam(readOnly), username 가 있다. (메서드 아님)
• 메서드로 toString(), toJSON(), 정적 메서드 등이 있다. 자세한 내용은 MDN 참고

const url = new URL('../cats', 'http://www.example.com/dogs');
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

URL Validation Example

// https://developer.mozilla.org/en-US/docs/Web/API/URL
// https://github.com/zloirock/core-js/blob/master/packages/core-js/modules/web.url.constructor.js
const checkURLValid = (inputUrl: string) => {
	let url;
  try {
    url = new URL(inputUrl);
  } catch (_) {
    return false;  
  }

  return url.protocol === "http:" || url.protocol === "https:";
}

//ref: https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url

 

ref: https://developer.mozilla.org/ko/docs/Web/API/URL

URL - Web API | MDN

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

URLSearchParams - Web APIs | MDN