[JS] URL생성자 기초 정리

 

URL 생성자

URL(Uniform Resource Locator) 생성자는 웹 페이지나 파일 등을 나타내는 고유한 주소를 생성하는 데 사용됩니다. URL 생성자는 일반적으로 프로그래밍 언어에서 지원되며, URL 문자열을 동적으로 생성하거나 파라미터를 추가하거나 수정하여 원하는 URL을 만들 수 있습니다.

대부분의 URL 생성자는 다음과 같은 구성 요소를 가지고 있습니다.

- 프로토콜: URL이 사용하는 프로토콜 (http, https, ftp 등)을 지정합니다.
- 호스트: 웹 사이트의 도메인 이름이나 IP 주소를 지정합니다.
- 포트: 서버의 포트 번호를 지정합니다.
- 경로: 웹 페이지나 파일의 경로를 지정합니다.
- 쿼리 문자열: URL의 쿼리 문자열을 지정합니다. 이 문자열은 일반적으로 웹 페이지에서 사용되는 검색어나 파라미터를 지정하는 데 사용됩니다.
- 프래그먼트 식별자: URL 내에서 특정 위치를 가리키는 식별자를 지정합니다.

 

new URL(url, [base])

새 개체를 만드는 구문 URL:

new URL(url, [base])

• url– 전체 URL 또는 유일한 경로(기본이 설정된 경우 아래 참조),
• base– 선택적 기본 URL: 설정 및 url인수에 경로만 있는 경우 URL은 에 상대적으로 생성됩니다 base.

예를 들어:

let url = new URL('https://javascript.info/profile/admin');

다음 두 URL은 동일합니다.

 

 

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin

기존 URL에 상대적인 경로를 기반으로 새 URL을 쉽게 만들 수 있습니다.

 

 

let url = new URL('https://javascript.info/profile/admin');
let newUrl = new URL('tester', url);

alert(newUrl); // https://javascript.info/profile/tester

개체 URL는 즉시 해당 구성 요소에 액세스할 수 있도록 하므로 URL을 구문 분석하는 좋은 방법입니다. 예를 들면 다음과 같습니다.

 

 

let url = new URL('https://javascript.info/url');

alert(url.protocol); // https:
alert(url.host);     // javascript.info
alert(url.pathname); // /url

 

사용예 : URL 파싱 방법

const url = new URL('https://stackoverflow.com/questions?tab=Active');

console.log(url.protocol); // https:
console.log(url.pathname); // /questions
console.log(url.origin);   // https://stackoverflow.com
console.log(url.search);   // ?tab=Active
console.log(url.host);     // stackoverflow.co