[JavaScript] URL API 및 URL 구성 요소

본 글은 hash change와 history API를 공부하고 기술하기 위해 URL API를 훑어보기 위한 글 이며 MDN문서를 참고하였습니다.

URL API

URL API는 '유효한' Uniform Resource Locator을 구성하는 요소와 URL에 엑세스하고
조작하는 API를 정의하는 URL 표준의 구성 요소입니다.

앞선 설명에 덧붙여 MDN에는 URL 표준은 도메인, 호스트 및 IP 주소와 같은 개념을 정의하며, 웹 양식의 내용을 키/값 쌍의 집합으로 제출하는 데
사용되는 레거시 응용 프로그램application/x-www-form-urlencoded인코딩 MIME 유형을 표준 방식으로 설명하려고 시도한다 라고 되어있습니다.

---

URL

URL 인터페이스는 URL을 분석, 생성, 정규화, 인코딩 할 때 사용됩니다.
URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공합니다.
URL 객체 생성은 생성자 전체 URL 문자열, 또는 상대 URL과 기준 URL을 생성자에 전달해 진행합니다.
생성한 URL 객체를 사용해 URL 객체를 사용해 URL을 쉽게 바꾸거나 읽을 수 있습니다

브라우저가 아직 URL() 생성자를 지원하지 않을 땐 Window인터페이스의 Window.URL속성으로 URL객체에 접근할 수 있습니다.

생성자

new URL()
주어진 절대 URL, 또는 상대 URL과 기준 URL 문자열을 사용해 생성한 URL객체를 생성하고 반환합니다.

const url = new URL(url[, base])

/*
절대 또는 상대 URL을 나타내는 USVString. url이 상대 URL인 경우 base 매개변수를 기준 URL로 사용하므로 base도 필수로 지정해야 합니다.
절대 URL인 경우 base는 무시됩니다.
*/

// base url에 맞춰 상대경로 지정
new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto"); // 'https://developer.mozilla.org/en-US/docs'
// base url이 없어 에러 발생
new URL('/en-US/docs', '') // Raises a TypeError exception as '' is not a valid URL
// 절대 경로 url이 아닌 이상 base 매개변수는 필수로 입력되어야함.
new URL('/en-US/docs'); // Raises a TypeError exception as '/en-US/docs' is not a valid URL

속성

속성명	설명
hash	#과 URL의 프래그먼트 식별자를 담은 USVString입니다.
host	URL의 도메인(호스트 이름), ':', 포트를 담은 USVString입니다.
hostname	URL의 도메인을 담은 USVString입니다.
href	전체 URL을 반환하는 문자열화 속성입니다.
origin	URL의 출처, 즉 스킴, 도메인, 포트를 담은 USVString입니다.
password	도메인 이름 이전에 지정된 비밀번호를 담은 USVString입니다.
port	URL의 포트 번호를 담은 USVString입니다.
protocol	URL의 프로토콜 스킴을 담은 USVString입니다. 마지막 ':'을 포함합니다.
search	URL의 매개변수 문자열을 나타내는 USVString입니다. 어떤 매개변수라도 존재하는 경우 '?'문자로 시작해, 모든 매개변수를 포함합니다.
searchParms	search속성의 매개변수 각각에 접근할 수 있는 URLSearchParams객체 입니다.
username	도메인 이름 이전에 지정된 사용자 이름을 담은 USVString입니다.

메서드

메서드	설명
toString	전체 URL을 담은 USVString을 반환합니다. URL.href와 동일하나, toString() 으로는 URL을 편집할 수 없습니다.
toJSON()	전체 URL을 담은 USVString을 반환합니다. URL.href 와 동일한 문자열을 반환합니다.

정적 메서드

정적 메서드	설명
createObjectURL	고유한 블룹 URL, 즉 blob:을 스킴으로 하고, 브라우저 내의 객체를 가리키는 고유한 불투명 문자열을 그 뒤에 붙인 DOMString을 반환합니다.
revokeObjectURL()	이전에 URL.crateObjectURL()로 생성한 객체 URL을 취소합니다.

---

URL 구성요소

위와 같은 순서로 URL은 구성됩니다.
이미지 출처: https://www.zerocho.com

예시)

const url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL_API')

console.log(url)
/*
URL {
  href: 'https://developer.mozilla.org/en-US/docs/Web/API/URL_API',
  origin: 'https://developer.mozilla.org',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'developer.mozilla.org',
  hostname: 'developer.mozilla.org',
  port: '',
  pathname: '/en-US/docs/Web/API/URL_API',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}
*/

• href

  • href : 다른 웹 페이지나 같은 페이지 다른 부분에 연결하는데 사용되는 HTML 속성, url 전체를 칭합니다.
  • 내용 : https://developer.mozilla.org/en-US/docs/Web/API/URL_API

• origin

  • origin : Protocol, Host, Port를 합친것 * username, password는 포함하지 않습니다.
  • 내용 : https://developer.mozilla.org

• protocol

  • protocol : 데이터 통신을 원활하게 하기 위해 필요한 것들을 정해놓은 통신 규약.
  • 내용 : HTTP (Hyper Text Transfer Protocol) 웹 서버 및 웹 브라우저 상호 간의 데이터 전송을 위한 응용계층 프로토콜입니다.
  • 인터넷을 작동시키는 역할을 합니다. HTTP를 통해 전달되는 자료는 URL로 표시됩니다.

    • 현재는 보안을 위해 SSL(Secure Socket Layer) 인증서를 사용하는 HTTP인 HTTPS를 사용합니다.
      SSL인증서는 일반 HTTP 요청 및 응답을 암호화 합니다. 즉, HTTPS는 HTTP보다 더 안전한 보안용 프로토콜 입니다.

• host

  • host : 네트워크 호스트 라고도 불리며 정보 리소스, 서비스, 애플리케이션을 네트워크 상의 사용자나 기타 노드에 제공할 수 있습니다.
  • 내용 : developer.mozilla.org

• hostname

  • hostname : host에서 port 번호를 제거한 부분을 말합니다. 현재 예제 URL에는 port번호가 명시되어있지 않기 때문에 host와 같은 값이 나옵니다.
  • 내용 : developer.mozilla.org

• port

  • port : 포트 주소는 소프트웨어에서 네트워크 서비스나 특정 프로세스를 식별하는 논리 단위를 말합니다. 번호로 구별되며, 이 번호를 포트 번호라고합니다.
  • 내용 : ' '

    웹 (www)의 포트 번호는 80입니다.

• pathname

  • pathname : path 즉 경로의 이름을 말합니다. 앞서 통신 규약(프로토콜)을 명시하고 또 host 즉 정보를 주고받을 컴퓨터 이름을 명시 했으니 그 컴퓨터에 어느 경로로 들어갈 것인지를 명시합니다.
  • 내용 : /en-US/docs/Web/API/URL_API

• search

  • search : url 인터페이스의 속성으로 쿼리 문자열 이라고도 하는 검색 문자열로 url의 매개변수 뒤에 ?가 오는 문자열 입니다.
    최신 브라우저는 URL.searchParams 속성을 제공하여 쿼리 문자열에서 매개 변수를 쉽게 구문 분석할 수 있도록 한다고 합니다.
  • 내용 : ' '

• searchParams

  • searchParams : GET 요청 시 데이터를 전달 할 때 사용합니다. 기존에는 search 부분을 수정하는 함수를 직접 구현해야 했지만, 이제는 브라우저가 제공합니다.
  • 내용 : URLSearchParams {} searchParams는 메서드로 조작합니다.

• hash

  • hash : url에 '#'뒤에 나오는 식별자를 값으로 하는 DOMString입니다.
    hash를 통해 원하는 anchor로 이동할 수 있으며, ajax 호출, 뒤로가기 등을 사용 가능합니다. window.location 속성을 통해 접근할 수 있습니다.
  • 내용 ' '

---