자바스크립트의 URLSearchParams로 쿼리 스트링 다루기
www.daleseo.com
자바스크립트의 URLSearchParams로 쿼리 스트링 다루기
소위 검색 파라미터(search parameters)라고도 불리는 쿼리 스트링은 URL에서 경로(pathname) 바로 다음에 나오는 ? 기호로 시작하는 문자열인데요. 비단 검색 뿐만 아니라 필터링(filter), 페이지네이션(pagination), 정렬(sort) 등 다양한 용도로 사용됩니다. 보통 웹 서버에서는 URL의 쿼리 스트링을 분석하여 요청한 리소스를 응답하기 전에 다양한 추가 작업을 수행할 수 있습니다.
쿼리 스트링에는 ?key1=value1&key2=value2&... 형태로 여러 개의 키와 값의 쌍을 & 기호로 구분하여 매개변수를 명시할 수 있는데요. 매개변수의 개수가 많아지면 사람의 눈으로 읽기가 쉽지 않고 매개변수에 다국어나 특수 문자가 포함되어 있으면 인코딩도 신경을 써줘야 하죠.
게다가 URL 명세에 따르면 쿼리 스트링은 ?key=value1&key=value2와 같이 동일한 키에 여러 개의 값을 할당하는 것도 허용하는데요. 이 부분도 처리할 때 경계 조건을 잘 고려하지 않으면 버그로 이어지기 쉽습니다.
예전에는 자바스크립트에서 쿼리 스트링을 일반 문자열로 다루는 경우가 많아서 적지 않은 노력과 주의가 필요했었는데요. 요즘에는 URL API에서 제공하는 URLSearchParams를 사용하여 좀 더 안전하게 쿼리 스트링을 다룰 수 있게 되었습니다.
이번 포스팅에서는 URL API에서 제공하는 또 다른 유용한 기능인 URLSearchParams를 이용하여 웹 주소의 구성 요소 중에서도 가장 다루기 어려운 쿼리 스트링을 다루는 방법에 대해서 알아보겠습니다.
📝 포스팅: https://www.daleseo.com/js-url-search-params/
자바스크립트의 URL API를 사용하는 기본적인 방법이 궁금하시다면 아래 게시물을 참고 바랍니다.
📕 자바스크립트의 URL API로 웹 주소 다루기: https://careerly.co.kr/comments/100004
아직 웹 표준 API를 사용하여 쿼리 스트링을 다루기가 꺼려지시는 분께는 아래 게시물을 추천드리겠습니다.
📗 쿼리 스트링을 다루기 위한 자바스크립트 라이브러리: https://careerly.co.kr/comments/94959
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 3월 26일 오후 3:41
댓글 0
함께 읽은 게시물
PM이 이해하면 좋은 지표 개념
프로덕트 매니저(PM)로 일하면서 늘 지표 이야기를 듣게 됩니다. 대부분 PM은 선행지표(leading indicator)와 후행지표(lagging indicator)의 개념을 잘 이해하고 있습니다. 하지만 선행지표에 영향을 미치는 '인풋(input) 지표, '아웃풋(o
... 더 보기하나부터 열까지 리더가 상세히 설명해 주기를 바라는 구성원이 있습니다. 반대로 큰 얼개만 듣고 나머지는 자율적으로 하고 싶어 하는 경우도 있죠. 회식에 참여하는 것을 너무나 힘겨워 하는 구성원이 있는 반면, 동료들과 함께 시간을 보내며 가까워지는 것을 원하는 구성원도 있습니다.
... 더 보기
‘경영의 신’이란 칭호를 받은 마쓰시타 고노스케는 경영자가 가져야 할 가장 중요한 자질을 ‘인간에 대한 이해’라고 했다. 경영의 진짜 핵심을 찌른 이야기다. 경영이란 무엇인가? 한마디로 ‘사람을 움직여 가치를 창조하는 업(業)’이다.
... 더 보기직장인으로서 10년 정도 일하게 되면 피할 수 없는 순간이 바로 조직에서 리더의 역할을 받게 되는 인사발령이다. 팀원이었을 때는 내게 주어진 업무를 내가 가진 능력과 주변 동료들의 도움으로 해결하고, 그에 합당한 평가와 보상을 기다리며, 나쁘지 않는 리워드와 내 위치에 안도하며 또 새해를 맞이하고 하루하루를 버텨나가는 과정에 큰 어려움이 없다.
... 더 보기-
Longest Common Subsequence 자바스크립트 풀이
코
... 더 보기
