URL, URI, Location 객체

Jayden ·2023년 8월 9일
0

1. URI(Uniform Resource Identifier)

인터넷에 있는 자원을 나타내는 유일한 주소. URI의 하위계념으로 URL, URN이 있다.

만일 다음과 같은 경로가 존재한다고 한다면,

https://www.lemonade4813.com:443/docs/search?category=restaurant&lang=ko#intro

1. URI
https://www.lemonade4813.com:443/docs/search?category=restaurant&lang=ko#intro

2. URL
https://www.lemonade4813.com:443/docs/search

3. URN
www.lemonade4813.com:443/docs/search?category=restaurant&lang=ko#intro

4. Scheme(protocol)
https

5. Host(Domain)
www.lemonade4813.com

6. Port
80
7. Path
/docs/search

8. query
category=restaurant&lang=ko

9. Fragment
#intro

2. location 객체

위의 주소를 javascript의 location 객체의 속성을 사용하여 콘솔로 표시하면 다음과 같습니다.

1. href

전체 URL이 포함된 문자열 입니다.

console.log(location.href);

-> https://www.lemonade4813.com:443/docs/search?category=restaurant&lang=ko#intro

2. protocol

프로토콜을 반환합니다.(http/https 등)

console.log(location.protocol);

-> https:

3. hostname

console.log(location.hostname)

-> localhost:3000

4. pathname

console.log(location.pathname)

URL의 포트번호 이후의 경로를 반환합니다.

-> /docs/search

5. search

URL의 query String을 반환합니다.

console.log(location.search);

-> ?category=restaurant&lang=ko

6. Hash

URL의 query String을 반환합니다.

console.log(location.hash);

-> #intro

profile
프론트엔드 개발자

2개의 댓글

comment-user-thumbnail
2023년 8월 9일

유익한 글이었습니다.

1개의 답글