쿼리 스트링(Query String): 웹의 데이터 전달자 완벽 분석

쿼리 스트링(Query String): 웹의 데이터 전달자 완벽 분석

 

웹에서 데이터를 전달하거나 서버에 요청을 보낼 때 흔히 사용하는 것이 바로 **쿼리 스트링(Query String)**입니다. URL 뒤에 “?“와 함께 등장하는 이 작은 친구는 다양한 정보를 서버로 전달하거나 페이지를 동적으로 조작할 때 중요한 역할을 합니다. 오늘은 쿼리 스트링이 무엇인지, 어떻게 구성되는지, 그리고 실제로 어떻게 사용하는지 프론트엔드 개발자 입장에서 자세히 살펴보겠습니다. 😊

 

1. 쿼리 스트링이란?

 

쿼리 스트링은 URL의 일부로, 특정 데이터를 서버에 전달하거나 클라이언트에서 동적으로 사용할 수 있도록 합니다. URL의 끝에 ?로 시작하며, 키-값 쌍의 형태로 데이터를 표현합니다.

 

구조

 

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

 

• Base URL: https://example.com/page

• 페이지의 기본 주소.

• ?: 쿼리 스트링의 시작을 나타냄.

• key1=value1&key2=value2: 데이터를 전달하기 위한 키-값 쌍.

• key1과 key2는 각각 데이터의 이름.

• value1과 value2는 전달하려는 값.

 

2. 쿼리 스트링의 주요 용도

1. 데이터 전달

• 서버로 데이터를 전달하여 특정 요청을 처리하거나 정보를 가져올 때 사용합니다.

• 예: 검색 요청

 

https://example.com/search?query=javascript

 

• 서버는 query=javascript를 받아 “javascript”와 관련된 데이터를 반환.

 

2. 필터링 및 정렬

• 페이지 내에서 필터링 옵션이나 정렬 조건을 표현.

• 예: 상품 필터링

 

https://example.com/products?category=shoes&sort=price_asc

 

 

3. 페이징

• 큰 데이터를 여러 페이지로 나눌 때, 현재 페이지 정보를 전달.

• 예:

 

https://example.com/articles?page=3

 

 

4. 상태 유지

• 클라이언트 상태를 URL에 포함하여 브라우저 새로고침이나 공유 시 상태를 유지.

• 예:

 

https://example.com/dashboard?theme=dark

 

3. 쿼리 스트링의 문법

1. 키-값 쌍

• 형식: key=value

• 예: user=John

2. 다중 데이터

• 각 키-값 쌍은 &로 구분.

• 예: user=John&age=30

3. 값 인코딩

• 공백과 특수 문자는 URL에서 사용할 수 없으므로 인코딩이 필요.

• 공백 → %20 또는 +

• = → %3D

• & → %26

• 예: search=hello world → search=hello%20world

4. 배열 표현

• 키에 대괄호([])를 사용하여 배열 형태로 데이터를 전달.

• 예: ids[]=1&ids[]=2&ids[]=3

 

4. 브라우저에서 쿼리 스트링 다루기

 

읽기

 

브라우저의 window.location.search를 사용하면 현재 URL의 쿼리 스트링을 가져올 수 있습니다.

 

console.log(window.location.search);

// "?user=John&age=30"

 

파싱하기

 

URLSearchParams API를 사용하면 쿼리 스트링을 쉽게 파싱하고 데이터를 읽을 수 있습니다.

 

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

 

console.log(params.get('user')); // "John"

console.log(params.get('age')); // "30"

 

새로운 쿼리 스트링 추가하기

 

URLSearchParams를 활용하여 기존 쿼리에 데이터를 추가하거나 수정할 수 있습니다.

 

params.set('theme', 'dark');

console.log(params.toString()); // "user=John&age=30&theme=dark"

 

params.append('page', '2');

console.log(params.toString()); // "user=John&age=30&theme=dark&page=2"

 

5. 서버에서 쿼리 스트링 처리

 

Node.js 예제

 

express를 사용하여 서버에서 쿼리 스트링 데이터를 읽는 방법:

 

const express = require('express');

const app = express();

 

app.get('/search', (req, res) => {

  const query = req.query.query; // 쿼리 스트링의 "query" 값 가져오기

  res.send(`검색어는: ${query}`);

});

 

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

 

6. 쿼리 스트링 사용 시 주의사항

1. 보안

• 민감한 정보를 쿼리 스트링에 포함하지 마세요.

• 예: ?password=1234 → 비추천!

• HTTPS로 암호화는 가능하지만, 브라우저 기록이나 로그에 남을 위험이 있음.

2. 길이 제한

• 대부분의 브라우저는 URL 길이에 제한(약 2000자)이 있습니다. 너무 긴 데이터를 전달하지 않도록 주의하세요.

3. SEO 영향

• 쿼리 스트링이 있는 URL은 검색 엔진에 개별 페이지로 인식될 수 있습니다.

• Canonical 태그를 활용하여 중복 콘텐츠 문제를 방지하세요.

 

7. 쿼리 스트링의 대안

1. RESTful API

• 데이터를 경로에 포함하여 전달:

 

https://example.com/users/123

 

 

2. HTTP Body

• POST 요청의 경우, 데이터를 본문에 포함하여 보낼 수 있습니다.

• 보안이 중요한 경우 권장.

 

8. 쿼리 스트링 실전 예제

 

React에서 쿼리 스트링 사용

 

React에서 쿼리 스트링을 읽고 상태에 반영하는 예제:

 

import React from 'react';

import { useSearchParams } from 'react-router-dom';

 

function SearchPage() {

  const [searchParams, setSearchParams] = useSearchParams();

 

  const query = searchParams.get('query') || '';

 

  const handleSearch = (event) => {

    setSearchParams({ query: event.target.value });

  };

 

  return (

    <div>

      <input

        type="text"

        value={query}

        onChange={handleSearch}

        placeholder="검색어를 입력하세요"

      />

      <p>검색어: {query}</p>

    </div>

  );

}

 

export default SearchPage;

 

9. 결론

 

쿼리 스트링은 간단하지만 강력한 데이터 전달 방법입니다. 사용자와 서버 간 데이터를 주고받거나, 클라이언트 상태를 유지하는 데 유용하죠. 하지만 보안, 길이 제한, SEO 영향 같은 부분을 신경 써야 안정적인 애플리케이션을 개발할 수 있습니다.

 

🌷전설의 개발자가 되어봅시당!🌷