전문가처럼 Querystring 빌드

종종 앱에서 페이지 매김과 같은 일부 기능을 구현하기 위해 URL과 상호 작용해야 합니다.

URL은 일부 앱 상태를 포함하기에 좋은 위치입니다. 이점은 사용자가 필터가 설정된 URL을 다시 공유할 수 있다는 것입니다.

까다로운 부분은 때때로 이러한 URL 매개변수를 가져오고 업데이트하는 방법입니다. 솔직히 최신 브라우저에는 URLSearchParams이라는 멋진 API가 있습니다. ✨ URL 매개변수를 우아하게 검색하거나 업데이트할 수 있습니다.

URLSearchParams is available in node.js and most browsers.

❤️ 팔로우

🐦

🐙 https://github.com/thebug404

ℹ️ URLSearchParams란 무엇입니까?

URLSearchParams API를 사용하면 매우 우아한 방식으로 URL에서 쿼리 문자열을 읽을 수 있으며 더 이상 복잡한 구현을 수행할 필요가 없습니다. 이전에는 외부 API를 호출하거나 정규식을 사용해야 했습니다. 이 게시물에서는 이 API의 몇 가지 기능을 설명합니다.

🚀 시작하기

가장 먼저 해야 할 일은 쿼리 문자열을 포함하는 클래스를 초기화하는 것입니다.

const urlSearchParams = new URLSearchParams(`?username=thebug404&fullname=The+Bug`);

또는 브라우저 URL을 통해 값을 얻을 수 있습니다.

const urlSearchParams = new URLSearchParams(window.location.search);

이제 쿼리 매개변수를 읽고 수정하는 데 사용할 수 있는 URLSearchParams 인스턴스가 urlSearchParams에 저장되었습니다.

📖 파라미터 읽기

특정 매개변수를 얻으려면 get() 메서드를 사용할 수 있습니다.

const userId = urlSearchParams.get("username"); // thebug404

💾 매개변수 추가

append() 메서드는 URL에 새 쿼리 매개변수를 추가하는 데 사용됩니다.

urlSearchParams.append("country", "El Salvador")

console.log(urlSearchParams.toString()); // country=El+Salvador

🗑️ 매개변수 삭제

delete() 메서드는 URL에서 쿼리 매개변수를 제거하는 데 사용됩니다.

urlSearchParams.delete("fullname");

🔥 URL 생성

또 다른 유용한 사용 사례는 후드 아래에 URL 및 URLSearchParams가 있는 URL을 생성하는 것입니다.

const url = new URL("https://domain.com");

url.searchParams.set('username', 'thebug404');

console.log(url.toString()); // https://domain.com/?username=thebug404

💡 결론

본 것처럼 URL 생성, URL 쿼리 매개변수 가져오기, 추가 및 제거는 이 API를 사용하면 정말 쉬운 작업입니다. 솔직히 저는 사용이 얼마나 쉽고 직관적인지 정말 좋아하고 그게 저를 매우 기쁘게 합니다. 당신은요?

❤️ 팔로우

🐦

🐙 https://github.com/thebug404