[JS] url 다루기

url 관련 용어 정리

1. 1. URL (Uniform Resource Locator): URL은 웹에서 특정 리소스의 위치를 가리키는 주소입니다. 주로 웹 브라우저를 통해 해당 리소스에 접근할 수 있도록 합니다. URL은 일반적으로 다음과 같은 형식을 가집니다: protocol://domain:port/path?query#fragment
   2. Protocol: 프로토콜은 클라이언트와 서버 간의 통신 방식을 지정하는 부분입니다. 대표적인 프로토콜로는 HTTP, HTTPS, FTP, SMTP 등이 있습니다.
   3. Domain: 도메인은 웹 사이트나 서버의 주소를 나타내는 부분입니다. 예를 들어, "www.example.com"이 도메인입니다.
   4. Port: 포트는 서버 내에서 특정 애플리케이션에 연결하기 위한 숫자입니다. 일반적으로 생략되며, 생략 시 기본 포트 (예: HTTP의 경우 80, HTTPS의 경우 443)로 연결됩니다.
   5. Path: 경로는 서버 내의 특정 리소스의 경로를 나타냅니다. 슬래시로 구분된 문자열 형태를 가지며, 예를 들어 "/blog/posts"는 서버 내의 "posts"라는 리소스에 접근하는 경로를 나타냅니다.
   6. Query Parameters: 쿼리 파라미터는 URL에 추가 정보를 전달하기 위한 것입니다. URL의 끝에 물음표(?) 뒤에 키-값 쌍으로 나타납니다. 각 쌍은 key=value 형태로 구성되며, 여러 개의 쌍은 앰퍼샌드(&)로 구분됩니다. 예를 들어, ?page=2&category=tech와 같이 사용할 수 있습니다.
   7. Fragment: 프래그먼트는 웹 페이지 내에서 특정 섹션을 가리키기 위한 것으로, 페이지 내부의 앵커로 이동할 때 사용됩니다. URL의 끝에 # 뒤에 프래그먼트 이름을 붙여서 사용합니다.
   8. Href: href는 HTML의 하이퍼링크 엘리먼트(<a>)에서 사용되며, 클릭하면 해당 링크의 URL로 이동하게 됩니다. 이것은 주로 웹 페이지 내에서 다른 페이지나 리소스로의 링크를 만들 때 사용됩니다.
   9. Pathname: pathname은 URL에서 도메인 이후의 경로 부분을 나타냅니다. 즉, 프로토콜, 도메인, 포트 다음부터 경로 끝까지의 부분을 의미합니다.

JavaScript에서 url을 다루는 방법

대표적으로 window.location 객체와 URL 생성자를 활용하여 URL을 조작하고 정보를 추출할 수 있습니다.

1.  window.location 객체: window.location 객체는 현재 페이지의 URL 정보를 가지고 있는 객체입니다. 이 객체를 통해 URL의 프로토콜, 도메인, 경로, 쿼리 등의 정보를 가져오거나 변경할 수 있습니다.

// 현재 페이지의 URL 정보 가져오기
const currentURL = window.location.href;
const protocol = window.location.protocol;
const hostname = window.location.hostname;
const pathname = window.location.pathname;
const search = window.location.search; // 쿼리 스트링

// URL 변경하기 (새로운 URL로 페이지 이동)
window.location.href = "https://www.example.com/newpage";

// 페이지 리로딩
window.location.reload();

2. URL 생성자: URL 생성자는 URL을 파싱하고 생성하기 위한 기능을 제공하는 내장 객체입니다. 이를 사용하여 URL의 각 구성 요소를 분리하거나 새 URL을 생성할 수 있습니다.

// URL 파싱
const url = new URL("https://www.example.com/page?param=value");
console.log(url.protocol); // "https:"
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/page"
console.log(url.search);   // "?param=value"

// 새 URL 생성
const newURL = new URL("https://www.example.com");
newURL.pathname = "/newpage";
newURL.searchParams.set("param", "newvalue");
console.log(newURL.href); // "https://www.example.com/newpage?param=newvalue"

3. URLSearchParams 객체: URLSearchParams 객체는 쿼리 스트링을 다루는데 사용됩니다. 쿼리 스트링의 파라미터를 추가, 삭제, 수정하고, 쿼리 파라미터를 가져오는 메서드를 제공합니다

const url = new URL("https://www.example.com/page?param=value");
const searchParams = url.searchParams;

// 쿼리 파라미터 값 가져오기
const paramValue = searchParams.get("param");

// 쿼리 파라미터 추가 및 변경
searchParams.set("newParam", "newValue");
searchParams.delete("param");

console.log(url.href); // "https://www.example.com/page?newParam=newValue"

 

cf) api에서 request로 url 접근하기 

export async function GET(req: Request, { params }: IParams) {
    try {
        const { searchParams } = new URL(req.url);
        console.log(searchParams.get('name'));


    } catch (error) {
        console.log('[products_GET]', error);
        return new NextResponse('Internal error', { status: 500 });
    }
}

The Request interface of the Fetch API represents a resource request.

Fetch API - Web APIs | MDN

Request에는 전달 한 데이터가 담긴 body,

요청에 대한 Headers 객체와 관련 된 headers

요청에 대한 메서드 정보가 담긴 method (GET,POST 등등)

요청에 대한 URL 정보가 담긴 url 메서드가 있음