자바스크립트의 URL 쿼리 스트링 다루기

오늘은 데브코스 FE 수업에서 실습했던 내용인

'URL 쿼리 스트링(Query String)'을 다루는 방식에 대해 더 알고싶어

따로 조사해보았다.

주제

자바스크립트의 URL Query String 다루기

주제 선정 이유

URL으로 쿼리를 다루는게 낯설고 관련 개념이 부족해서, url에 관한 기본 개념부터 공부하며 익히고자 한다.

또한 수업시간에 배운 .searchParams.set() 말고도 다른 방법으로 쿼리 스트링을 다룰 수 있는지 알아보고자 한다.

주제 탐구 내용

🔍URL의 구성 요소

위 예시 URL이 있다고 가정하고 URL 구성요소를 살펴보자.!

https: → 스키마(scheme) 또는 프로토콜(protocol)을 나타낸다.

즉, 브라우저가 웹 서버와 접속할 때 사용해야 할 통신 프로토콜을 의미한다.

웹에서는 보통 http: 나 조금 더 안전한 https:가 많이 사용된다.

example.org → 호스트 네임(hostname) 을 나타낸다.

예시처럼 사람이 읽기 쉬운 도메인 네임이 될 수도 있고, 127.0.0.1 처럼 컴퓨터가 바로 이해할 수 있는 형태인 IP주소가 될 수도 있다.

호스트 네임 뒤 : 기호 뒤 숫자 → 포트(port) 를 나타낸다. 하나의 서버에 존재하는 여러 출입구 번호 중 지정된 번호이다.

호스트 네임이 아파트 한 동이라면, 포트는 각 호에 해당한다.

프로토콜, 호스트 네임, 포트를 묶는다면 → 출처(origin) 를 나타낸다.

이는 브라우저에서 보안 상의 이유로 다른 출처로의 HTTP 요청을 제한하는 CORS(Cross-Origin Resource Sharing)의 토대가 되는 개념이다.

/foo/bar → 경로명(pathname) 을 나타낸다. 서버에서 해당 리소스가 어디에 위치하는지를 의미한다.

과거에는 서버의 하드 드라이브 내에서 물리적인 파일의 경로를 사용하는 경우가 많이 경로 맨 뒤에 파일 확장자까지 붙는 경우가 많았다.

하지만 요즘에는 웹 서버의 자체적인 라우팅(routing)으로 논리적인 위치를 나타내는 경우가 더 자주 쓰인다.

?q=baz → 쿼리 스트링(query string) 또는 검색 매개변수(search parameter) 라고도 한다.

웹 서버에서는 URL의 쿼리 스트링을 분석하여 요청한 리소스를 응답하기 전에 다양한 추가 작업을 수행할 수 있다.

검색 뿐만 아니라 필터링, 페이지네이션, 정렬 등 다양한 용도로 사용된다.

?key1=value1&key2=value2&... 형태로 여러 개의 키와 값의 쌍을 매개변수로 명시할 수 있으며,

?key=value1&key=value2 와 같이 하나의 키에 여러 개의 값을 사용할 수도 있다.

#bang → 앵커(anchor), 해시(hash), 조각(fragment)등 다양한 이름으로 불린다. 리소스 내에서 특정 부분을 나타내는데 사용하며 긴 컨텐츠의 목차를 구현할 때 유용하게 사용된다.

예를 들어, 목차 내의 해시가 붙어 있는 링크를 클릭하면 브라우저가 웹 페이지의 특정 섹션으로 자동으로 스크롤되게 할 수 있다.

단, 해시는 클라이언트에서만 의미가 있는 부분이기 때문에 웹 서버로는 전송되지 않는다는 점에 주의해야한다.!

🔍JS에서 쿼리스트링을 다루는 이유?

동적 데이터 전송 및 수신 역할을 한다. 검색어를 서버로 보내 검색 결과를 가져올때 주로 사용된다.
필터링된 검색 결과를 얻을 수 있다.

let filter = 'recent';
let url = new URL('https://example.com/posts');
url.searchParams.append('filter', filter);

// 사용자가 이 URL을 공유하면 동일한 필터링된 결과를 볼 수 있음
console.log(url.toString()); // https://example.com/posts?filter=recent

페이징에 유리하다. 페이지 번호를 쿼리 스트링을 전달하여 사용자가 특정 페이지로 쉽게 이동할 수 있게 만들어준다.
정렬 이 가능하다. 데이터의 정렬 순서를 쿼리 스트링으로 전달하여 사용자가 원하는 정렬 방식으로 데이터를 볼 수 있게 한다.

🔍URL 쿼리 스트링을 다루는 2가지 방법

.searchParams 이용하기

.searchParams는 ‘URL’객체의 속성이며, ‘URLSearchParams’ 객체를 반환한다.
URL의 쿼리 매개변수들을 쉽게 다룰 수 있다.
추가, 삭제, 수정 가능하다.
MDN Web Docs URL.searchParams - Web API | MDN

let url = new URL('<https://newsapi.org/v2/top-headlines>');

// 쿼리 매개변수 추가
url.searchParams.append('country', 'us');
url.searchParams.append('category', 'technology');

// 쿼리 매개변수 출력
console.log(url.toString()); // <https://newsapi.org/v2/top-headlines?country=us&category=technology>

// 쿼리 매개변수 수정
url.searchParams.set('category', 'business');
console.log(url.toString()); // <https://newsapi.org/v2/top-headlines?country=us&category=business>

// 쿼리 매개변수 삭제
url.searchParams.delete('country');
console.log(url.toString()); // <https://newsapi.org/v2/top-headlines?category=business>

URLSearchParams() 이용하기

‘URL’객체와 무관한, 독립적인 객체이다.
쿼리 매개변수를 자체적으로 생성하고 조작할 수 있다.
쿼리 문자열을 다루기 위한 추가, 수정, 삭제 등 다양한 메서드들이 있다.
MDN Web Docs URLSearchParams() - Web API | MDN

// URLSearchParams 객체 생성
let params = new URLSearchParams();

// 쿼리 매개변수 추가
params.append('country', 'us');
params.append('category', 'technology');

// 쿼리 매개변수 문자열 출력
console.log(params.toString()); // country=us&category=technology

// URL에 쿼리 매개변수 추가
let url = new URL('<https://newsapi.org/v2/top-headlines?'> + params.toString());
console.log(url.toString()); // <https://newsapi.org/v2/top-headlines?country=us&category=technology>

// 쿼리 매개변수 수정
params.set('category', 'business');
console.log(params.toString()); // country=us&category=business

// 쿼리 매개변수 삭제
params.delete('country');
console.log(params.toString()); // category=business

차이점 요약

.searchParams는 URL 객체의 속성으로, 해당 URL의 쿼리 매개변수를 직접 다룰 수 있다. 특정 URL의 쿼리 매개변수를 다뤄야 할 때 유용하다.
URLSearchParams()는 독립적인 객체로, URL과 무관하게 쿼리 매개변수를 생성하고 조작할 수 있다. 쿼리 매개변수를 독립적으로 생성하거나 조작할 때, 또는 여러 URL에서 공통적으로 사용할 쿼리 매개변수를 관리할 때 유용하다.

🔍쿼리스트링을 다루기 위한 JS 라이브러리

🖇️쿼리 스트링을 다루기 위한 자바스크립트 라이브러리 2종 비교 (qs vs. query-string)

쿼리 스트링을 다루기 위한 자바스크립트 라이브러리 2종 비교 (qs vs. query-string)

Engineering Blog by Dale Seo

www.daleseo.com

qs 라이브러리 와 query-string 라이브러리가 있는데, 위 글에서 자세한 설명을 참고하면 좋을 것 같다.

주의할 점은, 두 라이브러리를 가급적 혼용하여 쓰지 않는 것이 좋다는 것!

이러한 라이브러리를 사용할 수 없었던 나의 실습시간과 같은 환경에서는, URL객체의 searchParams 속성을 사용하거나 URLSearchParams 객체를 이용하면 된다.

마무리

배운점 및 부족한 점

쿼리 스트링을 몰랐을 때의 나라면, 정렬 기능을 데이터를 받아와서 JS로 일일이 객체를 배열로 전환하고 배열 정리 메소드를 쓰거나, 검색 기능을 검색어가 데이터에 포함되어있는지 완전탐색으로 한땀한땀 구현했을 것 같다. 코드 구현 난이도가 훨씬 많이 들고 시간도 오래걸렸을 것 같다.

url 에서 쿼리 스트링이 어떤 부분이고, 쿼리 스트링이 왜 필요하고, 쿼리 스트링을 다루는 방법 2가지 등등을 공부하고 배우게 되었다. 그렇지만 아직은 쿼리 스트링을 효율적으로 다루기 위한 JS 라이브러리를 찾아 이해만 해본 단계이고 사용해본적은 없기때문에 추후 프로젝트에서 쿼리를 다룰일이 있다면 라이브러리를 꼭 사용해보고 싶다.

느낀점

쿼리 스트링에 대해 찾아보기 전과는 다르게, url의 쿼리 스트링 조작 단 하나만으로 정렬, 필터링, 검색어, 페이징 등등 다양한 기능을 사용할 수 있다는 사실을 알게되었다. 개발자가 기능을 구현하는 더 쉽고 효율적인 방식이면서 백엔드와 소통하는 새로운 하나의 방법을 알게되었다.

출처

https://www.daleseo.com/js-url-search-params/

https://www.daleseo.com/js-url-api/

'Javascript' 카테고리의 다른 글

자바스크립트 동작 원리 이해하기 (2)	2024.07.31

목차

주제