URL과 URLSearchParams

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

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

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

 

사실 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.abbo.com?hello=niyong&hi=world&hi=js')
url3.search; // ?hello=niyong&hi=world&hi=js
url3.searchParams; // {}

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

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

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

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