URL과 URLSearchParams

출처:https://www.zerocho.com/category/HTML&DOM/post/5b3ae84fb3dabd001b53b9ab

이번 시간에는 HTML5의 URL과 URLSearchParams 객체에 대해 알아보겠습니다. IE에서는 안 되지만, 모던 브라우저에서는 사용할 수 있는 기능입니다. 웹은 주소를 기반으로 동작하기 때문에 주소를 자유자재로 다룰 수 있으면 좋습니다. 특히, 쿼리스트링(sear부분)을 파싱하는 것과 같은 귀찮은 작업을 간단히 처리할 수 있어 편리합니다. 노드의 url 모듈과도 비슷합니다.

사용 예시를 봅시다. URL 생성자에 주소를 넣어 인스턴스화하면 됩니다.

const url = new URL('https://www.zerocho.com:8080/category/HTML');
url.href; // https://www.zerocho.com:8080/category/HTML
url.origin; // https://www.zerocho.com:8080
url.protocol; // https:
url.username; // ''
url.password; // ''
url.host; // www.zerocho.com:8080
url.hostname; // www.zerocho.com
url.port; // 8080
url.search; // ''
url.hash; // ''
url.searchParams; // {}

이런 구성요소로 이루어져 있습니다. 이 구성요소는 WHATWG 방식을 따릅니다. 이 방식은 아래 이미지와 비슷합니다.

아래처럼 기본 url에 맞춰 상대경로를 지정할 수도 있습니다.

const url2 = new URL('./category/HTML', 'https://www.zerocho.com');
url2.href; // https://www.zerocho.com/category/HTML

구성요소를 바꾸고 싶을 때는 객체를 수정하면 됩니다. 전체 문자열은 항상 href에 들어 있습니다.

url.search = '?hello=zerocho';
url.href; // https://www.zerocho.com:8080/category/HTML?hello=zerocho"

사실 URL보다 URLSearchParams 객체가 더 중요합니다. 활용도도 높고요. 주소에서 보이는 물음표(?) 뒷 부분이 search 부분(쿼리스트링)입니다. #이 들어있는 해시 부분은 제외하고요. searchParams는 GET 요청 시 데이터를 전달 할 때 사용합니다. 기존에는 search 부분을 수정하는 함수를 직접 구현해야 했지만, 이제는 브라우저가 제공합니다.

예를 들어 ?page=1&limit=50이라는 주소가 있을 때, 다음 페이지로 넘어가는 주소를 만들고 싶다면 ?page=2&limit=50으로 바꿔주어야 합니다. page=1을 page=2로 바꾸는 것이 매우 귀찮습니다. 문자열을 파싱한 후, 1을 2로 바꾸고, 파싱된 문자열을 다시 조합해야 하는 식이죠. 이것을 브라우저에서 지원한다는 뜻입니다.

const url3 = new URL('https://www.zerocho.com?hello=zerocho&hi=world&hi=js')
url3.search; // ?hello=zerocho&hi=world&hi=js
url3.searchParams; // {}

오잉? searchParams를 찍었더니 아무것도 안 나옵니다. 걱정하지 마세요. searchParams는 메서드로 조작하는 겁니다.

url3.searchParams.get('hello'); // zerocho
url3.searchParams.getAll('hi'); // ['world', 'js']
url3.searchParams.append('bye', 'java');
url3.search; // ?hello=zerocho&hi=world&hi=js&bye=java
url3.searchParams.append('bye', 'ruby');
url3.search; // ?hello=zerocho&hi=world&hi=js&bye=java&bye=ruby
url3.searchParams.set('bye', 'python');
url3.search; // ?hello=zerocho&hi=world&hi=js&bye=python
url3.searchParams.delete('bye');
url3.search; // ?hello=zerocho&hi=world&hi=js

다양한 메서드들이 있지만 예제만 봐도 사용 방법을 쉽게 알 수 있습니다. 한 가지 알아두시면 좋은게, 같은 키에 여러 값이 들어갈 수도 있습니다(bye를 보세요). getAll로 모든 값을 가져올 수 있습니다. get은 첫 번째 값만 가져옵니다. append는 기존 값에 새 값을 추가하는 것이고, set은 기존 값을 제거한 후 새 값으로 교체한다는 것에서 다릅니다. 결과는 알아서 search에 반영됩니다. 

이 API는 FormData API 와도 유사합니다. entries, keys, values 메서드(이터레이터 )도 있으니 반복이 필요할 때 사용하시면 됩니다.

SearchParams만 단독으로 조작할 수도 있습니다. URLSearchParams 생성자를 사용하면 됩니다. 쿼리스트링(search)을 제외한 주소가 필요없을 때 사용할 수 있는 방법입니다. 사용할 수 있는 메서드들은 위와 동일합니다.

const searchParams = new URLSearchParams('hello=zerocho&hi=world&hi=js');
searchParams.set('bye', 'C#');
searchParams.toString(); // hello=zerocho&hi=world&hi=js&bye=C%23

toString()으로 변경된 searchParams를 문자열로 만들 수 있습니다.(깨알같은 #의 %23 변환 ㅎㅎ)

GET 요청을 보낼 때 꼭 알아야하는 쿼리스트링, 이제 URLSearchParams로 쉽게 조작해보세요. URL로 전체 주소도 수정할 수 있으니 금상첨화입니다!