Querystring

QueryString

 

QueryString(쿼리 문자열) 개념

**QueryString(쿼리 문자열)**은 URL에서 데이터를 전달하기 위해 사용되는 문자열입니다. 이는 일반적으로 URL의 끝에 붙으며, ?로 시작하고, 여러 개의 키-값 쌍이 &로 연결되어 있습니다. 웹 애플리케이션은 QueryString을 사용하여 서버와 클라이언트 간 데이터를 주고받거나 특정 페이지를 동적으로 구성합니다.

---

QueryString의 구조

URL에서 QueryString은 다음과 같은 구조를 가집니다:

https://example.com/page?key1=value1&key2=value2

• ?: QueryString의 시작을 나타냄.
• key1=value1: 첫 번째 키-값 쌍.
• &: 여러 키-값 쌍을 구분.
• key2=value2: 두 번째 키-값 쌍.

---

QueryString 사용 예

1. 검색 요청

URL:

https://search.com?query=javascript&category=books​

• query=javascript: 검색어는 "javascript".
• category=books: 카테고리는 "books".

2. 페이지네이션

URL:

https://example.com/products?page=3&limit=20​

• page=3: 3번째 페이지.
• limit=20: 한 페이지당 20개의 항목 표시.

---

JavaScript에서 QueryString 다루기

자바스크립트는 QueryString을 생성, 읽기, 수정하는 다양한 방법을 제공합니다.

1. window.location.search

• QueryString을 문자열 형태로 가져옵니다.

const queryString = window.location.search;
console.log(queryString); // "?key1=value1&key2=value2"

2. URLSearchParams 객체

URLSearchParams는 QueryString을 다루기 위한 편리한 메서드를 제공합니다.

1) QueryString 읽기

const queryString = window.location.search; // "?key1=value1&key2=value2"
const params = new URLSearchParams(queryString);

console.log(params.get('key1')); // "value1"
console.log(params.get('key2')); // "value2"

 

2) QueryString 생성

const params = new URLSearchParams();
params.append('key1', 'value1');
params.append('key2', 'value2');

console.log(params.toString()); // "key1=value1&key2=value2"

 

3) QueryString 수정

const params = new URLSearchParams('?key1=value1&key2=value2');

// 값 추가
params.set('key3', 'value3');

// 값 수정
params.set('key1', 'newValue1');

// 값 삭제
params.delete('key2');

console.log(params.toString()); // "key1=newValue1&key3=value3"

 

4) 모든 키-값 쌍 확인

const params = new URLSearchParams('?key1=value1&key2=value2');
for (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`);
}
// 출력:
// key1: value1
// key2: value2​

3. decodeURIComponent 및 encodeURIComponent

QueryString에서 데이터를 안전하게 처리하려면, 특수 문자를 인코딩/디코딩해야 합니다.

1) 인코딩

const key = 'name';
const value = 'John Doe & Friends';
const encoded = encodeURIComponent(`${key}=${value}`);
console.log(encoded); // "name=John%20Doe%20%26%20Friends"

 

 

2) 디코딩

const encoded = 'name=John%20Doe%20%26%20Friends';
const decoded = decodeURIComponent(encoded);
console.log(decoded); // "name=John Doe & Friends"

---

QueryString의 장단점

장점

1. 간단하고 직관적: 데이터 전달이 쉽고 URL만으로 정보 확인 가능.
2. 브라우저 기본 지원: 추가 설정 없이 사용 가능.
3. 북마크 가능: URL에 포함된 데이터를 북마크하거나 공유 가능.

단점

1. 보안 취약: URL에 포함되므로 데이터가 노출될 가능성.
2. 제한된 데이터 크기: URL 길이에 따라 전달 가능한 데이터 크기 제한.
3. 복잡한 데이터 처리 어려움: JSON 같은 복잡한 데이터 구조 전달에 적합하지 않음.

---

결론

QueryString은 URL을 통해 데이터를 전달하는 기본적인 메커니즘으로, 검색, 필터링, 페이지네이션 등 다양한 상황에서 사용됩니다. 자바스크립트의 URLSearchParams 객체는 QueryString을 쉽게 생성, 읽기, 수정할 수 있도록 도와줍니다. 하지만 보안과 데이터 크기 제한을 고려해 사용해야 하며, 민감한 정보는 QueryString 대신 POST 요청의 본문(body)이나 헤더로 전달하는 것이 더 안전합니다.

 

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

URLSearchParams - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI

decodeURI() - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

encodeURI() - JavaScript | MDN