배열을 value로 갖고있는 key를 쿼리스트링으로 전달하는 방법

...
const response = await axios.get('endpoint/users', {
  params: {
    emailAlarm: ['true', 'false'],
  },
})
...

예를 들어, GET 요청으로 위와 같은 배열 타입 파라미터를 쿼리스트링으로 전달하는 경우, 추가적인 처리가 필요하다. 추가적인 처리가 없다면 다음과 같은 쿼리스트링으로 서버에 요청을 보내게 된다.

/?emailAlarm[]=true&emailAlarm[]=false

이 양식은 프로젝트의 API 문서 양식에 맞지 않았고, 이 배열 파라미터를 변환하여 서버에 요청할 필요가 있었다.

qs 모듈

이를 순수한 자바스크립트 함수로 변환하여 서버에 요청할 수 있었지만, qs 라는 모듈을 사용하면 간편하게 변환할 수 있음을 알게 됐다.

npm i qs

qs 는 쿼리스트링을 파싱하거나, 스트링화하는 간편한 라이브러리이다.

import qs from 'qs'
axios.defaults.paramsSerializer = (params) => {
  return qs.stringify(params, { arrayFormat: 'repeat' })
}

앞으로 발생할 모든 Ajax 요청의 파라미터들을 Stringifying 하기 위해 axios.defaults 를 설정했고, qs.stringify(params, option) 에서 두 번째 인자는 Stringify 규칙을 의미한다.

공식 문서에 다양한 옵션이 나열되어 있다.

위 옵션은 배열 파라미터의 쿼리스트링을 아래와 같이 Stringifying 하겠다는 옵션이다.

/?emailAlarm=true&emailAlarm=false

위와 같이 qs 라이브러리를 사용하여 팀 규약에 맞는 Ajax 요청을 간편하게 전달할 수 있었다.

쿼리스트링

사용자가 입력 데이터를 전달하는 방법이다. url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.

http://host:port/path?querystring=query

query parameters( 물음표 뒤에 = 로 연결된 key : value pair 부분)을 url에 붙여 추가적인 정보 조회를 서버 측에 요청하는 것이다. 대개 클라이언트가 어떤 특정 리소스에 접근하기 위한 정보(유저의 ID, 글 번호, 날짜 등)를 담는다.

형식

엔드포인트 주소 이후 ?를 쓰는것으로 쿼리스트링이 시작함을 알린다. parameter=value로 필요한 파라미터의 값을 할당한다.

파라미터가 여러 개일 경우 &를 붙여 여러 개의 파라미터를 넘길 수 있다.

endpoint.com/?param=value1&param=value2

위와 같이 key 와 value 를 지정하여 하나의 파라미터에 여러개의 값을 서버에 전달할 수 있다.

배열 파라미터를 서버에 요청하는 것은 각 프로젝트마다 정해진 규약이 있으며, 몇가지 규약의 예시는 아래와 같다.

• /?a[]=seoul&a[]=busan
• /?a=seoul&a=busan
• /?a=seoul+busan (특정 문자로 쭉연결)

Reference

• npm qs 문서