[FE] 쿼리 스트링(Query String) 사용

🗣️ 쿼리 스트링은 주로 어디에 사용하셨나요?

• 의도: 쿼리 스트링의 개념과 작동 방식에 대해 이해하고 있는지 확인하는 질문

• 팁: 활용 사례나 예시를 제시한다.

• 나의 답안

  저는 쿼리 스트링을 주로 검색 기능을 구현할 때 사용했습니다.
  쿼리 스트링은 URL에서 물음표(?) 이후에 오는 부분으로, 서버에 추가 정보를 전달하기 위해 사용됩니다.
  검색 결과에 대한 내용은 페이지 주소 라우트에 따른 서버 사이드 렌더링이 필요하지 않기도 하고, 기존 페이지를 유지하면서도 화면이 바뀌었음을 알려주기 위해서 사용했습니다.

  이렇게 검색 기능에 쿼리 스트링을 이용하면, URL이 바뀜에 따라 브라우저의 히스토리 스택에 쌓이므로 뒤로 가기나 앞으로 가기에 수월합니다.
  다른 사람에게 검색 결과를 공유할 때도 유용합니다.
  쿼리 스트링이 들어간 URL을 공유하면 되기 때문에, 해당 URL로 접근할 경우 원하는 검색 결과를 얻을 수 있습니다.

• 제공된 답안 (모범 답안)

  저는 쿼리 스트링을 주로 검색 기능을 구현할 때 자주 사용했습니다.
  검색 결과에 대한 내용은 따로 페이지 주소 라우트에 따른 서버 사이드 렌더링이 필요하지 않기도 하고, 기존 페이지를 유지하면서도 화면이 바뀌었음을 알려주기 위해서 사용했습니다.

  이렇게 검색 기능에 쿼리 스트링을 이용하면, URL이 바뀜에 따라 브라우저의 히스토리 스택에 쌓이므로 뒤로 가기나 앞으로 가기에 수월합니다.
  또한, 다른 사람에게 검색 결과를 공유할 때 쿼리 스트링이 들어간 URL을 공유하면 되기 때문에, 해당 URL로 접근할 경우 원하는 결과를 얻을 수 있다는 장점이 있습니다.

---

📝 개념 정리

• 쿼리 스트링은 웹 주소(URL)의 일부분으로, 서버에 추가 정보를 전달하기 위해 사용된다. 주로 웹 애플리케이션에서 사용자 입력이나 검색 조건을 서버로 전송할 때 활용된다.

🌟 쿼리 스트링의 구성

• 쿼리 스트링은 URL에서 물음표(?) 이후에 오는 부분이다.

• 기본적인 형식은 다음과 같다.

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

  • ? : 쿼리 스트링의 시작
  • key1=value1 : 첫 번째 쿼리 파라미터
    • key1 : 파라미터 이름
    • value1 : 파라미터 이름에 대응하는 값
  • & : 두 개 이상의 쿼리 파라미터를 구분하는 구분자
  • key2=value2 : 두 번째 쿼리 파라미터

• 예시(동작 원리)

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

  • category=books : "books" 카테고리의 제품만 표시하라는 요청
  • sort=price_asc : 가격 오름차순으로 정렬하라는 요청

---

🌟 쿼리 스트링의 인코딩

• 쿼리 스트링에는 URL에서 사용할 수 없는 문자가 포함될 수 있기 때문에, 이들 문자는 URL 인코딩(URL encoding)을 통해 안전하게 전송된다.

• 예를 들어, 공백은 %20으로 인코딩되고, 앰퍼샌드(&)는 %26으로 인코딩된다.

  • key1=value with spaces는 key1=value%20with%20spaces로 인코딩된다.

---

🌟 쿼리 스트링의 길이 제한

• 쿼리 스트링의 길이는 브라우저와 서버의 구현에 따라 제한이 있을 수 있다.

  • 브라우저: 대다수의 현대 브라우저는 2000자 이상의 URL을 지원한다.

  • 서버: 서버마다 URL 길이에 대한 제한이 다를 수 있다. 예를 들어, Apache HTTP 서버의 경우 기본적으로 8192자까지 지원된다.

---

🌟 쿼리 스트링의 보안

• 쿼리 스트링에 민감한 정보를 포함하는 것은 보안상 좋지 않다.

• 쿼리 스트링은 URL에 직접 표시되기 때문에 다음과 같은 위험이 있을 수 있다.

  • URL 노출 : 브라우저의 히스토리, 서버 로그, 공유된 링크 등에서 URL이 노출될 수 있다.

  • 캐싱 문제 : 쿼리 스트링이 포함된 URL이 캐시되면 민감한 정보가 저장될 수 있다.

• 민감한 데이터는 쿼리 스트링 대신 POST 요청의 본문이나 다른 보안적인 방법을 통해 처리하는 것이 좋다.

---

🌟 쿼리 스트링과 SEO

• 쿼리 스트링은 검색 엔진 최적화(SEO)에 영향을 줄 수 있다.

• 검색 엔진은 쿼리 스트링을 포함한 URL을 별개의 페이지로 인식할 수 있으므로, 쿼리 스트링을 사용하여 페이지를 구조화할 때는 주의가 필요하다.

• SEO를 고려할 때는 다음을 염두에 두어야 한다.

  • 중복 컨텐츠 : 동일한 컨텐츠가 여러 URL에서 접근 가능한 경우, 검색 엔진이 중복 컨텐츠로 인식할 수 있다. 이를 방지하기 위해 rel="canonical" 링크를 사용할 수 있다.

  • URL 길이 : 너무 긴 URL은 검색 엔진 최적화에 좋지 않을 수 있다.

---

🌟 쿼리 스트링의 예제

• 검색 쿼리

  https://www.example.com/search?q=chatgpt

  • q=chatgpt는 "chatgpt"라는 검색어로 검색하라는 요청이다.

• 페이지네이션

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

  • page=3은 세 번째 페이지의 기사를 요청한다.

• 필터링

  https://www.example.com/products?category=clothing&size=m

  • category=clothing은 "clothing" 카테고리의 제품을 요청한다.
  • size=m은 사이즈가 "M"인 제품만 표시하라는 요청이다.