JavaScript에서 URL 쿼리 파라미터를 변수로 관리하는 방법(GET방식)

JavaScript에서 URL 쿼리 파라미터를 변수로 관리하는 방법(GET방식)

API 요청을 보낼 때, URL에 여러 쿼리 파라미터를 사용하게 됩니다.

이런 경우, 쿼리 파라미터를 변수로 관리하면 코드를 더욱 읽기 쉽고 유지보수하기 쉬워집니다.

이번 포스팅에서는 JavaScript에서 쿼리 파라미터를 변수로 관리하는 간단한 방법을 설명하겠습니다.

예시 코드

// 쿼리 파라미터를 변수로 선언
const baseUrl = 'https://api.example.com/products';
const userId = 12345;
const searchKeyword = 'laptop';
const category = 'electronics';
const available = true;
const page = 1;
const pageSize = 20;

// URL 생성 함수
function buildUrl() {
    return `${baseUrl}?userId=${userId}&search=${encodeURIComponent(searchKeyword)}&category=${encodeURIComponent(category)}&available=${available}&page=${page}&pageSize=${pageSize}`;
}

// 생성된 URL 출력
console.log(buildUrl());

// 이 URL을 사용해 AJAX 요청을 보낼 수 있습니다.
$.ajax({
    url: buildUrl(),
    method: 'GET',
    success: function(data) {
        console.log('Data fetched:', data);
    },
    error: function(error) {
        console.error('Error fetching data:', error);
    }
});

 

위 예시는 간단하지만 실무에서 API 요청을 다룰 때 매우 유용하게 활용할 수 있으니, 필요한 데이터를 쉽게 변수로 분리하고, 요청 URL을 유연하게 생성해보세요 :)