이번 프로젝트를 진행하면서 가장 새로웠던 코드는 URLSearchParams이다. 이 URLSearchParams를 사용하여 query의 특정 key의 value 값을 사용할 수 있었는데, 더 알아보니 이 URLSearchParams를 통해서 query string을 변경할 수도 있다는 걸 알게 되었다. 그럼 지금부터, URLSearchParams가 무엇이고 어떤 메서드들을 가지고 있는지 알아보자.
URLSearchParams
인터페이스는 URL의 쿼리 문자열에 대해 작업할 수 있는 유틸리티 메서드를 정의한다. 즉, 해당 코드를 사용하면 URL의 쿼리 문자열을 개발자의 의도에 맞게 사용할 수 있는 것이다. 이 기능은 IE(Internet Explorer)에서는 안되지만, 모던 브라우저에서는 사용할 수 있다.
URLSearchParams()
URLSearchParams.append()
특정 키/값을 새로운 검색 매개변수로 추가한다.
URLSearchParams.delete()
특정 매개변수를 찾아 키와 값을 모두 지운다.
URLSearchParams.entries()
객체의 모든 키/값 쌍을 순회할 수 있는 순회기를 반환한다.
URLSearchParams.forEach()
객체의 모든 값을 순회하며 지정한 콜백을 호출한다.
URLSearchParams.get()
주어진 검색 매개변수에 연결된 첫 번째 값을 반환한다.
URLSearchParams.getAll()
주어진 검색 매개변수에 연결된 모든 값을 반환한다.
URLSearchParams.has()
주어진 검색 매개변수의 존재 여부를 나타내는 Boolean을 반환한다.
URLSearchParams.keys()
객체의 모든 키를 순회할 수 있는 순회기를 반환한다.
URLSearchParams.set()
주어진 검색 매개변수에 연결된 값을 설정한다. 연결된 값이 다수라면 나머지는 제거한다.
URLSearchParams.sort()
모든 키/값 쌍을 키로 정렬한다.
URLSearchParams.toString()
URL에 쓰기 적합한 형태의 쿼리 문자열을 반환한다.
URLSearchParams.values()
객체의 모든 값을 순회할 수 있는 순회기를 반환한다.
내가 프로젝트에서 활용했던 메서드는 URLSearchParams.get()
함수였다. 각 카테고리에 따라 표시되는 타이틀이 변경되는 기능이 필요했는데, 이를 query parameter의 키/값을 활용하여 변경할 수 있을 것 같았다.
urlParams라는 변수에 location.search 인스턴스를 반환하는 URLSearchParams 인터페이스를 할당하고, 남자, 여자, 악세서리 카테고리를 구분짓는 menu key값의 value를 받아올 수 있도록 .get
메서드를 활용했다.
그러면 이렇게 query parameter가 변경될 때 마다, get 함수에 의해 타이틀도 바뀌게 된다.
그렇다면, URLSearchParams.set()
메서드와 URLSearchParams.append()
메서드를 활용해서 복잡하게 구현했던 다중 필터링 기능을 보다 가독성 있고 효율적으로 구현할 수 있지 않을까?
이러한 로직으로 구현한다면 중복 필터링은 set으로 변경되고, 존재하지 않는 query는 추가되는 식으로 구현할 수 있을 것 같은데, 백엔드가 서버를 켜지 않아서 인지 적용이 안되는 것 같다.. 차후에 서버가 열린뒤에 확인해보아야 할 것 같다. 또한, URLSearchParams.delete
메서드를 활용하여 필터 초기화 기능 역시 구현할 수 있지 않을까 생각된다.
URLSearchParams 에 대해 잘보고 갑니다~