웹 개발자들은 종종 URL에 쿼리 파라미터를 추가하여 정보를 전달합니다. 이러한 쿼리 파라미터는 브라우저에서 사용자의 입력을 처리하거나 동적으로 페이지를 생성하는 데 사용될 수 있습니다.

때때로 다양한 브라우저에서 쿼리 파라미터를 처리하는 방법이 다를 수 있습니다. 이를 해결하기 위해 브라우저 객체 모델(Browser Object Model, BOM)을 사용할 수 있습니다. BOM은 브라우저에 특화된 기능을 제공하는 JavaScript API의 집합입니다.

URL에서 쿼리 파라미터 추출하기

BOM을 사용하여 URL에서 쿼리 파라미터를 추출하는 방법은 간단합니다. 다음은 주요 브라우저에서의 예시 코드입니다.

// 현재 URL 가져오기
var url = window.location.href;

// URL에서 쿼리 파라미터 추출
var queryParams = {};
var params = url.split("?")[1];
if (params) {
  params = params.split("&");
  params.forEach(function(param) {
    var paramSplit = param.split("=");
    queryParams[paramSplit[0]] = decodeURIComponent(paramSplit[1]);
  });
}

console.log(queryParams);

위 코드는 현재 URL에서 쿼리 파라미터를 추출하여 JavaScript 객체로 변환합니다. 객체의 키는 파라미터 이름이고 값은 파라미터 값입니다.

쿼리 파라미터 추가하기

BOM을 사용하여 URL에 쿼리 파라미터를 추가하는 방법도 간단합니다. 다음은 주요 브라우저에서의 예시 코드입니다.

// 현재 URL 가져오기
var url = window.location.href;

// URL에 쿼리 파라미터 추가
url += (url.indexOf("?") === -1 ? "?" : "&") + "key=value";

console.log(url);

위 코드는 “key=value”라는 쿼리 파라미터를 현재 URL에 추가합니다. URL이 이미 다른 쿼리 파라미터를 포함하고 있는 경우에는 “&”를 추가하고 그렇지 않은 경우에는 “?”를 추가합니다.

브라우저 호환성

위의 예시 코드는 주요 브라우저에서 모두 작동할 것으로 기대됩니다. 그러나 다른 브라우저 및 브라우저 버전에서 동작을 테스트하는 것이 좋습니다.

Chrome, Firefox, Safari

위의 예시 코드는 Chrome, Firefox 및 Safari와 같은 주요 브라우저에서 잘 작동합니다.

Internet Explorer

인터넷 익스플로러의 경우, 쿼리 파라미터를 처리하는 방법이 다소 다를 수 있으므로 주의가 필요합니다. 대부분의 경우 window.location.search를 사용하여 쿼리 파라미터를 가져올 수 있습니다.

var queryParams = {};
var params = window.location.search.substr(1).split("&");
params.forEach(function(param) {
  var paramSplit = param.split("=");
  queryParams[paramSplit[0]] = decodeURIComponent(paramSplit[1]);
});

console.log(queryParams);

마무리

브라우저 별로 쿼리 파라미터를 처리하는 방법이 다를 수 있지만, BOM을 사용하면 이러한 차이점을 극복할 수 있습니다. BOM을 활용하여 URL에서 쿼리 파라미터를 추출하고 추가하는 방법을 배웠습니다.

더 자세한 내용은 아래의 참고 자료를 참고하시기 바랍니다.

참고 자료

• BOM (Browser object model)