URL의 경로 이름을 찾는 방법 - Javascript

이 기사에서는 string를 URL로 변환하고 URL(Uniform Resource Locator) 속성을 조작하는 방법에 대한 지식을 공유합니다.

시작하자 🚀

시나리오 1

애플리케이션에서 사용하려면 현재 웹 페이지의 URL에서 현재pathname가 필요합니다.

해결책

window 객체로 현재 웹 페이지의 URL을 얻을 수 있습니다. 다음 코드는 현재 문서의 location 개체를 제공합니다.

console.log(window.location);

window.location는 다음 위치 개체를 읽기 전용 결과로 반환합니다.

{
  hash: ""
  host: "https://devbajwa.com"
  hostname: "https://devbajwa.com"
  href: "https://devbajwa.com/programming/languages/javascript/objects"
  origin: "https://devbajwa.com"
  pathname: "/programming/languages/javascript/objects"
  port: ""
  protocol: "https:"
  search: ""
}

window.location 개체에는 현재 문서의 위치에 대한 정보를 전달하는 여러 속성이 있습니다.

이제 다음 URL이 현재 문서https://devbajwa.com/programming/languages/javascript/objects라고 가정합니다.

헥사

window.location.href는 현재 문서의 절대 URL을 제공합니다.

console.log(window.location.href)
->
"https://devbajwa.com/programming/languages/javascript/objects"

경로명

마찬가지로 pathname 속성으로 window.location.pathname에 액세스할 수 있습니다. 상대 URL이라고도 합니다.

console.log(window.location.pathname)
->
"/programming/languages/javascript/objects"

시나리오 2

fetch API 호출에서 JSON 데이터를 수신하고 절대 URL로 응답을 받습니다. 우리는 그 절대 URL의 pathname가 필요합니다.

API 호출의 응답은 string 개체가 아닌 window.location 형식이므로 해당 location 값(URL)에 대한 pathname 또는 string 속성에 액세스할 수 없습니다.

예시

const absoluteURL = "https://devbajwa.com/programming/languages/javascript/objects";

console.log(absoluteURL.location);
->
undefined

사용자 지정location 형식 URL의 개체string에 액세스하려고 하면 undefined 응답을 받게 됩니다.

해결책

URL에 액세스하고 조작하는 최신 URL API를 활용할 수 있습니다. new URL(string)는 string 형식 URL을 구문 분석하고 속성을 통해 통합 부품에 대한 액세스를 제공합니다.
string 형식의 URL을 new URL() 함수에 전달하기만 하면 이제 결과 값이 URL가 됩니다. 우리는 다양한 속성에 액세스할 수 있습니다.

헥사

const absoluteURL = new URL("https://devbajwa.com/programming/languages/javascript/objects");

console.log(absoluteURL.href);
->
"https://devbajwa.com/programming/languages/javascript/objects"

경로명

const absoluteURL = new URL("https://devbajwa.com/programming/languages/javascript/objects");

console.log(absoluteURL.pathname);
->
"/programming/languages/javascript/objects"

코데펜

결론

Modern Javascript는 요즘 점점 더 선언적이되고 있습니다. 사용 가능한 최신 웹 API를 활용하여 코드를 더 읽기 쉽고 개발자 친화적으로 만들어야 합니다. 단, check on the browser support 보관 후 사용해주세요 :)