URL과 URLSearchParams 활용법

URL과 URLSearchParams 개요

웹 개발을 하다 보면 브라우저의 주소창에 보이는 URL을 다루거나, URL의 쿼리 문자열을 분석해야 하는 경우가 많습니다. 이때 유용하게 사용할 수 있는 것이 URL과 URLSearchParams입니다. 이 두 가지는 자바스크립트에서 제공하는 내장 객체로, URL을 쉽고 직관적으로 다룰 수 있도록 도와줍니다.

---

URL 객체의 기본 사용법

URL 객체는 전체 URL을 분해하거나 조작할 때 사용됩니다. URL 생성자는 전체 URL 문자열을 받아 객체를 생성합니다.

URL 객체 생성하기

const siteUrl = new URL('https://www.example.com:8080/path/to/page?category=books&sort=asc#section2');

console.log(siteUrl);

이렇게 생성된 URL 객체는 여러 속성을 제공합니다.

주요 속성

• href: 전체 URL 문자열
• protocol: URL의 프로토콜 (예: https:)
• hostname: 도메인 이름 (예: www.example.com)
• port: 포트 번호 (예: 8080)
• pathname: 경로 (예: /path/to/page)
• search: 쿼리 문자열 (예: ?category=books&sort=asc)
• hash: 해시 (예: #section2)

예제: URL 속성 확인

console.log(siteUrl.href);       // "https://www.example.com:8080/path/to/page?category=books&sort=asc#section2"
console.log(siteUrl.protocol);   // "https:"
console.log(siteUrl.hostname);   // "www.example.com"
console.log(siteUrl.port);       // "8080"
console.log(siteUrl.pathname);   // "/path/to/page"
console.log(siteUrl.search);     // "?category=books&sort=asc"
console.log(siteUrl.hash);       // "#section2"

이처럼 URL의 각 부분을 손쉽게 추출할 수 있습니다.

---

URLSearchParams의 활용

URLSearchParams는 URL의 쿼리 문자열을 조작하는 데 특화된 객체입니다. URL 객체의 searchParams 속성을 통해 쉽게 사용할 수 있습니다.

URLSearchParams 객체 생성하기

const queryParams = new URLSearchParams('category=books&sort=asc');

또는 URL 객체와 함께 사용하면 더 편리합니다.

const siteUrl = new URL('https://www.example.com/path?category=books&sort=asc');
const queryParams = siteUrl.searchParams;

주요 메서드

• get(key): 특정 쿼리 매개변수의 값을 가져옵니다.
• set(key, value): 특정 쿼리 매개변수의 값을 설정합니다.
• append(key, value): 동일한 키에 새로운 값을 추가합니다.
• has(key): 특정 쿼리 매개변수가 존재하는지 확인합니다.
• delete(key): 특정 쿼리 매개변수를 삭제합니다.
• toString(): 쿼리 문자열로 변환합니다.

예제: 쿼리 매개변수 조작하기

console.log(queryParams.get('category')); // "books"
queryParams.set('sort', 'desc');          // sort=desc로 변경
queryParams.append('page', '2');          // page=2 추가
queryParams.delete('category');           // category 삭제

console.log(queryParams.toString());      // "sort=desc&page=2"

---

URL과 URLSearchParams를 활용한 실전 예제

예제 1: 사용자가 선택한 필터를 URL에 반영하기

function updateURL(category, sort, page) {
    const currentUrl = new URL(window.location.href);
    currentUrl.searchParams.set('category', category);
    currentUrl.searchParams.set('sort', sort);
    currentUrl.searchParams.set('page', page);

    window.history.pushState({}, '', currentUrl);
}

updateURL('movies', 'popular', 3);

이렇게 하면 브라우저의 주소창이 ?category=movies&sort=popular&page=3로 변경됩니다.

예제 2: URL에서 쿼리 매개변수 읽어오기

function getQueryParam(key) {
    const currentUrl = new URL(window.location.href);
    return currentUrl.searchParams.get(key);
}

const selectedCategory = getQueryParam('category');
console.log(selectedCategory); // 현재 URL에 따라 출력값이 달라짐

---

URL과 URLSearchParams의 장점

1. 가독성 향상: 문자열 파싱 없이 직관적으로 URL과 쿼리 매개변수를 다룰 수 있습니다.
2. 에러 감소: 수동으로 문자열을 처리할 때 발생할 수 있는 오류를 줄여줍니다.
3. 브라우저 호환성: 최신 브라우저에서 널리 지원되며, 특히 URLSearchParams는 HTTP 요청을 보낼 때 유용합니다.

---

주의할 점

• 브라우저 호환성: 구형 브라우저(특히 Internet Explorer)에서는 URLSearchParams가 지원되지 않습니다. 필요한 경우 폴리필을 사용해야 합니다.
• URL 인코딩: URLSearchParams는 자동으로 URL 인코딩을 처리합니다. 그러나 서버와의 호환성을 위해 추가적인 처리가 필요할 수 있습니다.

---

결론

URL과 URLSearchParams는 URL을 다루는 과정을 매우 간단하고 직관적으로 만들어줍니다. 웹 개발에서 URL 파싱, 쿼리 문자열 조작, 상태 관리 등 다양한 상황에서 활용할 수 있으며, 코드의 가독성과 유지 보수성을 높이는 데 큰 도움이 됩니다.