[JS] URL 파라미터(쿼리파라미터Query Parameter)가져오기

💡 핵심 요약 (TL;DR)

URL 파라미터(쿼리파라미터Query Parameter)가져오기의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. 정말 초간단한 Query Parameter 가져오는 방법은 URL객체를 사용하는 것이다.

정말 초간단한 Query Parameter 가져오는 방법은 URL객체를 사용하는 것이다.

네이버 검색을 예로 들어보자.
아래와 같은 URL에서 query=가나다만 가져오고 싶다면 어떻게 해야할까?

https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=가나다

URLSearchParams

URLSearchParams 객체를 활용하면 된다!

const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get('query'); 
console.log(query)
//output: 가나다

해결!

참고

• MDN URLSearchParams 객체
• js에서 URL 파라미터(쿼리파라미터Query Parameter)가져오기
• jsp에서 URL 파라미터(쿼리파라미터Query Parameter)가져오기(ft.EL표현식)