[라이브러리] qs 모듈을 이해해 보자. (URL query string)

[라이브러리] qs 모듈을 이해해 보자. (URL query string)

 

 

qs 모듈이란?

보통 우리가 어떠한 조건값으로 데이터를 검색이나 필터링을 할 때, 혹은 API URL에 query string의 값을 전달하거나 히스토리를 관리 할 때 그 query string을 파싱(parsing)하거나, 스트링화 할 수 있는 라이브러리이다.




 
 
 

qs 모듈 / query string을 이해해 보자

 

 

 
 
 

---

 

 

 

 

qs 모듈 npm 공식 문서 링크

https://www.npmjs.com/package/qs




 

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

 

query string(쿼리 스트링) 구조 이미지

 

• 쿼리 파라미터(querystring)을 URL endpoint 뒤에 붙여 추가적인 정보 조회를 서버 측에 요청 하는 것이다.

• 정해진 endpoint 주소 이후에 물음표(?)를 사용하여 쿼리 파라미터(쿼리스트링 혹은 key)의 시작점을 알린다.
• parameter(querystring)=value(query)로 파라미터(쿼리스트링 혹은 key)의 값(쿼리)을 기재한다.
  • endpoint?querystring=query
• parameter(querystring)=value(query)로 파라미터(쿼리스트링 혹은 key)의 값(쿼리)을 기재한다.
  • endpoint?querystring=query
• 파라미터가 여러개일 경우 &를 붙여 여러개의  파라미터를 넘길 수 있다.
  • endpoint?querystring=query&querystring=query

 
 
 
 

1.  qs 모듈 설치

npm i qs

2.  적용 예제

import qs from 'qs'

// api endpoint : user/address?keyword=keyword

export const API_USER_ADDRESS = (keyword) => {
  return `/user/address?${qs.stringify({
    keyword,
  })}`;
};

import qs from 'qs'

// API 호출 페이지
const response = await API.GET(API_PRESS_CHECK_DUPLICATE(name, value));

// endpoint.ts
// 중복 체크
export const API_CHECK_DUPLICATE = (name, value) => {
  return `/user/checkDuplicate?${qs.stringify({ [name]: value })}`;
};

import qs from 'qs'

// 회원 조회 (기간 설정 데이터 조회)
export const API_USER_CLIENTS_DATA = (queryDuration) => {
  const [startDate, endDate] = queryDuration;

  return `/user/dashboard/clients?${qs.stringify({
    startDate: getStartOfUnix(startDate),
    endDate: getEndOfUnix(endDate),
  })}`;
};