객체를 쿼리 문자열로 변환하기

소개

이 랩에서는 JavaScript 를 사용하여 객체의 key-value 쌍으로부터 쿼리 문자열을 생성하는 방법을 살펴봅니다. Object.entries()에 Array.prototype.reduce() 메서드를 사용하여 쿼리 문자열을 생성하고, queryString의 길이에 따라 적절한 기호를 결정합니다. 이 랩을 마치면 웹 애플리케이션을 위한 쿼리 문자열을 효율적으로 생성할 수 있게 됩니다.

객체를 쿼리 문자열로 변환하기

객체를 쿼리 문자열로 변환하려면, 주어진 객체의 key-value 쌍으로부터 쿼리 문자열을 생성하는 objectToQueryString() 함수를 사용합니다.

이 함수는 다음과 같이 작동합니다:

• queryParameters로부터 쿼리 문자열을 생성하기 위해 Object.entries()에 Array.prototype.reduce()를 사용합니다.
• queryString의 길이에 따라 symbol을 ? 또는 &로 결정합니다.
• val이 문자열인 경우에만 queryString에 연결합니다.
• queryParameters가 falsy 한 경우 queryString 또는 빈 문자열을 반환합니다.

objectToQueryString() 함수의 코드는 다음과 같습니다:

const objectToQueryString = (queryParameters) => {
  return queryParameters
    ? Object.entries(queryParameters).reduce(
        (queryString, [key, val], index) => {
          const symbol = queryString.length === 0 ? "?" : "&";
          queryString +=
            typeof val === "string" ? `${symbol}${key}=${val}` : "";
          return queryString;
        },
        ""
      )
    : "";
};

objectToQueryString() 함수의 사용 예시:

objectToQueryString({ page: "1", size: "2kg", key: undefined }); // returns '?page=1&size=2kg'

요약

축하합니다! 객체를 쿼리 문자열로 변환하는 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.