자바스크립트 실무 유틸 함수 시리즈 22 - URL 및 쿼리 파라미터 처리 유틸

이번 22편에서는 URL을 파싱하거나 쿼리 문자열을 조작하는 데 유용한 유틸 함수들을 정리합니다. 페이지 라우팅, 파라미터 추출 및 수정 등 다양한 실무 상황에서 자주 활용됩니다.

---

✅ 1. getQueryParam (쿼리 파라미터 값 가져오기)

📌 현재 URL 또는 주어진 URL에서 특정 쿼리 값 반환

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

📌 활용 예시

(예: 현재 페이지 URL에서 'page' 파라미터 추출)

getQueryParam('page');

---

✅ 2. setQueryParam (쿼리 파라미터 설정)

📌 URL에 쿼리 파라미터를 추가 또는 수정

function setQueryParam(url, key, value) {
  const u = new URL(url);
  u.searchParams.set(key, value);
  return u.toString();
}

📌 활용 예시

(예: 기존 URL에 page=2 추가 또는 수정)

setQueryParam('https://example.com?sort=asc', 'page', 2);

---

✅ 3. removeQueryParam (쿼리 파라미터 제거)

📌 특정 쿼리 키 제거 후 URL 반환

function removeQueryParam(url, key) {
  const u = new URL(url);
  u.searchParams.delete(key);
  return u.toString();
}

📌 활용 예시

(예: 'utm_source' 파라미터 제거)

removeQueryParam('https://example.com?utm_source=google&page=1', 'utm_source');

---

✅ 4. getAllQueryParams (모든 쿼리 파라미터 객체 반환)

📌 쿼리 문자열을 객체 형태로 반환

function getAllQueryParams(url = window.location.href) {
  const params = new URL(url).searchParams;
  return Object.fromEntries(params.entries());
}

📌 활용 예시

(예: URL에 포함된 모든 파라미터 확인)

getAllQueryParams('https://example.com?lang=ko&page=3');
// { lang: 'ko', page: '3' }

---

✅ 5. getBaseURL (쿼리 제거된 순수 URL 반환)

📌 쿼리 스트링 없는 기본 URL 반환

function getBaseURL(url = window.location.href) {
  const u = new URL(url);
  u.search = '';
  return u.toString();
}

📌 활용 예시

(예: 공유용 URL 생성 시 쿼리 제거)

getBaseURL('https://example.com?page=2&ref=naver');
// 'https://example.com/'

---

✅ 결론

URL 및 쿼리 파라미터 처리는 사용자 경험과 데이터 추적에 있어 매우 중요한 요소입니다. 이번 시리즈에서 다룬 함수들은 복잡한 URL 조작을 보다 쉽게 구현할 수 있도록 도와줍니다.