자바스크립트 객체를 쿼리 문자열로 인코딩하는 방법

쿼리 문자열(Query String)은 여러 개의 쿼리 파라미터로 구성되며, 서버에 데이터를 전송하기 위해 사용됩니다. URL에서 이 부분은 선택 사항이며, 개발자가 직접 구성해야 합니다. 이때 자바스크립트에 기본으로 내장된 encodeURIComponent 메서드를 활용하면 간편하게 처리할 수 있습니다.

encodeURIComponent()란?

encodeURIComponent() 함수는 URI(Uniform Resource Identifier) 구성 요소를 인코딩하는 함수입니다. 특정 문자들을 해당 문자의 UTF-8 인코딩을 나타내는 1개에서 4개의 이스케이프 시퀀스로 대체하여, URL에 사용할 수 없는 특수문자나 한글 등이 안전하게 전달되도록 도와줍니다.

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

ES6의 새로운 문법을 활용하면 객체를 다음과 같은 방식으로 쿼리 문자열로 인코딩할 수 있습니다.

예제 코드

let obj = {
    name: 'John',
    age: 25,
    city: 'Chicago'
};

let qs = Object.keys(obj)
            .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`)
            .join('&');

console.log(qs);

위 코드의 동작 원리를 단계별로 살펴보면 다음과 같습니다.

• Object.keys(obj): 객체의 모든 키(name, age, city)를 배열로 추출합니다.
• .map(...): 각 키와 값을 encodeURIComponent()로 인코딩한 뒤 키=값 형태의 문자열로 변환합니다.
• .join('&'): 변환된 문자열들을 앰퍼샌드(&)로 연결하여 하나의 완성된 쿼리 문자열을 만듭니다.

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

name=John&age=25&city=Chicago

참고: URLSearchParams 활용하기

모던 브라우저 환경이라면 URLSearchParams 객체를 사용하는 것도 좋은 방법입니다. 별도의 인코딩 처리 없이 자동으로 처리해 주기 때문에 코드가 더욱 간결해집니다.

const params = new URLSearchParams(obj);
console.log(params.toString()); // name=John&age=25&city=Chicago

상황에 맞게 두 가지 방법 중 하나를 선택하여 사용하면 됩니다. 직접 제어가 필요하다면 encodeURIComponent 방식을, 간결함이 필요하다면 URLSearchParams를 활용하는 것이 좋습니다.