쿼리스트링(Query string) 이란?

본 게시글은 개인 공부를 하면서 기록 목적으로 작성하였습니다.
잘못된 내용이 있다면 제보 부탁드립니다. 감사합니다.🙇‍♂️

 

 

1. 개 요

오늘은 회사 면접을 보면서 받았던 질문 중 쿼리스트링(Query string)에 대해 알아보고자 한다.

강의를 보며 공부할 때에도 '쿼리 스트링'에 대해 공부한 적이 있고, 프로젝트를 만들때에도 사용하였는데
면접에서 질문을 받았을 때 너무 긴장한 나머지 올바른 대답을 하지 못해 많이 아쉬웠다.

다음에 똑같은 질문을 받아도 당황하지 않고 대답할 수 있도록 이번 기회를 통해 공부한 기록을 남겨 보고자 한다.

 

2. 쿼리(Query) 란?

• 쿼리란, "질문", "문의하다"라는 뜻으로 데이터베이스에게 특정한 데이터를 보여달라는 클라이언트(사용자)의 요청을 말한다.
• 예로 "쿼리문을 작성한다"라는 말은 "데이터베이스에서 원하는 정보를 가져오는 코드를 작성한다"라는 의미와 같다.

 

3. 쿼리스트링(Query string) 이란?

• 쿼리스트링은 key=value 형태이며, URL에서 물음표 뒤에 오는 모든 문자열을 쿼리 스트링이라 말한다.
  (※ 아래 참고 사진에서 ?뒤에 오는 tab이 key 이고, repositories가 value이다.)
• 쿼리스트링은 &(앤드 연산자)를 통해 여러 개를 보낼 수 있다.

참고 사진

 

4. 쿼리스트링을 가져오는 방법

현재 접속한 페이지에서 URL 가져오기

// 현재 페이지 url 가져오기
window.location.href // 'https://github.com/Kyoo130?tab=repositories'

// 전체 URL중 쿼리스트링(파라미터)만 가져오기
window.location.search // '?tab=repositories'

 

파라미터 값 가져오기

• new URL()을 사용하여 생성된 URL 객체는, URL의 여러 구성 요소를 쉽게 다룰 수 있다.
• URL 객체중 searchParams 속성은, URL의 파라미터를 다룰 수 있는 객체인 URLSearchParams 객체를 리턴한다.
• URLSearchParams.get() 함수는 URL의 쿼리스트링에서 '파라미터명'으로 조회된 첫번째 값을 리턴한다.
• URLSearchParams.getAll() 함수는 URL의 쿼리스트링에서 '파라미터명'으로 조회된 모든 값을 배열로 리턴한다.
• URLSearchParams.keys() 함수는 전체 key 목록 가져올 수 있다.

// new URL()
const url = new URL('https://github.com/Kyoo130?tab=repositories&language=kr');


// url.searchParams
const urlParams = url.searchParams;


// URLSearchParams.get()
urlParams.get('tab'); // 'repositories'
urlParams.get('language'); // 'kr'


// URLSearchParams.getAll()
urlParams.get('tab'); // ['repositories']


// URLSearchParams.keys()
const keys = urlParams.keys();

for(let key of keys){
    console.log(key);
};
// tab
// language

 

특정 파라미터가 있는지 확인하기

• URLSearchParams에 쿼리스트링을 전달하여, URL의 파라미터를 다룰 수 있는 객체를 생성한다.
• URLSearchParams.has() 함수를 사용하면, 쿼리스트링에 '파라미터명'에 해당 하는 파라미터가 있는지 확인할 수 있다.

// new URLSearchParams('쿼리스트링');
const urlParams = new URLSearchParams('?tab=repositories&language=kr');


// urlParams.has('파라미터명')
urlParams.has('tab'); // true
urlParams.has('type'); // false

 

 파라미터 추가, 변경, 삭제하기

• URLSearchParams.append() 메소드의 파라미터로 전달 된 2개의 값 파라미터에 추가할 수 있다.
• URLSearchParams.set() 메소드를 이용하면, 기존의 파라미터 값을 변경할 수 있다.
  • 같은 key값이 여러 개가 존재한다면 나머지는 모두 제거하고 1개만 남겨 값을 변경한다.
  • 해당 파라미터가 존재하지 않으면 append() 처럼 파라미터를 새로 생성합니다.
• URLSearchParams.delete() 메소드를 사용하면 파라미터의 값을 삭제할 수 있다.
  • 이 메소드는 전달된 '파라미터명'인 모든 파리미터를 삭제한다.

const urlParams = new URLSearchParams('?tab=repositories');

// 파라미터 추가
// urlParams.append('파라미터명', '값')
urlParams.append('type', 'a'); // '?tab=repositories&type=a'
urlParams.append('type', 'b'); // '?tab=repositories&type=a&type=b'


// 파라미터 변경
// urlParams.set('파라미터명', '값')
urlParams.set('type', 'c'); // '?tab=repositories&type=c'
urlParams.set('lang', 'ko'); // '?tab=repositories&type=c&lang=ko'


// 파라미터 삭제 
// urlParams.delete('파라미터명')
urlParams.delete('lang'); // '?tab=repositories&type=c'

 

 

 

---

참 고

https://velog.io/@gth1123/%EC%BF%BC%EB%A6%AC-%EC%8A%A4%ED%8A%B8%EB%A7%81Query-string-URL-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0

쿼리 스트링(Query string), URL 파라미터

 

https://hianna.tistory.com/465

[Javascript] URL 파라미터 값 가져오기 (쿼리스트링 값)

 

https://im-first-rate.tistory.com/66

[Javascript] QueryString 가져오기.