[JavaScript] 도메인 정보를 다룰 때 사용하면 유용한 URL 객체

URL 객체란?

자바스크립트에서 도메인에 대한 정보를 가지고 올 때, 주로 window.location.href를 사용했을 것이다. 이번 글에서 소개할 URL 객체를 이용하면 도메인 주소를 비롯한 프로토콜, 쿼리스트링 등 현재 페이지에 대한 모든 정보들을 쉽게 조회할 수 있다. 물론, URL 객체를 사용하지 않고 window.location을 이용해서도 똑같이 구현 가능하다. 하지만, 매번 변수에 저장하는 것보다는 하나의 객체로 만들어서 사용하면 편의성 측면에서 훨씬 더 효율적일 수 있다.

 

사용 방법

URL 객체 선언하기

const url = new URL(window.location.href);

new URL('도메인 주소')를 통해 URL 객체를 선언해 준다.

 

파라미터(경로)와 쿼리스트링 조회하기

// 현재 페이지 : www.shawn.com/detail?lang=ko&page=1
url.pathname; // '/detail'
url.search; // '?lang=ko&page=1'

현재 페이지 주소가 위와 같다고 할 때, pathname은 해당 페이지가 도메인의 파라미터(경로)를 나타내준다.

search는 해당 페이지의 쿼리스트링으로 전체 쿼리 값을 가져와준다.

이 외에도 호스트 주소를 가져오는 hostname 속성과 프로토콜 정보를 가져오는 protocol 등이 있지만, 대표적으로 위 2가지가 자주 쓰이는 URL 속성이다.

 

🤔 파라미터와 쿼리는 뭐가 다른걸까?
파라미터 예시 : /detail/news
쿼리 예시 : ?detail=news
파라미터는 주로 ID, 이름, 페이지처럼 쿼리보다는 큰 주제를 잡고 조회할 때 쓰이고, 쿼리는 파라미터보다는 더 좁은 영역으로 큰 주제 안에 특정 키워드, 언어 등 좁은 주제를 선언할 때 자주 쓰인다.

 

쿼리스트링 객체 만들기

// 현재 페이지 : www.shawn.com/detail?lang=ko&page=1
const param = url.searchParams;

param.get('lang'); // 'ko'
param.getAll('lang'); // ['ko']
param.set('lang', 'en') // lang=en

param.append('category', 'news'); // ?lang=ko&page=1&category=news
param.delete('category'); // ?lang=ko&page=1

param.has('lang'); // true

같은 페이지에서 데이터 값만 다른 경우 쿼리스트링을 통해 우리는 데이터를 사용자에 맞게끔 제공할 수 있다.

URL 객체에서는 searchParams를 통해 쿼리스트링 객체를 만들 수 있다.

 

get('param')은 해당 쿼리에 해당하는 값을 리턴해준다. getAll('param')은 get()과 똑같지만, 단지 배열로 리턴해준다는 점에서 다르다.

set('param', 'value')은 기존의 쿼리 값을 수정할 때 사용한다. 예를 들어, set('lang', 'en')이라면 기존에 존재하는 lang 쿼리의 값을 en으로 수정한다는 의미이다.

 

append('param', 'value')는 새 쿼리를 추가할 때 사용한다. 해당 페이지에 기존 쿼리가 여러 개 있다면, 가장 끝에 추가된다.

delete('param')은 말 그대로 쿼리를 삭제할 때 사용한다. has('param')는 특정 쿼리가 존재하는 지를 boolean 값으로 리턴해준다.

 

Iterator 객체로 사용하기

// 현재 페이지 : www.shawn.com/detail?lang=ko&page=1
const params = param.entries();
params.next().value; // ['lang', 'ko']
params.next().value; // ['page', '1']

const values = param.values();
values.next().value; // 'ko'
values.next().value; // '1'

const keys = param.keys();
keys.next().value; // 'lang'
keys.next().value; // 'page'

쿼리스트링 값을 Iterator 객체로 변환할 수도 있다. 사용 방식은 원래 Iterator 객체 방식과 같다.

entries()는 쿼리 이름과 값을 배열로 반환하고, keys()는 쿼리 이름만, values()는 쿼리 값만 반환한다.

특정 쿼리가 아닌 전체 쿼리를 차례대로 반환할 때는 이처럼 Iterator 객체를 통해 쉽게 구하는 것도 가능하다.

 

searchParams 객체 출력하기 (페이지 이동)

const param = url.searchParams;
param.set('lang', 'en'); // lang 값이 'en'으로 변경
window.location.search = param.toString(); // 페이지 이동

searchParams 객체는 말 그대로 객체일 뿐, 속성을 변경했다고 해서 바로 페이지 이동이 되지는 않는다. 페이지 이동을 위해서는 문자열화시킨 객체의 속성을 window.location.search와 함께 사용하면 된다.

위의 예시는 param 변수에 searchParams 객체를 담고, set()을 이용해서 특정 쿼리 값을 변경해주었다.

변경된 객체는 문자열로 바꿔줘야 하는데, 이 때 사용하는 게 바로 toString()이다. 

 

param.set('lang', 'en');
param.toString(); // lang=en
param.append('page', '1');
param.toString(); // lang=en&page=1

이런 식으로 param이라는 searchParams 객체에다가 set, append, delete 등 추가/변경/삭제 등을 할 수 있고, toString()을 통해 문자열로 만들어서 출력해주면 된다.

 

1. const url = new URL(window.location.href)
2. const param = url.searchParams
3. param.get('param') // 특정 쿼리 값 조회
4. param.set('param', 'val') // 기존 쿼리 값 수정
5. param.append('param', 'val') // 새 쿼리 추가
6. param.delete('param') // 특정 쿼리 삭제
7. window.location.search = searchParams.toString() // 페이지 이동