자바스크립트를 사용하여 객체로 된 값을 쿼리스트링(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

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