쿼리스트링과 URLSearchParams

어제 시작한 팀프로젝트에서 영화 상세페이지 구현 부분을 맡게 되었다.

기본 메인페이지의 영화 이미지를 클릭하면 이미지에 있는 id 값을 받아와서 클릭한 영화와 일치하는 정보의 상세페이지가 나오도록 구현하기 위해서 이것저것 찾아보며 새로 공부한 내용들을 정리해보자.

 

■  쿼리스트링(?page=3)

http://127.0.0.1:5500/?name=John&age=20
http://127.0.0.1:5500/detail.html?id=238

 

쿼리스트링이란?

물음표? 뒤에 키 = 값 & 키 = 값 형식으로 주소에 데이터를 붙여줄 수있다.

데이터 쌍이 여러개 일때는 & 로 구분!

주소에 데이터를 전달하는 가장 쉬운 방법, 서버도 알아들을 수 있음

 

쿼리스트링의 정보는 location 의 search 에 있다.

console.log(window.location); 해서 볼 수 있음!

 

window.location.search 로 키와 값 가져오기

console.log("key & value:" window.location.search);

 

■  URLSearchParams

URL 의 쿼리스트링을 쉽게 다룰 수 있도록  설계된 웹 API
location.search 를 인자로 받아 사용자가 원하는 쿼리스트링 값을 손쉽게 가져오거나 조작할 수 있음
URLSearchParams 객체를 생성한 후, get(), set(), has() 와 같은 메소드를 통해서 쿼리스트링 조작이 가능하다.

 

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

const param1 = urlParams.get('id');

urlParams.get(‘키’) 해주면 값을 가져올 수 있다.

console.log(param1);

 

 

URLSearchParams 설명 및 메서드

https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams

 

참고

https://devit.koreacreatorfesta.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-URL-%EC%BF%BC%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A7%81Query-String-%ED%8C%8C%EC%8B%B1-%EB%B0%A9%EB%B2%95