🌐 자바스크립트 URL 객체 사용법

URL 객체

이전에는 window.location.href를 통해 url문자열을 얻어와 문자열 파싱을 통해 쿼리 스트링을 사용했었다. 하지만 이제 url 정보값들을 객체로 받아와 간편하게 사용할수 있게 되었다.

기본 제공 URL 클래스는 URL 을 만들고 구문 분석하기 위한 편리한 인터페이스를 제공한다.

// 사이트 주소 얻기
const link = window.location.href;
// "http://testurl.co.kr:8080/path/main.html?param1=1&param2=3#top"

var url = new URL(link);

/* url 객체 정보 */
{
  protocol: "http:" // 프로토콜
  hostname: "testurl.co.kr"  // 도메인, 아이피
  port: "8080" // 포트
  
  host: "testurl.co.kr:8080" // 서버 주소
  origin: "http://testurl.co.kr:8080" // 프로토콜, 서버이름, 포트 포함
  href: "http://testurl.co.kr:8080/path/main.html?param1=1&param2=3#top" // 전체경로
  
  pathname: "/path/main.html" // 서버 자원 위치
  hash: "top" // #해시 위치 
   
  search: "?param1=1&param2=3" // 쿼리스트링
  searchParams: URLSearchParams {} // 쿼리스트링을 메소드를 통해 모듈화
  
  username: "" // HTTP 인증이있는 경우 속성
  password: "" // HTTP 인증이있는 경우 속성
}

위의 코드는 javascript로 URL객체를 생성한 것이다. URL객체를 생성하기 위해서는 생성자에 기본적인 URL을 입력해주어야 한다.

'http://'또는 'https://'부터 url 형식에 맞게 작성해야한다.

---

URL Parameter 값 다루기

값을 전달하기 위해서 get형식의 파라미터를 사용하는데, search속성으로 url의 파라미터부분을 그대로 가져올 수 있다. searchParams 속성은, 또 하나의 객체로 이루어져 있는데 이를 사용면 파라미터를 간편하게 다룰 수 있다.

 

urlSearchParams.get()

: urlSearchParams에 .get('parameterName')은 해당 parameterName으로 조회되는 첫번째 값을 return한다.

 

urlSearchParams.getAll()

: urlSearchParams에 .getAll("parameterName")은 parameterName으로 조회되는 모든 값을 배열로 return한다.

const urlStr = 'https://gillog/post/1?tag=javascript&like=backend';
const url = new URL(urlStr);

const urlParams = url.searchParams; // URLSearchParams 객체를 넣는다. 그러면 메소드를 사용할수 있게 된다.

const tag = urlParams.get('tag'); // 쿼리스트링에 tag라는 키의 값을 가져온다.
console.log(tag); // javascript

const like = urlParams.get('like');
console.log(like) // backend

 

urlSearchParams.keys()

: parameter에 해당하는 key들을 순회할 수 있는 iterator를 return한다.

 

urlSearchParams.values()

: parameter에 해당하는 value들을 순회할 수 있는 iterator를 return한다.

 

urlSearchParams.entries()

: parameter에 해당하는 key와 value들을 순회할 수 있는 iterator를 return한다.

// 쿼리스트링 부분을 URLSearchParams객체에 바로 줘서 사용할 수도 있다.
const urlParams = new URLSearchParams("?gil=test&log=what&gillog=holy");

const keys = urlParams.keys();
// gil
// log
// gillog

const values = urlParams.values();
// test
// what
// holy

const entries = urlParams.entries();
// gil, test
// log, what
// gillog, holy

 

urlSearchParams.has()

: parameterName에 해당하는 Parameter가 있는지 확인할 수 있다.

const urlParams = new URLSearchParams("?gil=123&log=456&gillog=777");

// true
console.log(urlParams.has("gillog"));

// false
console.log(urlParams.has("loggil"));

 

urlSearchParams.append()

: parameter를 추가

let urlParams = new URLSearchParams("?gil=test");

urlParams.append("log", "yes");
urlParams.append("log", "no");

// ?gil=test&log=yes&log=no
console.log(urlParams);

 

urlSearchParams.set()

: parameter의 value값을 변경. 만약 존재하지 않는 parameterName이라면 append 된다.

let urlParams = new URLSearchParams("?gil=test&log=yes&log=no");

urlParams.set("gil", "yes");
urlParams.set("log", "wow");
urlParams.set("gillog", "good");

// ?gil=yes&log=wow&gillog=good
console.log(urlParams);

 

urlSearchParams.delete()

: parameter를 제거

url.searchParams.delete("param1")

---

# 참고자료

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

https://javascript.info/url

https://velog.io/@gillog/javaScript-URL-Parameter-%EA%B0%92-%EB%8B%A4%EB%A3%A8%EA%B8%B0