“쿼리 스트링 쉽게 이해하기! URL에 정보를 쏙쏙 담는 법”

📝 상세 배경 설명: 쿼리 스트링이란?

웹에서 데이터를 서버에 요청할 때, URL 끝에 붙는 ?와 &로 구분된 ‘키=값’ 쌍들을 쿼리 스트링(Query String)이라고 해요.
예를 들어, 검색어, 페이지 번호, 필터 조건 등을 서버에 전달할 때 많이 사용하죠.

쿼리 스트링은 GET 요청에 자주 쓰이고, 서버는 이 값을 읽어 사용자가 원하는 데이터를 반환해줍니다.

---

💻 실무 예제 코드: 쿼리 스트링 사용법

// 검색어와 페이지 번호를 쿼리 스트링으로 전달
const searchTerm = 'coffee';
const page = 2;

const url = `https://api.example.com/products?search=${encodeURIComponent(searchTerm)}&page=${page}`;

fetch(url)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Error:', err));

• encodeURIComponent()는 특수문자(공백, &, = 등)를 URL에 안전하게 포함시키기 위해 꼭 써야 해요.

---

⚠️ 자주 하는 실수와 해결법

 

💡 초보자 팁!

• 쿼리 스트링은 URL에 데이터를 담아 서버에 전달하는 가장 기본적인 방법!
• 값을 직접 넣을 때는 항상 encodeURIComponent로 인코딩 필수!
• 주소창에 붙여서 확인하면 어떤 데이터가 전달되는지 한눈에 알 수 있어요.

---

🚀 실력자 팁!

• 복잡한 쿼리 스트링은 URLSearchParams API 사용하면 편리!
• 서버에서 쿼리 스트링 파싱 라이브러리(예: qs, query-string)로 쉽게 처리 가능
• RESTful API에서 필터링, 정렬, 페이징 기능 구현 시 쿼리 스트링 활용 극대화