자바스크립트를 사용하여 API를 호출하는 경우 서버에 값을 전달해야 하는 경우가 있죠. 이때 객체로 된 값을 쿼리스트링(QueryString)으로 변환하려면 어떻게 해야하는지 알아봅니다.



# 객체로 된 값을 쿼리스트링(query string) 값으로 변환하기
서버에서는 encoded 값으로 문자열로 나열된 값을 전달 받는 경우가 대부분입니다. 하지만 클라이언트에서 입력받은 값은 json이나 객체 타입인 경우가 많은데요 ~ 이를 문자열로 변환 후 전달 해보겠습니다. 먼저 아래처럼 payload라는 객체가 있다고 생각합니다.
payload = {
  site: 'webisfree',
  siteUrl: 'https://webisfree.com'
}

만약 payload를 쿼리스트링으로 변환하여 서버에 전달하려면 어떻게 바꿀까요? 아래처럼 코드를 적용할 수 있습니다. 이때 아래와 같이 Object.entries() 그리고 map()을 사용하여 재조합 할 수 있습니다.
var payloadString = Object.entries(payload).map(e => e.join('=')).join('&');

console.log(payloadString );

여기서 Object의 메소드 entries()는 객체의 키와 값 모두를 배열로 반환하여 줍니다. 반환된 모든 배열에 루프를 사용하기 위해서 .map()으로 코드를 작성 후 재조합하여 쿼리스트링을 생성하게되죠.

출력결과 아래와 같이 나타나게 됩니다.
site=webisfree&siteUrl=https://webisfree.com

이처럼 간단하게 쿼리스트링 값을 얻을 수 있습니다.