자바스크립트 : URL을 구문 분석하는 방법

URL 문자열에서 특정 데이터에 액세스하는 방법을 더 잘 이해하기 위해 자바스크립트의 URL 구문 분석 주제를 자세히 살펴볼 것입니다.

자바스크립트의 URL 구문 분석과 URL 문자열에서 특정 데이터에 액세스하는 방법에 대해 자세히 알아보겠습니다. URL의 구성 요소를 호스트 이름, 경로 이름, 쿼리 및 해시와 같은 개별 부분으로 분해하여 각 구성 요소를 스핀으로 사용합니다.

또한 자바스크립트의 URL 문자열을 다룰 때 몇 가지 중요한 팁과 모범 사례를 다룰 것입니다. 따라서 이 기사는 궁극적으로 자바스크립트를 사용하여 URL을 구문 분석하는 것과 관련된 모든 것을 원스톱으로 확인할 수 있습니다. 그러니 뒤로 물러서서 자바스크립트의 URL 작업에 대한 기본 사항을 익힐 준비를 하세요.

 

 

자바스크립트 : URL을 구문 분석하는 방법

 

 

URL 구문 분석이란

웹 응용 프로그램을 만들 때 URL 구문 분석을 이해하는 것은 필수 기술입니다. 웹 페이지 주소를 부분으로 분해하여 더 쉽게 상호 작용하는 과정입니다.

URL 구문 분석을 이해하면 웹 사이트에서 페이지와 정보를 빠르고 쉽게 탐색할 수 있는 기능을 최대한 활용할 수 있습니다.

URL 구문 분석은 탐색에 도움이 될 뿐만 아니라 웹 사이트를 수정하고 데이터에 액세스하는 더 쉬운 방법을 제공합니다. URL 구문 분석을 사용하면 쿼리 문자열을 사용하여 변수와 매개 변수를 다른 페이지로 전달할 수 있으며, 전체 페이지를 새로 고치지 않고 페이지에 나타나는 내용을 변경하여 사용자에게 동적인 경험을 제공합니다.

또한 URL의 경로 이름 부분을 사용하여 데이터베이스에 액세스하여 웹 응용 프로그램이 양식 또는 유사한 입력 필드에 데이터를 포함하지 않고 데이터베이스에서 데이터를 검색할 수 있습니다. 마지막으로 앵커(#로 시작하는 조각)를 사용하여 웹 사이트를 더 부드럽게 탐색할 수 있습니다.

 

 

자바스크립트 URL 파싱 방법의 개요

URL을 구성 요소 조각으로 분해하는 것은 웹 개발의 필수적인 부분입니다. URL의 구조를 이해하면 백엔드 서비스와 쉽게 상호 작용하고 원격 소스에서 데이터를 검색할 수 있습니다.

자바스크립트를 사용하면 URL을 구문 분석하고 URL에서 더 많은 정보를 얻는 데 사용할 수 있는 몇 가지 방법이 있습니다. 여기에는 URL, URLsearchParams, URLsearchParamsAPI, location, window.location 등이 포함됩니다.

각각의 방법에는 장점과 단점이 있습니다. 각각의 방법을 살펴봅시다:

URL: 기본 URL 개체를 사용하여 URL을 만들고, 조작하고, 해당 부분을 조회하거나 구성 요소에 대한 새 값을 설정할 수 있습니다. 암호 또는 다른 개인 데이터와 같은 중요한 정보를 포함하는 인코딩/디코딩 문자열과 같은 유용한 기능도 제공합니다.

URL 검색 매개 변수: 이 메서드는 URL의 쿼리 매개 변수에 해당하는 키-값 쌍의 개체를 만듭니다. 이 메서드를 사용하여 다른 매개 변수를 만들고 필요에 따라 해당 매개 변수의 값을 설정할 수 있습니다.

URLsearchParams API: 이 API는 URLsearchParams 개체의 핵심 기능에 대한 액세스를 제공하므로 URL의 모든 요소를 직접 구문 분석할 필요 없이 반복할 수 있는 등 강력한 방식으로 URL을 조작할 수 있습니다.

location: 이 속성은 호스트 이름, 경로 이름, 검색 및 해시 구성 요소를 포함하여 현재 위치를 나타내는 개체를 반환하므로 필요할 때마다 URL을 수동으로 구성할 필요 없이 응용 프로그램 내에서 링크를 만들 수 있습니다.

window.location: 위치와 유사하게 이 속성은 개체도 반환합니다.

 

 

JavaScript URL 구문 분석에서 호스트 이름 이해

호스트 이름은 웹 페이지나 웹 사이트를 방문할 때 사용하는 도메인 이름입니다. 일반적으로 www.example.com 과 같이 보입니다. 경우에 따라 https://216.58.165.46과 같은 IP 주소를 사용할 수도 있습니다.

JavaScript의 location.hostname API 메서드를 통해 현재 방문 중인 페이지의 호스트 이름을 얻을 수 있습니다:

let hostname = window.location.hostname;

 

 

이 API 메서드는 현재 방문 중인 페이지의 도메인 이름(예: www.example.com )이 있는 문자열을 반환합니다.

호스트 이름 API 메서드에는 사용된 프로토콜(즉, http 또는 https)과 같은 도메인 이름에 대한 보다 구체적인 정보를 반환하는 데 사용할 수 있는 다른 두 가지 유용한 방법이 있습니다. 이는 location.protocol과 location.port입니다.

예를 들어 호스트 이름이 www.example.com 이고 HTTPS를 사용하여 액세스하는 경우 이 코드는 다음과 같이 반환합니다:

let protocol = window.location.protocol; // returns "https:"
let port = window.location.port; //returns "" (empty string)

 

 

그러나 HTTPS 대신 HTTP를 사용하는 경우 다음 두 가지 방법으로 대신 반환됩니다:

let protocol = window .location .protocol; // returns "http:"
let port = window .location .port; //returns "80" (default HTTP port number)

 

 

JavaScript URL 구문 분석에서 경로 이름 이해

이제 호스트 이름과 쿼리 문자열이 무엇인지 이해했습니다. URL 구문 분석의 네 번째이자 마지막 부분인 자바스크립트의 경로 이름을 살펴보겠습니다.

경로 이름은 웹 서버의 파일이나 리소스 위치를 설명합니다. 포워드 슬래시 /로 시작한 다음 디렉터리 이름이 나옵니다. 영화, 음악, 문학 등으로 구성된 블로그 폴더에 있는 인덱스.html에 액세스하려고 합니다. 경로 이름은 /blog/films/index.html과 같이 보입니다.

예를 들어 HTML 페이지를 CSS로 스타일을 지정하면 경로 이름이 CSS 파일의 위치를 알려줍니다. 예를 들어 /blog/films/css/style.css와 같습니다.

자바스크립트를 사용하여 경로 이름을 얻는 방법을 살펴보겠습니다. 아래 코드 조각을 사용하기만 하면 됩니다:

let url = new URL('https://example.com/blog/films');
let getpathname = url.pathname; // '/blog/films'

 

 

사용자에게 특정 파일을 지정하지 않으면 앞서 언급한 대로 대부분의 웹 서버에서 index.html이 기본 문서로 사용됩니다.

 

 

JavaScript URL 구문 분석에서 쿼리 문자열과 해시의 작동 방식

이제 호스트 이름, 경로 이름 및 매개 변수를 더 잘 이해했으므로 URL의 다음 부분인 쿼리 문자열과 해시를 살펴보겠습니다. 쿼리 문자열과 해시는 URL의 추가 부분을 지정하는 데 사용됩니다:

쿼리 문자열은 페이지에 대한 상황 정보를 서버로 전달하는 데 매우 유용합니다.

해시는 로드 직후 표시할 페이지의 특정 부분을 지정하는 데 사용됩니다.

쿼리 문자열과 해시가 무엇인지 이해하기 위해 다음 예제를 살펴보겠습니다:

http://example.com/search?q=javascript#hashtag.

 

 

이 예에서 q=cascript는 서버에 전달하는 검색 쿼리를 나타내며 #cascript는 로드 후 페이지를 해당 부분으로 바로 이동시킬 수 있는 앵커를 나타냅니다.

쿼리 문자열과 해시는 JavaScript의 window.location 개체를 사용하여 액세스할 수 있습니다.

예제 URL의 쿼리 문자열에 액세스하려면 window.location.search를 호출해야 합니다. 그러면 q=script가 반환됩니다.

값에만 액세스하려면 구문 창.location.search.search.javascript=')[1]을 사용해야 합니다.

마찬가지로 해시의 경우 window.location.hash를 사용하면 #hashtag만 반환됩니다.

 

 

ES6 Disstructuring 구문을 사용하여 URL 작업

자바스크립트에서 URL을 구문 분석하는 방법을 이해하는 다음 단계는 ES6의 구조 구문을 사용하는 방법을 배우는 것입니다. 이는 우리가 다룬 이전 방법보다 약간 더 발전되었지만 가장 편리하기도 합니다.

ES6의 구조 구문을 사용하여 URL의 일부를 개별 변수로 분해할 수 있습니다. 이를 수행하려면 URL을 곱슬곱슬하게 감싸고 = 기호를 사용하여 변수(const {protocol, hostname, port }) = 새 URL(url)을 할당하기만 하면 됩니다.

이렇게 하면 URL 문자열의 각 부분(프로토콜, 호스트 이름 및 포트)이 코드 전체에서 자유롭게 사용할 수 있는 고유 변수에 할당됩니다. 이 방법은 특히 개체 내의 속성을 할당하거나 함수에 인수를 제공하는 데 유용합니다.

const { protocol, hostname, port } = new URL(url);
const user = {
protocol: protocol,
domain: hostname,
port: port
};

 

 

이제 몇 가지 예를 살펴보겠습니다:

 

 

예 1: URL에서 호스트 이름 구문 분석

호스트 이름을 구문 분석하려면 URLSearchParams 인스턴스의 호스트 이름 속성을 사용합니다. 그러면 지정된 URL의 호스트 이름 부분이 반환됩니다:

let href = "https://www.example.com:8080/search#fragment?q=hello";
let url = new URLSearchParams(href);
console.log(url.hostname); // Output: www.example.com

 

위의 예에서는 콘솔에서 호스트 이름을 로그아웃하고 www.example.com 의 출력을 얻습니다.

따라서 이러한 방법으로 주어진 URL에서 자바스크립트를 사용하는 호스트 이름 부분을 쉽게 확인할 수 있습니다.

 

 

예 2: URL에서 경로 이름 구문 분석

또한 다음과 같은 자바스크립트를 사용하여 주어진 URL에서 경로 이름을 구문 분석할 수 있습니다:

let href = "https://www.example.com/path/to/file";
let url = new URLSearchParams(href);
console.log(url.pathname); // Output: /path/to/file

 

코드 예제에서는 URLSearchParams의 인스턴스를 만든 다음 pathName 속성을 사용하여 특정 URL(이 경우 '/path)에서 경로 세그먼트에만 액세스할 수 있습니다.

 

 

결론

대체로, URL 파싱은 웹 개발의 중요한 부분이며, 자바스크립트는 URL을 쉽게 파싱할 수 있는 강력한 옵션 세트를 제공합니다.

호스트 이름, 경로 이름, 쿼리 및 해시 속성을 사용하면 URL을 구성 요소로 분해하여 웹 응용 프로그램을 구축하고 내용을 쉽게 조작할 수 있습니다.

이 가이드에 설명된 단계를 수행하면 빠르고 쉽게 URL을 구문 분석하여 목표에 한 걸음 더 다가설 수 있습니다.