[WEB] URL & Location & URLSearchParams

URL은 네트워크 상에서 리소스를 위치 기반으로 식별하기 위한 규약으로, 해당 네트워크 자원에 접근하기 위해서 자원에 알맞은 프로토콜을 이용해야 한다.

http://<host>:<port>/<path>?<searchpart>

웹상에서 URL은 통상적으로 위와 같은 구조를 가진다. 각각의 요소를 설명하면 다음과 같다.

• http : http 프로토콜에 기반해 리소스에 접근한다. URL 자체는 http 이외 수많은 프로토콜에 대해 사용 가능하다.
• host : 호스트 정보를 작성한다. 도메인이 여기에 해당한다.
• port : 특정 기기 내에서 프로세스를 식별하는 번호로, 기본 값은 80으로 지정되어 있다.
• path: 경로 정보를 작성한다. /something 꼴의 경로를 논리적으로 덧붙인다.
• searchpart : 일종의 쿼리를 작성한다. key=value 꼴로 각 요소를 나타내며, 여러개라면 & 혹은 : 으로 묶는다.

 

scheme://<user>:<password>@<host>:<port>/<url-path>

실제 URL은 위와 같이 user 및 password 정보를 추가적으로 가질 수 있도록 정의되어 있다.  user 및 password은 과거에 유저가 특정 서버에 인증을 시도할 때 ( 로그인 할떄 ) 사용했으나, SSL 사용 여부와는 상관 없이 URL 상에 개인의 기밀 정보가 노출되는 방식 자체가 보안에 큰 문제를 발생시키기 때문에 현대에는 거의 사용하지 않으며, 브라우저 및 버전 차이에 따라 이를 처리하는 방식이 달라질 수 있으므로 사실상 사용해서는 안된다. 

Location 인터페이스

 웹 브라우저 상에서 URL은 Location 인터페이스를 통해 접근할 수 있다. 이때 Location 인터페이스는 브라우저 환경을 의미하는 Window나, 문서 환경을 의미하는 Document 인터페이스 등에 포함된다.

 Location 인터페이스는 연결된 객체의 위치 정보와 밀접한 관계가 있으며, Location을 통해 위치 정보를 변경하면 객체가 가리키는 위치에 영향을 줘, URL이 변경될 수 있다. 단, URL이 변경된다고 실제 접근하는 리소스가 반드시 바뀌는 것은 아니다.

Location 인터페이스는 다양한 프로퍼티를 가진다. 프로퍼티들은 DOMString 형식으로, UTF-16 문자열이다. 이는 자바스크립트에서 string 타입의 인코딩 형식과 동일하다.

href

온전한 URL 정보로, 현재 주소창에 명시된 URL과 동일한 값이 부여된 프로퍼티이다. 값을 변경하면 해당 위치로 이동한다. 프로토콜까지 명시하면 실제 주소창에 입력하는 것과 동일하며, 프로토콜을 명시하지 않으면 현재 연결된 사이트 내에서 이동하는 것으로 보인다.

MDN의 Location 문서의 URL

 

href을 입력하면 URL 전체를 반환한다.

---

1) 프로토콜을 명시하지 않은 경우

MDN 사이트 내에서 path로 처리된다.

---

2) 프로토콜을 명시하면,

 

사이트 자체가 변경된다.

 

• protocol : 프로토콜 정보를 나타낸다.
• host : 호스트 명 및 포트 번호를 포함한 호스트 부분을 나타낸다.
• hostname : 도메인 부분을 나타낸다.
• port : 포트 넘버를 나타낸다.
• pathname : URL 경로 정보를 나타낸다.
• search : 쿼리문 값을 나타낸다. ? 이후 # 이전의 문장에 해당한다.
• hash : URL 프래그먼트 식별자의 값을 나타낸다.
• username : 유저 이름을 나타낸다. 
• password : URL상에 명시된 비밀번호 정보를 나타낸다.
• origin : path 이전까지의 정보를 나타낸다.

 

Location 인터페이스에 정의된 메서드를 이용하여 특정 동작을 수행할 수도 있다.

• assign(url) : url에 해당하는 위치로 이동한다. href를 직접 변경하는 것과 유사하다.
• replace(url) : url에 존재하는 리소스로 현재 리소스를 대체한다. 이동이 아니므로 히스토리가 안남는다.
• reload() : 새로고침과 동일하다.

URL 및 URLSearchParams

브라우저 환경에서는 URL 관련 정보를 쉽게 처리할 수 있도록 URL 및 URLSearchParams 메서드를 지원한다.

URL

입력받은 URL을 location 객체처럼 여러가지 정보 단위로 파싱해주는 생성자 함수로, URL 객체를 반환한다. 

• new URL(url [, base]) : 절대 경로 또는 상대 경로 형식의 URL을 입력받아 URL 객체를 생성하는 생성자 함수.
• protocol : 프로토콜 정보를 나타낸다.
• host : 호스트 명 및 포트 번호를 포함한 호스트 부분을 나타낸다.
• hostname : 도메인 부분을 나타낸다.
• port : 포트 넘버를 나타낸다.
• pathname : URL 경로 정보를 나타낸다.
• search : 쿼리문 값을 나타낸다. ? 이후 # 이전의 문장에 해당한다.
• hash : URL 프래그먼트 식별자의 값을 나타낸다.
• username : 유저 이름을 나타낸다. 
• password : URL상에 명시된 비밀번호 정보를 나타낸다.
• origin : path 이전까지의 정보를 나타낸다.
• searchParams: search 쿼리문을 key-value 쌍의 형태로 파싱하여 관리하는 URLSearchParams 객체이다.

 

URLSearchParams

 URL의 쿼리에는 많은 내용이 key=value 형태로 저장되어 있으나, 실제로 사용하기 위해서는 이를 파싱하는 과정이 필요하다. 다행히도 현재 대중적으로 사용하는 많은 브라우저 환경에서는 쿼리문을 파싱해주는 URLSearchParams 메서드의 동작을 구현하고 있다.

 URLSearchParams 내부에서 관리되는 쿼리에는 ? 가 없다. 만약 쿼리를 다시 URL에 사용해야 한다면 ?을 붙인다.

해당 객체가 가진 메서드들은 다음과 같다.  Object와 Set이 적절하게 섞인듯한 느낌이 난다.

• has(key) : key에 대응되는 value가 있는지를 boolean 형식으로 나타낸다.
• get(key) : key에 대응되는 value 값들 중 맨 처음 선택되는 value 하나만 반환한다.
• getAll(key) : key에 대응되는 value 값 모두를 반환한다.
• append(key, value) : key=value 쌍의 쿼리를 추가한다. 단순 추가이므로, key가 중복될 수 있다.
• set(key, value) : key=value 쌍의 쿼리를 설정한다. 동일 key에 대한 value가 전부 없어지고 전달된 값으로 설정된다.
• delete(key) : key에 해당되는 쿼리를 모두 제거한다.

• entries() : key=value 쌍을 순회하기 위한 이터레이터를 반환한다.
• forEach(callback) : 객체 내 값에 대해 callback을 수행한다.
• keys() : 객체에 저장된 모든 key를 이터레이터 형식으로 반환한다.
• values() : 객체에 저장된 모든 value를 이터레이터 형식으로 반환한다.